Recently I described a great pattern to prepare end-to-end tests. It makes future maintenance a lot easier, but it needs an additional amount of work at the beginning as well.

If you don’t remember what it is, please read my [[[[[previous blog post]]]]]]]. Today I want to show you the method to minimize the initial amount of work. When we decide to use Page Objects pattern in our test code, we should map our web application pages to classes. It is not a creative task. That’s why we can try to automate it. By the definition of Page Object, we should take HTML structure and find all significant places and create class members for them. It sounds easy, but it may raise some problems. There are few different tools to generate Page Objects. We can notice two approaches among them.

Generate Page Object for all elements on page

It is the most primary and the fastest approach. The most popular tool to do this is a Chrome extension. Then we will need to open it using the icon on Chrome toolbar.

Using this window, we can set target language (C#, Java or Robot), the name of the current page object and the name of page object class that we should transfer after performing submit action on the page. We should also take a look at the Options panel. We can customize code styling and elements that should be taken into consideration there. If we would need full control over the process of generation, we can even modify the template for result classes. This possibility is useful especially if we have a specific convention in our code base and we want to stay consistent with them.

There is one problem with that kind of generated file. It contains a lot of properties. Much more than we will use in tests. You can see a sample code generated for Google Translate main page. It is very long. I don’t place it here and only give you a link to them.

https://gist.github.com/suvroc/931b15878a332520feff477f3e4ed8ab

This amount of extra code may lead to a mess in your code and makes future maintenance harder. Therefore we should cut out properties that we wouldn’t use. It helps us to manage this code.

Tool:

https://chrome.google.com/webstore/detail/selenium-page-object-gene/epgmnmcjdhapiojbohkkemlfkegmbebb

Choose element included in Page Objects

Totally different approach to that problem is a selective generation. We can select significant elements, name them and then generate the well-suited class. We can do this using SWD PageRecorder. The interface of this tool looks much more complicated them previous one, but it also has more functions.

At first, we should start driver and address to the web page that we want to process.

Then we can navigate to Locators tab and execute Web Element Explorer. It gives us a way to select interesting element on the page.

This small tool lets us use Ctrl + Right Click on the element to show following dialog.

We can define the name for this element and add it to the list. It generates selectors automatically and saves our time.

In the end, we can go to Source Code tab, choose a method to generate page object and language. It provides ten methods to do it. If we choose one for C#, we end with the following code. Short and clear.

public class No Name
{
    // Initialize Driver in any convenient way: Constructor, shared static class etc...
    protected IWebDriver Driver { get; set; }

    protected IWebElement SourceText
    {
        get { return Driver.FindElement(By.Id (@"source") ); }
    }


    protected IWebElement TargetText
    {
        get { return Driver.FindElement(By.Id (@"result_box") ); }
    }


    protected IWebElement TranslateButton
    {
        get { return Driver.FindElement(By.Id (@"gt-submit") ); }
    }

}

We can even modify the templates. That makes this tool very powerful.

With a small work needed to select elements, we can have a fully generated well-tailored page object. I prefer this approach because I like to have control over my code.

Tool:

https://github.com/dzharii/swd-recorder

What do you think about page objects generation and how do do do it?