In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to build a framework to test our entire web page or application. For building a framework, we might consider a design pattern for our tests. And one of the most popular test design patterns for selenium tests is Page Object Model. It is also strongly encouraged to use by Selenium’s Wiki.

Page Object Model

First, let’s briefly understand what Page Object Model (POM ) is.

POM is the most widely used design pattern by the Selenium community on which each web page (or significant ones) considered as a different class. On each of this page classes (i.e page objects), you may define the elements of that page and specific methods for that page. Each page object represents the page of the web page or application. It is a layer between the test scripts and UI and encapsulates the features of the page.

Advantages of Page Object Model 

The advantages of page object model can be listed as:

  • Easy to maintain. Once you made your design even any locator or functionality changes on the web page you know exactly where to change your code.
  • Clean and understandable code. Instead of using the same code all over your test framework, many features are defined within the page objects. Hence the lines of codes written is reduced and your code becomes easier to understand.
  • Helps you point out the UI. Since you create page classes for almost every page on your web page, it is easy to comprehend the functionality and model of your web page even at a glance on your test frameworks.
  • Better test scripts. Your test scripts will consist descriptive method names (e.g homepage.goToLoginPage()) instead of incomprehensible and hard-coded code (e.g driver.findElement(“login”)).click()).

Page Factory

Page Factory is an extension to page objects that are used to initialize the web elements that are defined on the page object. You can define the web elements by using annotation with the help of page factory.

Important Note: From 3.11 version of Selenium C# Bindings, Page Factory is deprecated!

If you would like to learn more about POM, I suggest you might read Martin Fowler’s article about it.

How to Implement Page Object Model in C#

Let’s start by creating a new project in Visual Studio. I am using Visual Studio 2017 Community Edition which can download here.

And name our project.

Before writing our test cases, let’s create our page objects. In this tutorial, I am going to model For the sake of a decent design, let’s create a folder and call it “PageObjects”. We will add page object classes in this folder.

To do that, right-click on the project name (‘POMExample’ in this tutorial), hover on add and click on “New Folder”.

Name it as “PageObjects”.

Now we can add the page object classes inside the folder. In this tutorial, we will cover the home,  about and search result pages. So lets add three classes and name them as “Homepage”, “AboutPage”, “ResultPage” respectively. We are going to model the home page, about and the page that searches are enlisted.

After you add the classes you will have:

It is time to fill inside our page objects. Let’s start with ‘HomePage’ first.

Click on ‘HomePage.cs’ and your homepage class should look exactly like below:

Let’s understand step by step what our ‘Homepage.cs’ does.

This is our constructor. Each page should use the driver on the test class, therefore, this classes driver equals to the driver passed from the test class. PageFactory.InitElements() is used to [FindsBy] annotation to work.

Here, with the help of Page Factory [FindsBy] annotation finds the web elements on the homepage.

And finally, we define the functionalities of our homepage. Please note that a page object method may return another page object as shown above.

Please copy the ‘AboutPage.cs’ and ‘ResultPage.cs’ respectively.

We have created our page objects. Now it is time to write our test case(s) by using the page objects.

“Class1.cs” will be our test class so let’s rename it as “TestClass.cs” or you can name it as you wish.

And click “Yes” when asked to change the class name too.

Let’s take a closer look at our test method to understand how we use page object on the test case.

First, we create an instance of the page object so we can call the method from there. Since goToAboutPage() returns AboutPage, we may create the instance of that page object as shown above.

Let’s imagine how we would write this test case without using POM.

How the quality of code changed can be observed easily. If we use these elements on different tests, we have to find them over and over again in each test which will be a huge burden. So implementing POM within your automation frameworks will provide you many advantages.

GitHub Page of the Project

Selenium Webdriver Tutorial Series