Enhanced Selenium WebDriver Page Objects

One of the most popular design patterns in Web Automation is the so-called Page Object Pattern. The famous programmer Martin Fowler was one of the first that mentioned Page Object as a pattern and explained its usage. You may not be able to find it in the list of all “official” design patterns because the community started using it recently. Most of the other design patterns have been about for more than 20 years.

In general, a page object abstracts an HTML page. It provides an easy to use interface for manipulating the page elements without searching for them in the HTML.20

Selenium WebDriver Page Objects

 

In the example, the different properties represent the various elements of the pages. They are located through the help of the FindsBy attributes that are holding the finding strategy. Below them, you can find the different actions that can be performed on the page.
To use the code from the example, you need to install two NuGet packages- Selenium.WebDriver (holding the main WebDriver interfaces) and Selenium.Support (provides the page objects’ support). If you use Selenium WebDriver on a daily basis maybe, you will find useful the cheat sheet that I created.

Selenium elements

The usage in tests is straightforward. You only create an instance of the page and call some of the action methods and at the end- one of the assertions.

 

 

What Is the Problem with This Approach?

If you automate a page with lots of elements and complex logic, the code of the class can get enormous. Larger files increase the search time and decrease the readability of the page object. This is so because the class contains three different types of elements. The web page properties, the action methods and the assert methods. Usually, when you need to fix something in the page object, you need to change only one of these items.
One way to handle this problem is to separate these three types in different files. However, I want the usage of the page object to stay the same. You can use one of the features of C#- the partial classes.

Enhanced Page Objects through Partial Classes

You can read more about the partial classes and methods in the official MSDN documentation. But in general, it is possible to split the definition of a class over two or more source files. Each source file contains a section of the type or method definition, and all parts are combined when the application is compiled. Using this approach the BingMainPage class’s definition will be placed inside three different files:
• BingMainPage – contains the constructor(s) and the action methods
• BingMainPage.Map – stores all web elements’ properties
• BingMainPage.Asserter – holds all assertions

 

BingMainPage

 

BingMainPage.Map

 

BingMainPage.Asserter

The usage of the page object in tests stays the same.

Download the Source Code

 

In future articles, I will share with you other modifications of the design pattern that can make your tests even more maintainable. You can find even more articles dedicated to the design patterns in automated testing on my site- Automate The Planet.

About The Author

Anton AngelovAnton Angelov works as a Quality Assurance Architect at Progress. His focus is on automation testing and designing test harness and tools, having the best industry development practices in mind. Anton blogs on these topics and more at Automate The Planet. Anton is passionate about technologies such as C#, .NET Framework, T4, WPF, SQL Server, Selenium WebDriver and Jenkins. He was the recieptant of MVP status at Code Project (2016, 2017) and MVB (Most Valuable Blogger) at DZone. You can find more information about Anton on his site.

About the Author

Ronan Healy

Hi everyone. I'm part of the EuroSTAR team. I'm here to help you engage with the EuroSTAR Huddle Community and get the best out of your membership. Together with software testing experts, we have a range of webinars and eBooks for you to enjoy and we have lots of opportunities for you to come together online. If you have any thoughts about the community, please get in contact with me.
Find out more about @ronan