Learning Selenium – part 3

puzzleIn my last post, we learnt how to start using Junit. As I promised, this post will cover something about the Page Objects Pattern.

The Page Object Pattern is a pattern to represent your web app actions and elements.
You will refer to elements on the page and the actions you can do with them. For example, in a login page, you can fill username, fill password, click login button or click ‘I forgot my password’ link.
This actions lead you to a ‘successful login’ state, to a ‘invalid login’ state, or to ‘password reset’ state. You will drive all states on your test logic layer. In my other post ‘modularization of tests codes‘, I explained how to design a three layer structure. The page object is the code on the second layer, that I called ‘feature logical business’.
Using the google page from last posts, we can design a page object with these elements:

– element search text field – html identification: id=gbqfq
– element Google search button – html identification: id=gbqfba
– element I’m feeling lucky button – html identification: id=gbqfbb

These are the basic elements to do a search on google. But when you start typing, the interface changes, and suggestions appear on screen. And we lose some elements and get other ones.

– element magnifying glass button – html identification: id=gbqfb
– menu with Web, Images, Books, Shopping, etc links to specific results.

A menu appears and we can use it to change the type of the results of our query. These elements don’t have a specific id or name to identify them. But, you can identify these elements by their labels.
You have many ways to identify your elements. By Id, name, class, labels, xpath, etc. I will discuss this on another post. The goal here is the page objects pattern …

So, back to my page object, we have some elements on my page, and the interface changes when we interact with it. A page object represents a state of a page, or a feature on a page. We have to know what we want to do to create the page objects. In this example, we can search an image of a banana, or just click on “I’m feeling lucky button”.

Returning to the code from last posts, we have to identify the elements and actions. The element was identified above. For the actions, we have the “type and click to search” and “wait until title contains…”

In my page object class, I will have the elements and two methods for these actions. This is my class:

public class GooglePage {

    @FindBy(id = "gbqfq")
    private WebElement searchField;
    @FindBy(name = "gbqfb")
    private WebElement magnifyingGlassButton;

    String url = "http://www.google.com";

    public void typeAndClickSearch(String searchText) {

    public void waitUntilTitleContains(WebDriver driver, String titleExpected) {
        WebDriverWait wait = new WebDriverWait(driver, 20);

    public String getUrl() {
        return url;

Notice that I created the method for validation of the title of page on the page object class. This will allow me to reuse this part of code when I need.
I can use the google search page, passing what I want to search to the method ‘typeAndClickSearch”. This is not the test. it’s just a behavior from the google search page.
I have to create a test class, using the page object and driving my flow to a succesful search and validate a specific result. In other class, we will use a concept, from selenium developers, called Page Factory.
The page factory has the responsibility to load my page object and identify all elements on the url provided. It is important to know that the browser must be already opened and the web page loaded.

public class GoogleSearchTest {

    WebDriver driver;
    GooglePage page;

    public void setUp() {
        driver = new FirefoxDriver();
        page = PageFactory.initElements(driver, GooglePage.class);


    public void shouldTypeInGoogleQuery() {
        String myQuery = "automation";
        String expectedString = "Wikipedia, the free encyclopedia";

        page.waitUntilTitleContains(driver, myQuery);


    public void tearDown() {

This code open my browser, go to url and load my page objects with elements. The test method type the String for query and wait until the page title becomes what I expect. Then, it asserts if an specific message exists on the page source. The lines highlighted contains these steps.

The execution and results are the same from last post. But, you can identify the real gain in this approach?

You have this one test scenario, in part 2 of this training:

Google search test scenario #1
– Open google search page;
– search for ‘automation’;
– validate if in the results there an occurrence of “Wikipedia”.

But, what happens if you have this other scenario?

Bing search test scenario #2
– Open bing search page;
– search for ‘automation’;
– validate if in the results there an occurrence of “Wikipedia”.

Did you see if you change the page for the search, you have to rewrite almost all of your code? With the page object pattern, you can write just another page object to identify elements and to define actions.

But I’m talking about two different web search tools. Imagine what you can do when you have in your application, a pattern in development of pages. You can reuse almost everything.

In this example, we can switch from one to other just changing the page object class.

And, what you do if you get this other test scenario?

Search test scenario #3
– Open google search page;
– search for ‘selenium’;
– validate if in the results there an occurrence of “Selenium – Web Browser Automation”.
– Open bing search page;
– search for ‘selenium’;
– validate if in the results there an occurrence of “Selenium – Web Browser Automation”.
– Open google search page;
– search for ‘automation’;
– validate if in the results there an occurrence of “Wikipedia”.
– Open bing search page;
– search for ‘automation’;
– validate if in the results there an occurrence of “Wikipedia”.

Ok, the two pages and two different search queries and results… How much pages and test classes you guess you need?

In part 4 of this training, I will tell how to do all this in a simple way…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s