Test Automation Design Patterns - Page Object Model (POM)

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design.

It is a description or template for how to solve a problem that can be used in many different situations.

Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

List of Design Patterns are:-

Ø Page Object

Ø Page Factory

Ø Singleton

Ø Four Phase Test

Ø Builder

Ø Factory

Ø Abstract Factory

Page Object Model using Selenium Web driver

Page Object Model (POM) is just a design pattern, not a framework.

What is Page Object Model (POM)?

· Page Object Model is a design pattern to create Object Repository for web UI elements.

· Under this model, for each web page in the application, there should be corresponding page class.

· This Page class will find the WebElements of that web page and also contains Page methods which perform operations on those WebElements.

· It is design pattern in which it will help you to maintain the code and code duplication, which is a crucial thing in Test automation.

· You can store all locators and respective methods in the separate class and Call them from the test in which you have to use. So the benefit from this will be if any changes in Page happens then you don’t have to modify the test simply modify the respective page and that’s all.

· You can create a layer between your test script and application page, which you have to automate.

“Please don’t get confused if you are using Object repository concept then do not use Page Object model because both will serve the same purpose.”

Why Page Object Model (POM)?

Starting an UI Automation in Selenium WebDriver is NOT a tough task. You just need to find elements, perform operations on it.

Consider this simple script to login into a website

As you can observe, all we are doing is finding elements and filling values for those elements.

This is a small script. Script maintenance looks easy. But with time test suite will grow. As you add more and more lines to your code, things become tough.

The chief problem with script maintenance is that if 10 different scripts are using the same page element, with any change in that element, you need to change all 10 scripts. This is time consuming and error prone.

A better approach to script maintenance is to create a separate class file which would find web elements, fill them or verify them. This class can be reused in all the scripts using that element. In future, if there is a change in the web element, we need to make the change in just 1 class file and not 10 different scripts.

This approach is called Page Object Model(POM). It helps make the code more readable, maintainable, and reusable.

Implementation of Page Object Model (POM) using Selenium Webdriver

If you want to implement Page Object Model then you have two choices and you can use any of it.

1. Page Object Model without PageFactory.

Let’s take very basic scenario which you can relate to any application. Consider you have login page where username, password, and login button is present.

I will create a separate Login Page, will store three locators, and will create methods to access them.

Now I want to design test case so I can use the Login class, which I created and can call the methods accordingly.

This Login class will be used by all the scripts, which you will create in future so if any changes happened then you have to update only Login Class not all the test cases. This sounds good right.

Program for Page Object Model using Selenium Webdriver without Page factory: -

package com.wordpress.Pages;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.support.CacheLookup;

import org.openqa.selenium.support.FindBy;

import org.openqa.selenium.support.How;

* This class will store all the locator and methods of login page

public class LoginPage

{

WebDriver driver;

By username=By.id("user_login");

By password=By.xpath(".//*[@id='user_pass']");

By loginButton=By.name("wp-submit");

public LoginPage(WebDriver driver)

{

this.driver=driver;

}

public void loginToWordpress(String userid,String pass)

{

driver.findElement(username).sendKeys(userid);

driver.findElement(password).sendKeys(pass);

driver.findElement(loginButton).click();

}

public void typeUserName(String uid)

{

driver.findElement(username).sendKeys(uid);

}

public void typePassword(String pass)

{

driver.findElement(password).sendKeys(pass);

}

public void clickOnLoginButton()

{

driver.findElement(loginButton).click();

}

TestCase using Page Object Model using Selenium Webdriver: -

package com.wordpress.Testcases;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.firefox.FirefoxDriver;

import org.testng.annotations.Test;

import com.wordpress.Pages.LoginPage;

public class VerifyWordpressLogin

{

@Test

public void verifyValidLogin()

{

WebDriver driver=new FirefoxDriver();

driver.manage().window().maximize();

driver.get("http://demosite.center/wordpress/wp-login.php");

LoginPage login=new LoginPage(driver);

driver.quit();

}

2. Page Object Model with PageFactory.

Personally, I am a big fan of Page Factory, which comes with Cache Lookup feature, which allows me to store frequently used locators in catch so that performance will be faster.

Page Object Model using Selenium Webdriver with Page Factory

Selenium has built in class called PageFactory, which they mainly created for Page Object purpose, which allows you to store elements in cache lookup.

The only difference, which you will get without PageFactory and with PageFactory, is just initElement statement.Let us check the code and will see what changes required for with PageFactory Approach.

What is Page Factory?

Page Factory is an inbuilt Page Object Model concept for Selenium WebDriver but it is very optimized.

Here as well, we follow the concept of separation of Page Object Repository and Test Methods. Additionally, with the help of PageFactory class, we use annotations @FindBy to find WebElement. We use initElements method to initialize web elements

@FindBy can accept tagName, partialLinkText, name, linkText, id, css, className, xpath as attributes.

Code for Page Object Model Using Selenium Webdriver using Page Factory: -

package com.wordpress.Pages;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.support.CacheLookup;

import org.openqa.selenium.support.FindBy;

import org.openqa.selenium.support.How;

public class LoginPageNew

{

WebDriver driver;

public LoginPageNew(WebDriver ldriver)

{

this.driver=ldriver;

}

@FindBy(id="user_login")

@CacheLookup

WebElement username;

@FindBy(how=How.ID,using="user_pass")

@CacheLookup

WebElement password;

@FindBy(how=How.XPATH,using=".//*[@id='wp-submit']")

@CacheLookup

WebElement submit_button;

@FindBy(how=How.LINK_TEXT,using="Lost your password?")

@CacheLookup

WebElement forget_password_link;

public void login_wordpress(String uid,String pass)

{

username.sendKeys(uid);

password.sendKeys(pass);

submit_button.click();

}

Test Case using Page Factory

package com.wordpress.Testcases;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.support.PageFactory;

import org.testng.annotations.Test;

import com.wordpress.Pages.LoginPage;

import com.wordpress.Pages.LoginPageNew;

import Helper.BrowserFactory;

public class VerifyValidLogin

{

@Test

public void checkValidUser()

{

// This will launch browser and specific url

WebDriver driver=BrowserFactory.startBrowser("firefox", "http://demosite.center/wordpress/wp-login.php");

// Created Page Object using Page Factory

LoginPageNew login_page=PageFactory.initElements(driver, LoginPageNew.class);

// Call the method

login_page.login_wordpress("admin", "demo123");

}

Credits: Learn-Automation, Guru99, Wiki

Search This Blog

AUTOTECHX