In my new series of articles “Design Patterns in Automated Testing“, I am going to present you the most useful techniques for structuring the code of your automation tests. In my examples, I am going to use Selenium WebDriver. However, the patterns are abstract structures, and they can be implemented with any similar automation framework or programming language. One of the most popular patterns in Web Automation is the so called Page Object Pattern. To understand the primary goal of the pattern, first you need to think what your web automation tests are doing. They navigate to different web pages and click/type on/in various elements. The Page Object Pattern wraps all elements, actions and validations happening on a page in one single object- Page Object. I am going to show you two ways how you can use this pattern. Through the usage of the built-in Page Objects in Selenium WebDriver and via manually created classes.

Page Object Pattern via Selenium WebDriver

UML Class Diagram

Participants

The classes and objects participating in this pattern are:

Page Object (SearchEngineMainPage)- Contains properties of all necessary web elements of the page. Also, there you can find all actions that can be performed (Search, Navigate). All validations can be placed here too.

(SearchEngineMainPage)- Contains properties of all necessary web elements of the page. Also, there you can find all actions that can be performed (Search, Navigate). All validations can be placed here too. UI Tests (SearchEngineTests) – This class contains a group of tests related to the above page; it can hold only a single instance of the page object.

Page Object Pattern C# Code

If you are not familiar with the WebDriver Framework, you can look into my article- Getting Started with WebDriver C# in 10 Minutes. To be able to use the page object pattern built-in feature of the framework, you need to install an additional NuGet Package- Selenium.Support

The automation test cases in the below examples will navigate to SearchEngine, search for “Automate The Planet” and validate the count of the returned results. In this particular case, there is a need of only two classes- SearchEngineMainPage and the test class SearchEngineTests.

There are two important things to highlight in the above example.

Just add a property with the desired name and place the above attribute with the appropriate properties- the type of the locator (Id, Class, CSS) and the value of the Locator.

Initialization of the Elements

The static method InitElements takes the responsibility to initialize all of the elements on the page the first time when the driver navigates to it.

Usage in Tests

The main pros of the Page Object Pattern are the readability and that it follows the DRY (Do not Repeat Yourself) and Single Responsibility SOLID Principles. It helps you to built an easy to maintain tests that do not use element locators directly.

UPDATE: Keep in mind that this API for creating page objects was deprecated in March 2018 with the release of 3.11.0 of WebDriver.

You can read the full statement with additional explanations on the official blog of Jim Evans here.

Page Object Pattern without Selenium WebDriver

While ago we were working on the first version of the BELLATRIX test automation framework, I did this research so that we can find the most convenient way for creating page objects.

UML Class Diagram

Participants

The classes and objects participating in this pattern are:

Page Object Element Map – Contains all element properties and their location logic.

– Contains all element properties and their location logic. Page Object Validator – Consists of the validations that will be performed on the page.

– Consists of the validations that will be performed on the page. Page Object (SearchEngineMainPage)- Holds the actions that can be performed on the page like Search and Navigate. Exposes an easy access to the Page Validator through the Validate () method. The best implementations of the pattern hide the usage of the Element Map, wrapping it through all action methods.

(SearchEngineMainPage)- Holds the actions that can be performed on the page like Search and Navigate. Exposes an easy access to the Page Validator through the () method. The best implementations of the pattern hide the usage of the wrapping it through all action methods. UI Tests (SearchEngineTests) – This class contains a group of tests related to the above page; it can hold only a single instance of the page object.

Page Object Pattern C# Code

Using this approach, we don’t need anymore the Selenium.Support NuGet.

Paste all elements of the page in a new element map class.

Paste all validation method in a separate class.

At last, put together all classes in the Main Page Object.

Usage in Tests

As you can see the usage of the second type of page object pattern structure is identical to the previous one. Regardless, I like the second solution more because it follows the SOLID Principles more strictly. The different classes used in it have a stronger Cohesion.

For more detailed overview and usage of many more design patterns and best practices in automated testing, check my book “Design Patterns for High-Quality Automated Tests, C# Edition, High-Quality Tests Attributes, and Best Practices“. You can read part of three of the chapters:

Defining High-Quality Test Attributes for Automated Tests

Benchmarking for Assessing Automated Test Components Performance

Generic Repository Design Pattern- Test Data Preparation