How to handle page navigation in Page Object Model


As we know that in the page object model (pom), every page has a class, and every page class has its corresponding test class. We also know that the operations defined in the page class are called from its corresponding test class. If there are multiple pages, then there must be multiple page classes, each having its own corresponding test class.


Now the question arises, if an operation performed on the page, resulting in the navigation to another page then in this case how the WebDriver and page elements of the resulting page can be invoked OR how the WebDriver can be passed in the resulting page class.

Consider this with a real-time example: In the image shown below, the click operation on the 'Mobile' icon redirecting the user to mobile catalogue page.

page navigation in pom

Here there are two pages, one is the home page, where various categories are given. Here if the user chooses 'Mobile', then the user will be redirected to the 'Mobile' catalog page.

To implement page navigation in pom, every page class should have 3 components-

1. Page elements and WebDriver declaration
2. Page elements and WebDriver initialization inside the constructor
3. Operation to be performed on the page

page navigation in pom

The page navigation in POM should be implemented in such a way that the page elements and the webdriver of the resulting page should get initialized as soon as the navigation happens.

Suppose if an operation resulting in user navigation to another page then in this case the operation should return the object of the resulting page. Here the object of the resulting page gets created, the constructor of the resulting page gets called which in turn initializes all the page elements declared in the class, along with the driver of the resulting page which is passed as a parameter.



Below are the steps to implement page navigation in POM:


1. Create a page class and declare the page elements of the page and also declare the webdriver corresponding to that page.

page navigation in pom ele declaration


2. Initialize these page elements and the webdriver when the object of this page gets created. i.e. initialize all these inside the constructor so that whenever the object of the page gets created, these elements also get initialized.

page navigation in pom initialization


3. Now make the operation on the page to return the object of the resulting page if the operation is causing the navigation to another page.

page navigation in pom operation causing nav to another page


4. The resulting page constructor will be called and it will initialize the page elements along with the WebDriver of the resulting page.

page navigation in pom resulting page ele initialization


5. Now the operations on the resulting page can be performed through its Test class as shown below:

page navigation in pom test class calling methods of its page class


In this way the page chaining can be implemented in POM.