Design Pattern – Page Object Model (POM)

In the previous tutorials, we have learned about How to automate scenarios using Selenium WebDriver? This tutorial will help you understand the Page Object Model.

It is important to write your codes and automation scripts in a maintainable, reusable and extendable manner. These key factors will distinguish you as a Good Automation Tester!

Design Patterns in Framework defines the standard of writing code. They help you in maintaining reusability and readability. POM (Page Object Model) is one such design pattern.

In Page object model there is one to one mapping, between the Java classes and pages of the application under test. For Example: Let us consider an application which has multiple pages – login page, homepage etc. Using Page Object Model design pattern there will be multiple Java classes, one for Login Page, another for Homepage and so on.

PS: People often get confused about design patterns and frameworks. POM is a design pattern, not a framework. It is an old concept. Developers are using it for maintaining reusability and readability for a very long time.

There are two different POM design pattern which I will be discussing here.

POM 1 Style of designing classes:

In this design pattern, there will be one Java class for each page of the application under test which will behave like an object repository.

All the possible Web Elements on a page are defined in the respective Java class and are then initialized in the constructor.

For Demo purpose, let us consider a scenario on eBay site, where we have to search for a product, choose the category and click on search button. Let us capture this using POM.

Let us look in the code:

package designPatterns;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.Select;

public class EbayPOM1Style {
	
	WebElement searchBox;
	WebElement selectBox;
	Select dropDown;
	WebElement searchButton;
	WebElement result;
	
	public EbayPOM1Style(WebDriver Driver){
		searchBox = Driver.findElement(By.id("gh-ac"));
		selectBox = Driver.findElement(By.id("gh-cat"));
		
		dropDown = new Select(selectBox);
		
		searchButton = Driver.findElement(By.id("gh-btn"));
	}
	
}

In the above code, all the WebElements required on the home page of eBay are defined and are initialized in the constructor thus acting like an Object Repository.

To execute a scenario using the above example, let us create another class with the main method:

package designPatterns;

import commonLibs.CommonDriver;

public class DemoEbayPOM1Style {

	public static void main(String[] args) {
		
		CommonDriver Driver = new CommonDriver();
		
		Driver.setPageLoadTimeout(90l);
		Driver.setElementDetectionTimeout(30l);
		Driver.openBrowser("chrome", "http://ebay.in");
		
		EbayPOM1Style homePage = new EbayPOM1Style(Driver.getDriver());
		
		homePage.searchBox.sendKeys("Apple Watch");
		
		homePage.dropDown.selectByVisibleText("Watches");
		
		homePage.searchButton.click();
		
		Driver.closeBrowser();
	}

}

In the above code, calling of a scenario will be in the format:

PageName.WebElement.method();

POM 2 Style of designing classes:

In this design pattern, there will be one Java class for each page of the application under test. This Java class will have all Web Elements and all the possible method on that page.

Let us consider an application which has a login page, all the Elements like username textbox, password field, login button, different links etc. on this page will be defined first and all the methods like Login, Signup, forget password etc. will be defined.

For Demo purpose, let us consider a scenario on eBay site that we have to search for a product, choose the category and click on search button. Let us capture this using POM.

Let us look at code section:

package designPatterns;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.Select;

public class EbayPOM2Style {
	

	
	private WebElement searchBox;
	private WebElement selectBox;
	private Select dropDown;
	private WebElement searchButton;
	//private WebElement result;
	
	public EbayPOM2Style(WebDriver Driver){
		searchBox = Driver.findElement(By.id("gh-ac"));
		selectBox = Driver.findElement(By.id("gh-cat"));
		
		dropDown = new Select(selectBox);
		
		searchButton = Driver.findElement(By.id("gh-btn"));
	}
	
	public void searchProduct(String product, String category){
		
		searchBox.sendKeys(product);
		
		dropDown.selectByVisibleText(category);
		
		searchButton.click();
	}
	

}

Let us create another class with the main method to execute the code:

package designPatterns;

import commonLibs.CommonDriver;

public class DemoEbayPOM2Style {

	public static void main(String[] args) {
		CommonDriver Driver = new CommonDriver();
		
		Driver.setPageLoadTimeout(90l);
		Driver.setElementDetectionTimeout(30l);
		Driver.openBrowser("chrome", "http://ebay.in");
		
		EbayPOM2Style homePage = new EbayPOM2Style(Driver.getDriver());
		
		homePage.searchProduct("Apple Watch", "Watches");
	}

}

In the above code, calling of a scenario will be in the format:

PageName.method();

In the next tutorial, we will cover up the enhanced POM design pattern (Page Factory).

PS: For any questions, queries or comments feel free to write us at support@qatechub.com or saurabh@qatechhub.com