What is Page Object Model in Selenium?

Page Object Model, also known as POM is a design pattern in Selenium that creates an object repository for storing all web elements. It is effective to optimize code and improves test case maintenance.

In Page Object Model, consider each web page of a website as a class file. Each class file will contain only corresponding web page elements. Using these elements, testers can perform automation on the page.

Advantages of Page Object Model

• Helps with easy maintenance: POM is useful when there is a change in a UI element or there is a change in an action. An example would be if 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 the required changes in the right files. This makes test cases easy to maintain and reduces errors.
• Helps with reusing code: As already discussed, all screens are independent. By using POM, one can use the test code for any 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 easily identify actions that will be performed on a particular screen by navigating through the java file. If a change must be made to a certain section of code, it can be efficiently done without affecting other files.

Page Object Model Architecture in Selenium:

1. BasePage is used to set up all configuration for starting the test script
2. Pages are used to store all page elements and classes
3. TestCase is used to run Test Scenarios
4. Utils are used to store utility files that are used in java code while writing test scripts.

Let’s start writing code. We will automate a login page using POM

File > New > Project

Select Gradle and click on Next

Give a name of the project as Demo_2 or any name. Make sure the name does not consist of any blank space.

Check Selenium configuration here.

Creating POM Structure

When project starts, then go to src/test/java

Right click on Java and click on New > Package

Name the package name as BasePage and hit enter

In the same way, create Pages, TestCase and Utils package

Now right click on BasePage Folder and create a new class named as BasePage.class

Open BasePage.class and write following code:

package BasePage;

import org.junit.Before;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.io.IOException;

public class BasePage {
    public WebDriver driver;
    WebDriverWait wait;
    @Before
    public void setUp() throws IOException {
        System.setProperty("webdriver.chrome.driver", "./src/test/resources/chromedriver.exe");
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        wait = new WebDriverWait(driver,5);
    }
}

Now right click on Login Folder and create a new class named as Login.class

We will automate login page from this site:

http://automationpractice.com

Visit this page

Right click on this site and click on inspect element

Inspect each element and get id or name or Css Selector or xpath

Open the Login.class, get login elements and write following code:

package Pages;

import org.junit.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

public class Login {
    @FindBy(className="login")
    WebElement linkLogin;
    WebDriver driver;
    @FindBy(id="email")
    WebElement txtEmail;
    @FindBy(id="passwd")
    WebElement txtPassword;
    @FindBy(id="SubmitLogin")
    WebElement btnSubmitLogin;
    @FindBy(xpath = "//span[contains(text(),'Test User')]")
    WebElement lblUserName;

    public Login(WebDriver driver)
    {
        this.driver = driver;
        PageFactory.initElements(driver, this);
    }
    public void doLogin(String email,String password) throws InterruptedException {
        linkLogin.click();
        Thread.sleep(1000);
        txtEmail.sendKeys(email);
        txtPassword.sendKeys(password);
        Thread.sleep(1000);
        btnSubmitLogin.click();
        Thread.sleep(1000);
        Assert.assertEquals(lblUserName.getText(),"Test User");

    }
}

In below code block, PageFactory class is declared in login constructor. This is used to initialize webdriver in all pages while loads Login class.

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

Now right click on TestCase folder and add a class named TestCase.class

Open TestCase.class and write following code:

package TestCase;

import BasePage.BasePage;
import Pages.Login;
import org.junit.After;
import org.junit.Assert;
import org.junit.Test;
import org.openqa.selenium.WebDriver;

public class TestCase extends BasePage{
    Login objLogin;
    @Test
    public void doLogin() throws Exception {
        driver.get("http://automationpractice.com");
        objLogin=new Login(driver);
        objLogin.doLogin("testuser0568@test.com","P@ssword123");

    }
    @After
    public void finishTest(){
        driver.close();
    }

}

Project structure is as following:

Now add configuration is as follows:

Click Apply and Ok button

Now open the Terminal and hit this command:

gradle clean test

or Click on run icon you just configured

Your automation script will run now.

After successful running you will get notification as Test case gets passed.