What is Page Object Model In Selenium

 

Selenium is a popular open source test automation tool, to test web applications. Lately it has been started viewing as an api to automate the browser, than a complete tool for automation. It doesn’t have any inherent feature to manage the ever changing object information of the web application, which happens with almost with every build release. So we need to understand to create our tests using a structure which helps us in managing object information outside the actual test script.

 

Anatomy of a Page

A web page in the application is created using the HTML elements. Every HTML element has a HTML Tag, and a set of properties with which value are associated. Also a web page has a business function which it is fulfilling. Let us represent it –

 

Example scenario

Let us take an example of the My Accounts Page from our web application –

As you see in the above image, the snap shot of the My Account Page, we can derive the following information from it.

Business Function of the Page

The purpose of the page is to –

  1. Allow a valid user to login and access his or her account
  2. Not allow an invalid user to login
  3. Allow a new user to register themselves

Objects on the Page

To achieve the above mentioned business functions, the objects which we need to handle are –

  1. Email Address – Text Box
  2. Password – Text Box
  3. Sign in – Button
  4. Continue – Button
  5. My Account – Link

The purpose of the page object model is to separate the function of the page from the objects required to achieve that function on the page.

Implementation of Page Object Model

Once we have understood , how we look at the page now, to implement this we will be needing two classes in Java, one would be the PageObjectModel class, and the other the CallingClass

PageObjectModel Class

In the Page Object model class, we will first define the locator objects for all the objects available to us on the page, and then around each of them we build wrapper function as per the action which will be performed on them. If required, we can create a main function to call all these sub functions, which become the function of the page itself.

In the code below we have implemented the page object model for the login page –


public class Login_Pom {

private WebDriver driver;

//Constructor of the class

public Login_Pom(WebDriver driver) {

this.driver = driver;

}

 

// The login page contains several HTML elements that will be represented as WebElements.

// The locators for these elements should only be defined once.

By myaccount = By.linkText("My Account");

By usernameLocator = By.name("email_address");

By passwordLocator = By.name("password");

By loginButtonLocator = By.id("tdb5");

 

// This will click on the MyAccount link

public Login_Pom clickMyAccount() {

driver.findElement(myaccount).click();

// Return the current page object as this action doesn't navigate to a page represented by another PageObject

return this;

}

 

 

// The login page allows the user to type their username into the username field

public Login_Pom typeUsername(String username) {

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

return this;

}

 

// The login page allows the user to type their password into the password field

public Login_Pom typePassword(String password) {

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

driver.findElement(passwordLocator).sendKeys(Keys.ESCAPE);

return this;

}

 

// The login page allows the user to submit the login form

public Login_Pom submitLogin() {

driver.findElement(loginButtonLocator).submit();

return this;

}

 

public boolean validateLogin(String srchTxt) {

if (driver.getPageSource().contains(srchTxt)){

return true;

}else{

return false;

}

}

 

// Conceptually, the login page offers the user the service of being able to "log into"

// the application using a user name and password.

 

public Login_Pom loginAs(String username, String password) {

// The PageObject methods that enter username, password & submit login have already defined and should not be repeated here.

typeUsername(username);

typePassword(password);

return submitLogin();

}

}

 

Now let us have a look at the Calling Class


public class useLogin {

private WebDriver driver;

private String baseUrl;

// private boolean acceptNextAlert = true;

//  private StringBuffer verificationErrors = new StringBuffer();

 

@Before

public void setUp() throws Exception {

System.setProperty("webdriver.gecko.driver","D:BUSINESS5 ELEMENTS LEARNINGSELENIUM WEBDRIVERDRIVERgeckonewgeckodriver.exe");

driver = new FirefoxDriver();

baseUrl = "http://www.5elementslearning.com";

driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

}

 

@Test

public void test() throws Exception{

//file read functions while loop starts

driver.get(baseUrl + "/demosite/");

Login_Pom login = new Login_Pom(driver);

Logout_Pom logout = new Logout_Pom(driver);

login.clickMyAccount();

Thread.sleep(3000);

//the position of the array in which the username and pwd is stored

login.loginAs("user@user.com", "USER123");

Thread.sleep(3000);

login.validateLogin("My Account Information");

logout.logOff();

//while loop ends

}

 

@After

public void cleanup(){

driver.quit();

}

}

 

So as you can see in the above code, we have created a class, which is taking care of the page object model of the login page, and as and when we need the functions of this page, we can call them in another class.

So in the above diagram, we can see that we created two business scenarios login logout and buy product, and how these scenarios were able to call and re use the page object models of the different pages in our application. We generally create page object model of the pages which are used or visited most frequently in the test scenarios.

Advantages of the Page Object Model Approach

The main advantage which we get by implementing this is the advantage of ‘Modularity’. We are no longer writing the steps for login and logout for every test case scenario, thus exposing our scripts to the dangers of vast change if in case the ui changes. Instead we have now created a class for login, where the page objects are managed, and down the line, if the UI of the login page will change, only one class will be impacted.

Hope you liked reading the article, please do provide your comments, and share it with your friends.