Page Object Model in Selenium
The Page Object Model (POM) is a design pattern widely used in test automation to enhance automated test scripts' maintainability, scalability, and reusability. It promotes a structured approach to organizing code and makes it easy to manage and update test cases as the application evolves. This article explains the Page Object Model, its benefits, and how to implement it in your test automation projects.
Table of Contents
- What is the Page Object Model (POM)?
- Why Page Object Model?
- Advantages of Page Object Model in Selenium
- Implementation of Page Object Model in Selenium
What is the Page Object Model (POM)?
Page Object Model (POM) is a design pattern used in Selenium, a popular automation testing tool, to create a structured and maintainable way of organizing and interacting with web elements in a web application. In simpler terms, it helps in representing web pages as objects in your code, making the automation script more readable, reusable, and easy to maintain. This design pattern encourages the abstraction of web pages into separate classes, where each class corresponds to a specific page of the application. These classes, known as Page Objects, encapsulate the behavior and structure of the web page, providing a clean and modular approach to interact with the elements on that page.
Let us understand this concept with the demo website example. The website's name is Swag Labs. Please go through the below URL to access the site.
https://www.saucedemo.com/
Now, when we open the above website, we get a login page and have some accepted usernames and passwords, which we use to log in to the website.
When we log in using accepted usernames and passwords, we get a home page like:
Now, if we want to do UI automation for these two pages, as per the page object model design pattern, we have to create two classes: the Login class for writing login page scripts and the Homepage class for writing homepage scripts. Before implementing this using Selenium with the help of Java, let’s discuss why we need this page object model design pattern in automation scripts.
Best-suited Automation Testing courses for you
Learn Automation Testing with these high-rated online courses
Why Page Object Model?
When we do UI automation of the above-discussed scenario with the Swaglabs website without considering the page object model, then we just have to make one class, which is the Login class, and we write all scripts in this class only. Consider this small test script where we log in to the website and print the logo text from the website's home page in the output console.
Code
package io.saucedemo;
import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import io.github.bonigarcia.wdm.WebDriverManager;
public class Login { public static void main(String args[]) { // Setup ChromeDriver using WebDriverManager WebDriverManager.chromedriver().setup();
// Create an instance of the ChromeDriver WebDriver driver = new ChromeDriver(); //Accessing the website of swaglabs driver.get("https://www.saucedemo.com/"); //Locate username field in login page WebElement username=driver.findElement(By.id("user-name")); //Filling the username field username.sendKeys("standard_user"); //Locate password field in login page WebElement password=driver.findElement(By.id("password")); //Filling the password field password.sendKeys("secret_sauce"); //Locate login button in login page WebElement login=driver.findElement(By.id("login-button")); //clicking on login button login.click(); //Redirecting to home page //Locating logo element on home page WebElement logo=driver.findElement(By.xpath("//div[@class=\"app_logo\"]")); //Printing the text of logo System.out.println(logo.getText()); }
}
Output:
SLF4J: No SLF4J providers were found.
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See https://www.slf4j.org/codes.html#noProviders for further details.
Swag Labs
When we run the above test script, it will work, and we do not face any issues since the test suite is small, but think about the scenario where we have 100 different scripts using the same page element; with any change in that element, you need to change all 100 scripts. This is time-consuming and error-prone.
The better approach is to create a separate class that would locate web elements, fill them in, and verify them. This separate class can be reused in all the scripts wherever required. In the future, if there is a change in the web element, we just have to make the change in just that separate class and not in all 10 different test scripts. This method is called the Page Object Model in Selenium. It helps make the code more readable, maintainable, and reusable.
Advantages of Page Object Model in Selenium
- Code Reusability:
Page Objects encapsulate the interactions with UI elements on a web page. Creating reusable methods within Page Objects allows you to avoid duplicating code across multiple test scripts. This promotes a modular and efficient codebase.
- Maintenance Ease:
UI structure or functionality changes are confined to the respective Page Objects. Since the UI interactions are isolated within these objects, updates or modifications can be made in a centralized manner without affecting the entire test suite. This significantly reduces maintenance efforts.
- Enhanced Readability:
Test scripts become more readable and maintainable as they focus on high-level actions rather than low-level details of interacting with UI elements. This makes it easier for team members, including non-technical stakeholders, to understand and contribute to the automation efforts.
- Improved Collaboration:
The separation of concerns between test scripts and Page Objects fosters collaboration between team members. Test automation engineers can focus on writing robust test cases, while developers or UI designers can make changes to the application without affecting the test scripts.
- Consistent Locators:
Page Objects store locators for UI elements in a centralized location. This ensures that locators are consistent across the test suite, reducing the chances of errors due to locator discrepancies. If a UI element's locator changes, it only needs to be updated in the corresponding Page Object.
- Scalability:
The modular nature of POM makes it highly scalable. As the size of the test suite grows, adding new test cases or modifying existing ones is more manageable. Each Page Object represents a specific page or component, making it easy to extend automation coverage.
- Parallel Execution Support:
POM facilitates parallel execution of test cases. Since each test case interacts with specific Page Objects, parallel execution is possible without contention for shared resources. This can significantly reduce test execution time.
- Enhanced Debugging:
If a test case fails, pinpointing the issue is easier with POM. Test scripts are cleaner, and failure details are often localized to the specific Page Object or method, making debugging more efficient.
- Cross-Browser Compatibility:
POM allows you to handle browser-specific details within the Page Objects. This makes it easier to achieve cross-browser compatibility by adjusting the implementation in a centralized manner.
- Adaptability to Changes:
As the application evolves, the Page Object Model provides a framework that adapts to changes. Whether it's a UI redesign or a functional enhancement, the impact on test scripts is minimized, ensuring that the automation suite remains robust and up-to-date.
Implementation of Page Object Model in Selenium
As discussed above, the UI automation is without the page object model approach. Take the same Swaglabs website and do UI automation using the page object model approach. Our automation script does the following steps:
- Go to the URL: https://www.saucedemo.com/
- Fill username=” standard_user” and password =” secret_sauce”
- Click on the Login button
- Redirect to the home page
- Print logo text in output from the home page
Here, we are dealing with two pages of the website that are:
- Login page
- Home page
So, accordingly, we create two-page object model classes in Selenium.
The codes of each class are mentioned below:
Login_page.java
Code:
package io.saucedemo;
import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;
public class Login_page { WebDriver driver; By username=By.id("user-name"); By password=By.id("password"); By login_button=By.id("login-button"); public Login_page(WebDriver driver) { this.driver=driver; } //set username in the textbox public void setUserName(String setUserName) { driver.findElement(username).sendKeys(setUserName); } //set password in the textbox public void setPassword(String setPassword) { driver.findElement(password).sendKeys(setPassword); } //click on login button public void onClick() { driver.findElement(login_button).click(); } public void loginToSwagLabs(String username,String password) { this.setUserName(username); this.setPassword(password); this.onClick(); }}
Home_page.java
package io.saucedemo;
import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;
public class Home_page { WebDriver driver; public Home_page(WebDriver driver) { this.driver=driver; } By logo_text=By.xpath("//div[@class=\"app_logo\"]"); //Get text from logo element public String getTextFromLogo() { return driver.findElement(logo_text).getText(); }
}
TestSwagLabs.java
package test;
import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.testng.annotations.BeforeTest;import org.testng.annotations.Test;
import io.github.bonigarcia.wdm.WebDriverManager;import io.saucedemo.Home_page;import io.saucedemo.Login_page;
public class TestSwagLabs { Login_page login_page; Home_page home_page; WebDriver driver; @BeforeTest public void setup() { // Setup ChromeDriver using WebDriverManager WebDriverManager.chromedriver().setup();
// Create an instance of the ChromeDriver driver = new ChromeDriver(); //Launching website driver.get("https://www.saucedemo.com/"); } @Test public void testHomePage() { //creating Login_page object login_page=new Login_page(driver); //login into application login_page.loginToSwagLabs("standard_user","secret_sauce"); //go to next page that is Home_page //creating Home_page object home_page=new Home_page(driver); //getting text from logo on the website String logo=home_page.getTextFromLogo(); System.out.println(logo); }
}
Output:
[RemoteTestNG] detected TestNG version 7.4.0
SLF4J: No SLF4J providers were found.
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See https://www.slf4j.org/codes.html#noProviders for further details.
Swag Labs
PASSED: testHomePage
===============================================
Default test
Tests run: 1, Failures: 0, Skips: 0
===============================================
===============================================
Default suite
Total tests run: 1, Passes: 1, Failures: 0, Skips: 0
===============================================
Conclusion
In this article, we have briefly discussed what is Page Object Model, why it is important, what the advantages are, and how to implement it in selenium. Hope you will like the article.
Keep Learning!!
Keep Sharing!!
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
