Why Page Object Model?

Starting an UI Automation in Selenium WebDriver is NOT a tough task. You just need to find elements, perform operations on it. Consider this simple script to login into a website

As you can observe, all we are doing is finding elements and filling values for those elements. This is a small script. Script maintenance looks easy. But with time test suite will grow. As you add more and more lines to your code, things become tough. The chief problem with script maintenance is that if 10 different scripts are using the same page element, with any change in that element, you need to change all 10 scripts. This is time consuming and error prone. A better approach to script maintenance is to create a separate class file which would find web elements, fill them or verify them. This class can be reused in all the scripts using that element. In future, if there is a change in the web element, we need to make the change in just 1 class file and not 10 different scripts. This approach is called Page Object Model in Selenium. It helps make the code more readable, maintainable, and reusable.

Advantages of POM

Page Object Design Pattern says operations and flows in the UI should be separated from verification. This concept makes our code cleaner and easy to understand. The Second benefit is the object repository is independent of test cases, so we can use the same object repository for a different purpose with different tools. For example, we can integrate Page Object Model in Selenium with TestNG/JUnit for functional Testing and at the same time with JBehave/Cucumber for acceptance testing. Code becomes less and optimized because of the reusable page methods in the POM classes. Methods get more realistic names which can be easily mapped with the operation happening in UI. i.e. if after clicking on the button we land on the home page, the method name will be like ‘gotoHomePage()’.

How to implement POM?

Simple POM: It’s the basic structure of Page object model framework where all Web Elements of the AUT and the method that operate on these Web Elements are maintained inside a class file.A task like verification should be separate as part of Test methods.

Complete Example TestCase: Go to Guru99 Demo Site. Here are we are dealing with 2 pages

Step 2) In home page check text “Guru99 Bank” is present

Step 3) Login into application

Step 4) Verify that the Home page contains text as “Manger Id: demo”

Login Page Home Page (shown once you login)

Accordingly, we create 2 POM in Selenium classes Guru99 Home Page POM in Selenium Guru99 Simple POM in Selenium Test case Here as well, we follow the concept of separation of Page Object Repository and Test Methods. Additionally, with the help of class PageFactory in Selenium, we use annotations @FindBy to find WebElement. We use initElements method to initialize web elements

@FindBy can accept tagName, partialLinkText, name, linkText, id, css, className, xpath as attributes. Let’s look at the same example as above using Page Factory Guru99 Login page with Page Factory Guru99 Home Page with Page Factory

Guru99 TestCase with Page Factory concept

Complete Project Structure will look like the diagram:

Here, when an operation is performed on an element the wait for its visibility starts from that moment only. If the element is not found in the given time interval, Test Case execution will throw ‘NoSuchElementException’ exception.

Summary

Page Object Model in Selenium WebDriver is an Object Repository design pattern. Selenium page object model creates our testing code maintainable, reusable. Page Factory is an optimized way to create object repository in Page Object Model framework concept. AjaxElementLocatorFactory is a lazy load concept in Page Factory – page object design pattern to identify WebElements only when they are used in any operation.

Download the Selenium Project Files for the Demo in this Tutorial