Selenium - Page Object Model

The test cases developed using Selenium Webdriver can be streamlined by incorporating
different design patterns within the tests. One of the widely used design patterns is Page Object
Model, which is popularly known as the POM.

What is a Page Object Model?

Page Object Model is a design pattern which is adopted in Selenium test case development for
segregation of the web elements and test cases in different class files. A page object is similar to
an object oriented class which is similar to an interface of the application under test.

The actual test cases make use of the methods of the object classes to interact with the web
application. After a test case has been developed, in future if any property of the web elements
get changed, then necessary changes would only need to be made at the page object level and
not at the test case level.

Likewise, if a new web element has been added to a web page in application, that should be first
added to the one and only dedicated place where all the objects are declared at the page level.

While designing test cases based on Page Object Model, each page in the application is
considered as a separate class file. Within that independent class file, all the web elements
specific to that page, will be available.

Verifications and Assertions for a test case are maintained in the particular test class file and not
on the page object class file. Thus there is no interdependence between any class files.

Benefits of Using Page Object Model

The benefits of using a Page Object Model are listed below −

There is a proper distinction among code written for test cases, features specific to a
page, locators for the web elements, and so on.
Page Object Model provides something similar to an object repository, where all the web
elements and the actions to be performed on them are stored at a particular place, rather
than being declared in multiple places within the test cases.
In case, a change in property of a web element is seen, modifications specific to that
element need to be made only at a single place, rather than multiple places. Thus it is
easy for maintenance purposes.
 As separate and independent class files are maintained, the test code developed for a
page, can be reused for another test case. Hence saving a lot of resources.

As separate and independent class files are developed as per the web pages on the
application, it makes the code very readable and clean by just going through the class
files.
Every distinctive web element is declared only once.

Example

Let us take an example of the below page, where we have the New User button on the Welcome
Page.

On clicking the New User button, we will be navigating to the Registration page, having the
Welcome, Register text as shown in the below image.
For the above example, we would create two page classes - WelcomePage.java and
RegisterPage.java where we would have the web elements on these respective pages and
actions to be performed on those elements. We would also create the test class -
WelcomePageTest.java which would contain the actual test case, and assertions related to that
test case. All the test cases would be under the same POM package.
Code Implementation on page class WelcomePage.java.

package POM;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;

public class WelcomePage {

WebDriver driver;
By text = By.xpath("//*[@id='signInForm']/h1");
By btn = By.xpath("//*[@id='signInForm']/div[3]/a");
public WelcomePage(WebDriver driver) {
this.driver=driver;
}
public String verifyPageHeading() {
String getHeadtext = driver.findElement(text).getText();
return getHeadtext;
}
public void clickOnNewUser() {
driver.findElement(btn).click();
 }
}

Code Implementation on page class RegisterPage.java.

package POM;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;

public class RegisterPage {

WebDriver driver;
By text = By.xpath("//*[@id='signupForm']/h1");
public RegisterPage(WebDriver driver) {
this.driver=driver;
}
public String verifyPageHeading() {
String getHeadtext = driver.findElement(text).getText();
return getHeadtext;
}
}

Code Implementation on test class WelcomePageTest.java.

package POM;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.*;
import java.util.concurrent.TimeUnit;
import static org.testng.Assert.assertEquals;

public class WelcomePageTest {

WebDriver driver;
WelcomePage objWelcomePage;
RegisterPage objRegisterPage;
@BeforeTest

public void setup() {

// Initiate the Webdriver

driver = new ChromeDriver();
 // adding implicit wait of 12 secs
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

// Opening the webpage

driver.get("https://www.tutorialspoint.com/selenium/practice/log
}
@Test(priority = 1)
public void verifyWelcomePageHeading() {

// object of WelcomePage page class

objWelcomePage = new WelcomePage(driver);
String text = objWelcomePage.verifyPageHeading();
System.out.println("Page heading in Welcome Page: " + text);

// assertions to test case

assertEquals("Welcome, Login In", text);
}
@Test(priority = 2)
public void moveToRegisterPage() {
objWelcomePage = new WelcomePage(driver);
objWelcomePage.clickOnNewUser();
}
@Test(priority = 3)
public void verifyRegisterPageHeading() {

// object of RegisterPage page class

objRegisterPage = new RegisterPage(driver);
String text = objRegisterPage.verifyPageHeading();
System.out.println("Page heading in Register Page: " + text);

// assertions to test case

assertEquals("Welcome,Register", text);
}
@AfterTest
public void teardown() {
// quitting browser
driver.quit();
}
}

Dependencies in pom.xml.
 <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>org.example</groupId>
<artifactId>SeleniumJava</artifactId>
<version>1.0-SNAPSHOT</version>

<properties>
<maven.compiler.source>16</maven.compiler.source>
<maven.compiler.target>16</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding
</properties>

<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/sele
<dependencies>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.11.0</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.testng/testng -->

<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.9.0</version>
<scope>test</scope>
</dependency>
</dependencies>
</project>

Output

Page heading in Welcome Page: Welcome, Login In

Page heading in Register Page: Welcome,Register
===============================================
Default Suite
 Total tests run: 3, Passes: 3, Failures: 0, Skips: 0
===============================================

Process finished with exit code 0

In the above example, we had first identified the web elements on the Welcome and Register
pages and performed actions on them within the page classes - WelcomePage.java and
RegisterPage.java.

Within the test class WelcomePageTest.java, we had created objects of the above mentioned
page classes to create the whole flow of the test case and also added assertions.

We had taken help of the TestNG test framework, to implement the Page Object Model within the
Selenium Webdriver test and retrieved the page headers with the message in the console - Page
heading in Welcome Page: Welcome, Login In and Page heading in Register Page:
Welcome,Register.

The result in the console shows Total tests run: 3, as there are three methods with @Test
annotations - verifyWelcomePageHeading(), moveToRegisterPage(), and
verifyRegisterPageHeading().

Finally, the message Passes: 3, and Process finished with exit code 0 was received, signifying
successful execution of the code.

This concludes our comprehensive take on the tutorial on Selenium Webdriver - Page Object
Model. We’ve started with describing a Page Object Model and walked through the benefits of a
Page Object Model, and an example illustrating how to use it along with Selenium. This equips
you with in-depth knowledge of the Page Object Model. It is wise to keep practicing what you’ve
learned and exploring others relevant to Selenium to deepen your understanding and expand your
horizons.