Page Object Model and Page Factory in Selenium

As test suites grow, maintaining test code can become challenging, especially when working with dynamic and complex web applications. This is where design patterns like the Page Object Model (POM) and Page Factory come into play in Selenium WebDriver.

This tutorial demonstrates how to use Page Object Model and Page Factory in Selenium automation projects to maintain test cases easily.

What is Page Object Model in Selenium?

Page Object Model (POM) is a design pattern in Selenium that creates an object repository to store all web elements of an application. It reduces code duplication and simplifies test case maintenance by organizing elements in separate classes.

In POM, each web page of the application is represented as a class file. These class files contain only the web elements specific to their corresponding pages, allowing testers to interact with elements and perform actions on the web application efficiently.

Advantages of Page Object Model

The Page Object Model offers several benefits that make test automation more efficient and maintainable:

• Easy Maintenance: POM is useful when there is a change in a UI element or a change in action. An example would be: a drop-down menu is changed to a radio button. In this case, POM helps to identify the page or screen to be modified. As every screen will have different Java files, this identification is necessary to make changes in the right files. This makes test cases easy to maintain and reduces errors.
• Code Reusability: As already discussed, all screens are independent. By using POM, one can use the test code for one screen, and reuse it in another test case. There is no need to rewrite code, thus saving time and effort.
• Readability and Reliability of Scripts: When all screens have independent java files, one can quickly identify actions performed on a particular screen by navigating through the java file. If a change must be made to a specific code section, it can be efficiently done without affecting other files.

Key Concepts in POM

The Page Object Model follows a structured approach that revolves around key components such as Page Classes, Locators, and Methods. Understanding these concepts is essential for building efficient and maintainable test automation frameworks.

Page Classes

Each web page in the application is represented by a separate class file in the Page Object Model. This class acts as a container for the page’s web elements and related actions. By organizing pages into distinct classes, POM keeps the test code clean and easy to maintain.

Locators in POM

Locators define how to identify web elements on a page. POM uses locators such as ID, name, XPath, CSS selectors, or other strategies to map elements in the page classes. This centralized approach makes updating locators easier when the UI changes.

Methods in POM

Methods are functions within the page classes that perform actions on the page’s elements. These methods abstract user interactions such as clicking a button, entering text, or retrieving page data. Test scripts can call these methods to perform actions, improving code readability and reusability.

Platforms like BrowserStack further streamline POM-based automation by enabling testers to execute tests on real browsers and devices without the need for complex local setups. This allows teams to focus on writing clean, maintainable code while ensuring cross-browser and cross-device compatibility at scale.

Implementing POM in Selenium Project

As already discussed, each java class will contain a corresponding page file. This tutorial will create 2-page files.

• BrowserStackHomePage
• BrowserStackSignUpPage

Each of these files will contain UI elements or Objects which are present on these screens. It will also contain the operations to be performed on these elements.

Sample Project Structure for POM

BrowserStackHomePage Java File

Explanation of Code

• Code Line-10 to 11: Identifying elements present on BrowserStack Home Page such as header and Get Started button
• Code Line-17 to 24: Performing actions on identified objects on BrowserStack Home Page

Code Snippet

package browserStackPages;
import static org.testng.Assert.assertEquals;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
public class BrowserStackHomePage {

WebDriver driver;
By Header=By.xpath("//h1");
By getStarted=By.xpath("//*[@id='signupModalButton']");

public BrowserStackHomePage(WebDriver driver) {
this.driver=driver;
}

public void veryHeader() {
String getheadertext=driver.findElement(Header).getText();
assertEquals("App & Browser Testing Made Easy", getheadertext);
}
public void clickOnGetStarted() {
driver.findElement(getStarted).click();
}
}

BrowserStackSignUpPage Java File

Explanation of Code

• Code Line-10 to 14: Identifying elements present on BrowserStack SignUp Page such as header and Get Started button
• Code Line-20 to 35: Performing actions on identified objects on the BrowserStack SignUp Page

Code Snippet

package browserStackPages;
import static org.testng.Assert.assertEquals;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;

public class BrowserStackSignUpPage {
WebDriver driver;
By Header = By.xpath("//h1");
By userName = By.xpath("//*[@id='user_full_name']");
By businessEmail = By.xpath("//*[@id='user_email_login']");
By password = By.xpath("//*[@id='user_password']");

public BrowserStackSignUpPage(WebDriver driver) {
this.driver = driver;
}

public void veryHeader() {
String getheadertext = driver.findElement(Header).getText().trim();
assertEquals("Create a FREE Account", getheadertext);
}
public void enterFullName(String arg1) {
driver.findElement(userName).sendKeys(arg1);
}
public void enterBusinessEmail(String arg1) {
driver.findElement(businessEmail).sendKeys(arg1);
}
public void enterPasswrod(String arg1) {
driver.findElement(password).sendKeys(arg1);
}
}

BrowserStackSetup Java File

Explanation of Code

• Code Line-21 to 27: Setting up browser and website to execute test scripts
• Code Line-29 to 43: Initializing driver object to BrowserStackHomePage & BrowserStackSignUpPage and performing actions on those pages

Code Snippet

package browserStackSetup;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
import browserStackPages.BrowserStackHomePage;
import browserStackPages.BrowserStackSignUpPage;

public class BrowserStackSetup {
String driverPath = "C:\\geckodriver.exe";
WebDriver driver;
BrowserStackHomePage objBrowserStackHomePage;
BrowserStackSignUpPage objBrowserStackSignUpPage;

@BeforeTest
public void setup() {
System.setProperty("webdriver.chrome.driver", "C:\\BrowserStack\\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("https://www.browserstack.com/");
}

@Test(priority = 1)
public void navigate_to_homepage_click_on_getstarted() {
objBrowserStackHomePage = new BrowserStackHomePage(driver);
objBrowserStackHomePage.veryHeader();
objBrowserStackHomePage.clickOnGetStarted();
}

@Test(priority = 2)
public void enter_userDetails() {
objBrowserStackSignUpPage = new BrowserStackSignUpPage(driver);
objBrowserStackSignUpPage.veryHeader();
objBrowserStackSignUpPage.enterFullName("TestUser");
objBrowserStackSignUpPage.enterBusinessEmail("TestUser@gmail.com");
objBrowserStackSignUpPage.enterPasswrod("TestUserPassword");
}
}

What is Page Factory in Selenium?

Page Factory is a class provided by Selenium WebDriver to support Page Object Design patterns. In Page Factory, testers use @FindBy annotation. The initElements method is used to initialize web elements.

1. @FindBy: An annotation used in Page Factory to locate and declare web elements using different locators. Below is an example of declaring an element using @FindBy

@FindBy(id="elementId") WebElement element;

Similarly, one can use @FindBy with different location strategies to find web elements and perform actions on them. Below are locators that can be used:

• ClassName
• CSS
• Name
• Xpath
• TagName
• LinkText
• PartialLinkText

2. initElements(): initElements is a static method in Page Factory class. Using the initElements method, one can initialize all the web elements located by @FindBy annotation.

3. lazy initialization: AjaxElementLocatorFactory is a lazy load concept in Page Factory. This only identifies web elements when used in any operation or activity. The timeout of a web element can be assigned to the object class with the help of the AjaxElementLocatorFactory.

Implementing Page Factory in Selenium Project

This will try to use the same project used for the POM Model. It will reuse the 2-page files and implement Page Factory.

• BrowserStackHomePage
• BrowserStackSignUpPage

As discussed earlier, each of these files will only contain UI elements or Objects present on these screens along with the operations to be performed on these elements.

Sample Project Structure for Page Factory

The project structure will not change as the same project is being used. As already mentioned, Page Factory supports Page Object Model design pattern.

BrowserStackHomePage Java File

Explanation of Code

• Code Line-13 to 17: Identifying elements present on BrowserStack Home Page such as header and Get Started button using Page Factory @FindBy annotation
• Code Line-23 to 30: Performing actions on identified objects on the BrowserStack Home Page

Code Snippet

package browserStackPages;
import static org.testng.Assert.assertEquals;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

public class BrowserStackHomePage {
WebDriver driver;
@FindBy(xpath = "//h1")
WebElement Header;
@FindBy(xpath = "//*[@id='signupModalButton']")
WebElement getStarted;

public BrowserStackHomePage(WebDriver driver) {
this.driver = driver;
PageFactory.initElements(driver, this);
}

public void veryHeader() {
String getheadertext = Header.getText();
assertEquals("App & Browser Testing Made Easy", getheadertext);
}
public void clickOnGetStarted() {
getStarted.click();
}
}

BrowserStackSignUpPage Java File

Explanation of Code

• Code Line-14 to 24: Identifying elements on BrowserStack SignUp Page, such as the header and Get Started button, using Page Factory @FindBy annotation.
• Code Line-26 to 46: Performing actions on identified objects on the BrowserStack SignUp Page

Talk to an Expert

Code Snippet

package browserStackPages;
import static org.testng.Assert.assertEquals;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

public class BrowserStackSignUpPage {
WebDriver driver;

@FindBy(xpath = "//h1")
WebElement Header;

@FindBy(xpath = "//*[@id='user_full_name']")
WebElement userName;

@FindBy(xpath = "//*[@id='user_email_login']")
WebElement businessEmail;

@FindBy(xpath = "//*[@id='user_password']")
WebElement password;

public BrowserStackSignUpPage(WebDriver driver) {
this.driver = driver;
PageFactory.initElements(driver, this);
}

public void veryHeader() {
String getheadertext = Header.getText().trim();
assertEquals("Create a FREE Account", getheadertext);
}
public void enterFullName(String arg1) {
userName.sendKeys(arg1);
}
public void enterBusinessEmail(String arg1) {
businessEmail.sendKeys(arg1);
}
public void enterPasswrod(String arg1) {
password.sendKeys(arg1);
}
}

BrowserStackSetup Java File

Explanation of Code

• Code Line-21 to 27: Setting up of browser and website to execute our scripts
• Code Line-29 to 43: Initializing driver objects to BrowserStackHomePage & BrowserStackSignUpPage and performing actions on those pages.

Code Snippet

package browserStackSetup;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
import browserStackPages.BrowserStackHomePage;
import browserStackPages.BrowserStackSignUpPage;

public class BrowserStackSetup {
String driverPath = "C:\\geckodriver.exe";
WebDriver driver;
BrowserStackHomePage objBrowserStackHomePage;
BrowserStackSignUpPage objBrowserStackSignUpPage;

@BeforeTest
public void setup() {
System.setProperty("webdriver.chrome.driver", "C:\\BrowserStack\\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("https://www.browserstack.com/");
}

@Test(priority = 1)
public void navigate_to_homepage_click_on_getstarted() {
objBrowserStackHomePage = new BrowserStackHomePage(driver);
objBrowserStackHomePage.veryHeader();
objBrowserStackHomePage.clickOnGetStarted();
}

@Test(priority = 2)
public void enter_userDetails() {
objBrowserStackSignUpPage = new BrowserStackSignUpPage(driver);
objBrowserStackSignUpPage.veryHeader();
objBrowserStackSignUpPage.enterFullName("TestUser");
objBrowserStackSignUpPage.enterBusinessEmail("TestUser@gmail.com");
objBrowserStackSignUpPage.enterPasswrod("TestUserPassword");
}
}

Test Result

Difference between Page Object Model & Page Factory in Selenium

Run the code to test the workings of the Page Object Model (POM) and Page Factory. Since these are important Selenium functions, testers need to be able to use them with ease and accuracy for Selenium automation. This will help them streamline automation testing efforts and get results quicker.

Other Design Patterns used in Selenium

Other Design Patterns used in Selenium

Design Patterns in Test Automation Framework are pivotal. There are different other design patterns that are used in Selenium such as:

1. Singleton Design Pattern
2. Fluent Page Object Model
3. Factory Design Pattern
4. Facade Design Pattern

Singleton Design Pattern: The Singleton design pattern ensures that no more than one instance of a class is created. It is often used when a single instance of an object is required to coordinate actions across the system. For example, in Selenium, the WebDriver object is typically a Singleton, as there should be only one instance of the browser for the entire test run.

Fluent Page Object Model: The Fluent Page Object Model is an extension of the Page Object Model, where methods are chained together to form a fluent interface. This makes the test code more readable and concise, as multiple actions can be performed on the page in a single line of code.

Factory Design Pattern: This is used to create instances of classes. It is often used when a single class is not enough to create the required objects, and multiple subclasses are required. This pattern provides a way to encapsulate the object creation process and makes it easier to change the object creation process without affecting the rest of the code.

Facade Design Pattern: The Facade design pattern provides a simplified interface to a complex system. It is used to make it easier to use the system by hiding its complexity behind a single interface. The Facade pattern can be used in Selenium to provide a simplified API for interacting with the browser, making it easier to write tests that are maintainable and easy to read.

Conclusion

Page Object Model (POM) and Page Factory are essential patterns for building scalable, maintainable, and efficient test automation frameworks in Selenium. By organizing web elements and actions into dedicated page classes and leveraging annotations for element initialization, these patterns simplify test code management and reduce duplication.

Incorporating platforms like BrowserStack into your testing strategy further enhances the effectiveness of POM and Page Factory by enabling seamless cross-browser and cross-device testing on real environments. Together, these approaches ensure more reliable test automation and faster release cycles for modern web applications.

Useful Resources for Selenium

• Page Object Model and Page Factory in Selenium
• What is Cypress Page Object Model?
• Page Object Model with Playwright: Tutorial
• Page Object Model in Selenium and JavaScript
• Page Object Model and Page Factory in Selenium C#
• Page Object Model and Page Factory in Selenium Python