What is Page Object Model?
Page object model in selenium is an object design pattern that is used to create an object repository for web UI elements. It is one of the most widely used design patterns by community of Selenium WebDriver across the world.
In this model, we create a separate corresponding page class for each web page in the application and store all locators to inspect elements on the page, respective methods to interact with those elements, and variables to use them.
Each page class will locate the WebElements of the corresponding web page and perform operations on those WebElements by methods.
The test classes use the methods of this page object class whenever they need to perform a test with the UI of that page. The main benefit here is that, if the UI of page some changes in the future then the tests need not to be changed, only the code within the page class needs to be changed.
After that, all the changes that support new UI of web page are located in one place. Therefore, locators and test scripts are stored separately in the Selenium page object model.
Why Page Object Model (POM)?
The need or use of page object model in Selenium is due to following reasons:
1. Duplication of code: On increasing selenium test cases, if locators are not properly organized, it results difficult to maintain project structure because of too many duplications of code used in the project.
Duplicate code is mainly caused by duplicate functionality that results in duplicate usage of locators. Hence, the project is less maintainable. By using the page object model design pattern in the project, we can reduce or eliminate duplicate test code.
2. Less Time Consumption: If we have a small script, it is easy to maintain the test script in less time. But if the test suite contains 10 different test scripts using the same page element then on any change happen in that page element, we will need to modify in all 10 scripts which become a very tough and time-consuming task.
So, a better and systematic approach for script maintenance is to create a separate page class that would find web elements. This class can be reused in all the scripts using that element.
3. Code Maintenance: In future, if there is a change in the web element, we will need to make the change in just 1 page class and not in the 10 different scripts. This approach can be achieved using POM which makes code reusable, readable and maintainable.
How to Implement Page Object Model (POM)?
There are two ways by which we can implement page object model design pattern. They are as follows:
1. Using Normal approach.
2. Using Page Factory and @findBy
Let’s understand the concept one by one.
Creating Page Object Model using Normal Approach in Selenium
Normal approach is a basic structure of Page object model (POM) without using Page factory where all Web Elements of the application under test and the method that performs operations on these Web Elements, are maintained inside a class file.
Let’s take an example scenario where we will automate by using normal approach (without using Page factory).
Scenario to Automate:
1. Go to the Facebook login page.
2. Get the title of Facebook login page.
3. Enter the valid credentials in the “Facebook Login” Page in order to redirect to the ‘Facebook Home‘ Page.
4. On the Facebook Home page, verify that “Facebook” is present or not.
5. And then logout from the account.
Now, you will observe in the above scenario that we are dealing with two web pages. First is Login Page and the second is Home Page that will come after login. Accordingly, we will create 2 POM classes.
Follow the below steps to implement the Page Object Model Design Pattern.
a. Create a package named com.facebook.pages.
b. Create classes for Facebook Login web page and Facebook Home page to hold element locators and their methods. To execute both page class, we can create page objects for all available pages in the AUT.
c. Declare a WebDriver reference variable in each page class.
d. For each page class, create a constructor and pass WebDriver as an input parameter.
e. Locate all web elements using locators by using By.xpath and store them in variables of type By in one class as done in the following source code. We can reuse these locators in multiple methods so that maintenance will be easy. If any change happens in the UI in the future, we can simply update one Page.
f. Create a method to perform operations on each web element in the class. Now, call findElement() method using driver reference and pass reference variables of type By.
Let’s understand the following source code related to each page class.
Program source code 1:
Program source code 2: Follow all the steps as you are done in the previous coding.
a. Create another package named com.facebook.tests.
b. Create a TestBase class. Here, we will create WebDriver object to launching the Firefox browser, maximize browser, implementing waits, launching URL and etc.
Let’s see the following source code for TestBase class.
Program source code 3:
In steps 3, we need to create the testng.xml file and link it to the preceding created test case class files. If you don’t know about how to create TestNG XML file, you can follow the below link to learn step by step.
Step 4: Creating a testng.xml file.
On running this testng.xml file in the Eclipse, it will redirect to facebook.com web page in the Firefox browser and enter all the credentials. It will then verify username and password and then log out of the account. This is how Page Object Model can be implemented in the Selenium project using normal approach without Page factory.
Now, look at a glance at the output of the above scenario.
Results of running test suits:
Let’s take another scenario that will clear concepts better.
Scenario to Automate:
1. Open Home page https://www.pixabay.com.
2. Click on Login button on home page.
3. Enter the valid credentials on the Login page in order to redirect to the Portfolio page.
4. Click on profile image on Portfolio page.
5. Then logout from the account.
Now, you will observe in the above scenario that we are dealing with three web pages. First is Home Page, second is Login Page, and third is Portfolio Page that will come after login. Accordingly, we will create 3 page classes and one TestBase class.
Follow all the above important steps to implement Selenium Page Object Model in this scenario. Let’s understand the following source code.
1. Creating a Homepage class.
Program source code 4:
2. Creating Login page class.
Program source code 5:
3. Now, create Portfolio page class.
Program source code 6:
4. Now, it’s time to create a TestBase class.
Program source code 7:
5. In the last step, we need to create testng.xml file to run the above test script.
Advantages of Page Object Model in Selenium
There are several advantages of POM in Selenium WebDriver. They are as follows:
1. Clean Separation: Selenium PageObject Model design pattern makes our code cleaner and easy to understand because it helps to separate operations and UI flow from verification.
2. Page Object Repository: Another main advantage of POM is Page Object Repository that is independent of automation tests. POM makes object repository independent of test cases so that we can use the same object repository for different purposes with different tools.
For example, the same POM can be used for acceptance testing and functional testing whereas both use a different mechanism for testing.
3. Re-usability: POM makes the code better optimized because of reusable page methods in the POM classes.
4. Easy to maintain.
5. Easy readability of test scripts.
6. Reduce or eliminate duplicate code.
Hope that this tutorial has covered almost all the important points related to page object model in Selenium WebDriver with suitable examples. I hope that you will have understood this tutorial and enjoyed it.
Thanks for reading!