Page Object Design Pattern with Selenium PageFactory in Cucumber

The following tutorial is the next step in Selenium Cucumber Framework series. In this chapter, we will learn more about Page Object Model Framework which is also known as Page Object Design Pattern or Page Objects. The main advantage of Page Object Model is that if the UI or any HTML object changes for any page, the test does not need any fix. Only the code within the page objects will be impacted but it does not have any impact to the test.

 

Page Object Design Pattern

Till now we have just one test and one step file of cucumber. Can you image the line the of code we will have in our project when we will deal with 100+ tests and that will have multiple stepDefiniions files. The whole project code will become unmanageable and unmaintainable. To better manage the code and to improve the re-usability, this pattern suggests us to divided an application in different pages or a single page into sub pages. So far we were writing code with no actual structure, focusing only on elements and sending commands to Selenium driver.

Hence, the Page Object Pattern technique provides a solution for working with multiple web pages and prevents unwanted code duplication and enables an uncomplicated solution for code maintenance. In general, every page in our application will be represented by a unique class of its own and the page element inspection will be implemented in every class.

 

How to implement the Page Object Model?

There are two different ways of implementing POM:

1) Regular Java classes: Please visit Page Object Model.

Note: This is not recommended, as Selenium has offer us a better solution for this, which is Selenium PageFactory.

2) Selenium PageFactory : Page Factory is an inbuilt Page Object Model concept for Selenium WebDriver and it is very optimized. To learn more on Page Factory, please visit our tutorial Page Object Pattern using Selenium PageFactory.

PageFactory is used to Initialize Elements of a Page class without having to use ‘FindElement‘ or ‘FindElements‘. Annotations can be used to supply descriptive names of target objects to improve code readability.

 

@FindBy Annotation

As the name suggest, it helps to find the elements in the page using By strategy. @FindBy can accept TagName, PartialLinkText, Name, LinkText, Id, Css, ClassName, XPath as attributes. An alternative mechanism for locating the element or a list of elements. This allows users to quickly and easily create PageObjects.

@FindBy(how = How.CSS, using = “.username“)]
private WebElement userName;

The above code will create a PageObject and name it as UserName by finding it using its CSS locator.

 

InitElements

This Instantiate an Instance of the given class. This method will attempt to instantiate the class given to it, preferably using a constructor that takes a WebDriver instance as its only argument or falling back on a no-arg constructor. An exception will be thrown if the class cannot be instantiated.

PageFactory.initElements(WebDriver, PageObject.Class);
Parameters:

• WebDriver – The driver that will be used to look up the elements
• PageObjects – A class which will be initialised

Returns: An instantiated instance of the class with WebElement and List<WebElement> fields proxied

PageFactory NameSpace

PageFactory functionality resides in import org.openqa.selenium.support.PageFactory;

Page Object Design Pattern with Selenium PageFactory in Cucumber

In the last chapter of Convert Selenium Test in to Cucumber, we chose one End 2 End test Case to automate. Let’s see how Page Object Design Pattern with Selenium PageFactory in Cucumber works in real world.

If I asked you to divide our test page objects into different pages, what would be your solution. Let see how I divided the same:

• Home Page
• Product Listing Page
• Cart Page
• Checkout Page
• Confirmation Page

Our test pass through these above pages, so it makes sense to divide the application into these pages. Maybe later you further like to break down the Checkout Page into sub-pages like:

• Personal Details Page
• Shipping Details Page
• Payment Details Page

But so far we do not this much of code that our checkout page class would look complicated. Let’s just stick with the 5 pages for now.

 

Create Checkout Page Object Class

1. Create a New Package file and name it as pageObjects, by right click on the src/main/java and select New >> Package. As page objects are the part of the framework, we keep all the page objects in src/main/java folder.

2. Create a New Class file and name it as the actual page from the test object, by right click on the above-created Package and select New >> Class. In our case it is CheckoutPage.

CheckoutPage.class

Code Explanation

1) Constructor

As mentioned above, to initiate page object factory the code is :

CheckoutPage checkoutPage = new CheckoutPage();
PageFactory.initElements(driver, checkoutPage );

But the duty of the Framework is to minimize the code where ever it can. Let say if the application has ten pages to automate. To do the task, it is required to create the object of ten pages first and then initialize ten pages to use their objects. This will make the test very lengthy and filthy. It is a good idea to abstract this task from the test. By placing the Init statement in the Page Class Constructor, half of the code from the test can be reduced.

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

 

2) Binding Methods

The other way to Optimizing Page Object Model or improving the test code is to wrap re-usable actions in the PageObject class itself. Now think of the reusable function in the example, that we have used in this Selenium Cucumber Framework series. The answer is entering personal details. The code for entering personal details will be called again and again in every test script. Isn’t a nice idea to wrap that action into a function and use it as many time as required.

Doing this is not a difficult task, as above we already initialized the elements of the page within the class constructor. Now the elements are ready to use in the PageObject class itself.

 

Create other Page Objects for the test

Now likewise create all the page objects for other pages as well.

HomePage.java

 

ProductListingPage.java

 

CartPage.java

 

 

Usage of Page Objects in Step Definition file of Cucumber

I hope it is easy to understand and does not require any explanation. We just brought page object concept in to the step definition file and called their methods.

 

Improve Code Re-Usability of Step Definition File

If you notice that in the step file, we created Checkout Page object almost four different times for four different methods. This is because the scope of Local Variable in Java is limited to its method only. To improve that, it is better to create Class Variables like

 

With that your Step Definition file will look this now:

Steps.java

 

Project Explorer