Page Object Model Application Using Selenium WebDriver 2.0

In the world of test automation, Selenium RC and WebDriver are the de facto web UI automation tools for testers. These tools are open source and available for free to use. And many QA engineers aspire to create their private keyword and data driven test suites using these tools. In this post, we’ll present a step by step tutorial on the page object model which is a standard design pattern solving real-time problems.

Nowadays, the page object model is a new test automation buzz word. It was brought to address the multiple bottlenecks that exist in the old tools. Let’s now move to know more about the page object model.

Page Object Model Application Using Selenium WebDriver 2.0.

1- Introduction to Page Object Model.

1.1- Why Page Object Model?

There have been several problems with the traditional automation methods (as referred above).

1- Most common is the script maintenance which gets tougher with time as the test suite grows.
2- Next, when some locator changes, we need to go over the whole source code to adjust locators.
3- Another problem is the duplicate code which emanates from the repeated functionality.
4- The latter also leads to the duplicity of locators which makes the test code inefficient.
5- Finally, the unnecessary code increases the cost of maintenance for the entire project.

As said in the beginning, the Page Object Model is a design pattern that addresses all of the above issues. It allows easy test case maintenance and reduces duplicate code. It is becoming the most widely used UI automation concept across Selenium community.

Another aspect of using Page Object Model is that the big IT companies are asking questions on it during testing job interviews. So we would suggest to all budding test engineers that they should first read this tutorial. And then refer our one of the most popular post on Selenium Interview Questions and Answers.

In case you plan to prepare for a Selenium on-line skill test, then first try the Selenium WebDriver Quiz on our site to gain confidence. Both these posts receive interest from hundred of visitors on daily basis. In today’s post, we’ll help you learning the page object model with a full-blown example.

Implement Page Object Model using Selenium WebDriver.

Implement Page Object Model using Selenium WebDriver.

1.2- What is Page Object Model (POM)?

1- Page Object Model is a design pattern to define container classes for web elements that behave as object repositories.
2- In this model, each page has its private page object class to access UI locators.
3- The Page class maps all elements of the corresponding web page as its private members. Also, it defines public methods to manage operations on these objects.
4- To increase readability – it allows the method name to set as per the task they are performing. For example, we can use a method name like waitForLoginSuccess() which waits until it gets a success message for the login operation.

1.3- Advantages of Page Object Model.

1- You can segregate the UI operations from functional flows. This makes the code clean and easy to manage.
2- It lets the test cases to be written independently of the object repository. So the same object repository can be re-used for a different purpose. For example, you can use the POM-based repository for functional testing with TestNG/JUnit and for acceptance testing with JBehave/Cucumber.
3- Here, we have reusable page methods in the POM classes so that you can focus on the code optimization.
4- You can use more sensible method names which can be easily mapped to the UI actions. For example, if you click the login button and moves to the dashboard page. Then you can give the method name as ‘gotoDashboard()’.

2- How to Implement Page Object Model?

2.1- The Use Case for the Page Object Model Application.

We’ll give you a live example of a page object model class to automate the test cases. Following is a brief summary of the use case.

1- For the demo, we’ll use a test site which is openly available for selenium testing. The demo site URL is http://book.theautomatedtester.co.uk.
2- The above URL has a landing home page which lists the links for chapters ranging from 1 to 8.
3- By clicking the chapter links, you can navigate to other pages.
4- In this demo, we’ll automate a basic function workflow.
7- We’ll be using the homepage and chapter 1-2 links to create the page objects and the test case class files.

2.2- Steps for Building the Page Object Model Application.

1- In the first step, we’ll create java files for the corresponding pages to hold element locators and their methods.

1.1- HomePage.java
1.2- ChapterFirstPage.java
1.3- ChapterSecondPage.java

2- Secondly, we’ll define a base test case class to define our test case scenario.

2.1- TestBase.java

3- Finally, we’ll prepare a test case class to implement the basic workflow. This class will import the base test class and extend its functionality.

3.1- MyTest.java

3- Page Object Model – A Step by Step Example.

3.1- STEP-(1).

SUB STEP-(1.1).

SUB STEP-(1.2).

SUB STEP-(1.3).

From the above code snippets, you can easily understand that element locators are declared using @FindBy annotation. And corresponding methods are also defined to separate them from each other.
PageFactory class is used to create run-time object of page classes like:

Another important point here is that whenever any page object method results into a new page navigation, then it should return the object of the new page class. For example, when we click the <Index> link available on the <Chapter2> page, the corresponding method i.e. <clickIndex()> should return <HomePage> object.

Similarly in an another example, when you click on <clickbut2()> then the same page object will return.

 

3.2- STEP-(2).

After creating the desired page object files, we’ll create the base class of the test scripts. Here, you can place the common functions related to the test cases. We’ve named this file as <TestBase.java>.

 

3.3- STEP-(3).

In the last step, we’ll learn to prepare the test script by importing the TestBase class created in the previous step. Next, you’ll have to call the corresponding methods of the page objects as would be needed to automate the basic test case workflow. Test script’s code is chipped in below that you can save as the <MyTest.java> file.

Footnote.

Hello, dear readers, we hope the above explanation of Page Object Model would have given you a fair idea about the topic. And now you should be able to use it in your working environments.

You must know that this is not an end to the knowledge and application of Selenium technology. There is much more to read and understand for each one of us. So, we’ll keep coming up with the new things and concepts in the time to come.

Before we leave you here, we request you to share your feedback in the comment section. You can also support us by distributing this post in your friend circle and spread the awareness about the Page Object Model.

 

All the Best,

TechBeamers.

10 Comments

  1. Yogiraj Reply
  2. Yogiraj Reply
  3. Lorraine Misra Reply
    • Yogiraj Reply
  4. Vicky Reply

Leave a Reply


*