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/login.php");
   }
   @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/selenium-java -->
   <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.