Automation Testing with Selenium using Page Object Model

Page Object Model (POM)

Writing selenium scripts is not tough job. We have to find the elements and perform the operation on the webpage.

Consider the below example of simple selenium script which will navigate to gmail website and identifies the email id field and enters the email id and taps on Next button. Then, Identifies the password field and enters password and clicks on Signin button.

In the above code maintaining is very easy as there is fewer lines of code. But as the functionality of the application increases, then test script also increases and the lines of code will also increase, now script maintenance will be difficult.

If same page element is being used by 15 different scripts, and if there is change in that page element then we will have to change in all 15 scripts which will be time consuming.

To solve the above problem make use of approach called Page Object Model. Page Object Model is one of the design pattern, where it acts as an Object Repository for elements (UI elements) on the webpage.  Here we create a separate class file which represents a Webpage, all the elements on the page are defined as variable on the class, all the user interactions are implemented as methods on the class. This approach will make the code readable and reusable. 

Rules for Creating a POM Class

1. Number of Page Object Model class should be same as number of Webpages present in the application.                  Eg: If the web application has 25 pages, we should create 25 Page Object Model Classes.
2. The name of the class should be same as the title of the respective webpage and it should end with the word Page.   Eg: If the title of the my Webpage is Login, then we should create a POM class name as LoginPage.java

How to Create a Page Object Model Class

Pre-requisite: Java Project should have been created. Selenium and testNG libraries should have configured with the Project.

1. Right click on the Java Project, Go to new option and select a Package option.
2. Enter Package name as com.yourprojectnamegoeshere.pom. Eg: com.google.pom
3. Right click on the package created in Step 2, Go to new option and select  a class option
4. Enter the class name as your webpage name. Say for example if your webpage name is Login, then your POM class name should be LoginPage. If your webpage name is update profile, then your POM class name should be UpdateProfilePage.

How does the POM class look like?

All the web elements of the Application under Test and the methods that operate on these web elements are maintained POM in a class and function which call these methods are maintained in another class file called as Test Scripts / Test cases.

Below is the sample code from the LoginPage POM Class

Declaration:- UI Elements on the Login page are declared by using @Findby annotation of testNG and are stored in the variable eg: emailIDField, nextBtn, pwdField and so on…..

@FindBy annotation can accept tagName, partialLinkText, name, linkText, id, css, className, xpath as attributes

Initialization:- All the web elements on the page a initialized used initElements of Page Factory class. Page Factory will initialize every WebElement variable with a reference to a corresponding element on the actual web page based on configured “locators”.

Utilization:- When the respective method is called, it performs the action on the webpage as defined inside the method.

How does POM work?

To make the POM class work we have to write a separate Test Class which will perform the actions on the methods inside POM class

Consider the below code of Test Class. Below code should be written under scripts package

When the constructor of POM class is called it initializes the web elements on the webpage using initelements of Page Factory class and converts the code to selenium code i.e private WebElement emailidFleld = driver.findElement (By.id(“MemberEmail");

For E.g: when the instance of the LoginPage is created as shown in Fig4, it calls the constructor on the POM class, and converts the code to Selenium code as shown above. But, converted code will not be executed. During runtime when the respected method is called, the converted selenium code gets executed and performs the action on the webpage.

For E.g: when the method enterEmail.enterEmailID() is called, Control passes to enterEmailID() and enters the specified email id in the EmailID field on the webpage.