Introduction

Page Object is a popular design pattern used to represent services provided by a page (reads the rendered page you see on your screen) especially when writing test against a web page. This pattern is mainly popularised by the Selenium Browser Automation tool.

In this guide, we create a Page Object for the the Google home and search results page.

When you’re finished, you’ll be able to create effective page objects for any UI interface you encounter.

Prerequisites

Before you begin this guide you’ll need the following:

Let’s do it 💪

What are we testing?

We want to verify that the results page displays more than five links.

User journey

We need to figure out the user journey that makes up the test.

  • Goto google.com
  • Type Selenium in the searchbox
  • click the first suggestion from auto-suggest dropdown
  • Assert that more than 5 results sets are displayed on the search page.

Writing test first helps you get a clear picture of what Page Objects to build, and what apis the page object should expose.

Test Class

GoogleUITest.java

public class GoogleUITest {

  WebDriver driver = new ChromeDriver();

  @Test(description = "Google Search displays more than 5 result set")
  public void search_for_any_item_returns_more_than_5_result_set() {
    driver.get("google.com");

    GoogleHomePage homePage = new GoogleHomePage(driver);

    SearchResultPage resultPage = 
    homePage.enterSearchText("Selenium").selectFirstAutoSuggest();

    assertTrue(resultPage.getResultSetCount() > 5);
}

Now we need to:

Identify the elements we need from the HomePage

Google Homepage

google home page

From the picture above, there are multiple elements on the page, but we only need two of them

  • Searchbox
  • Auto-Suggest dropdown

Now let’s move to how we locate elements using the web console

Locate desired elements on the page

There are several ways to locate the element we desire, e.g. by looking at the codebase, using selector tools etc. Our focus for this guide is to use the browser debug console.

Let’s go:

  • Use Shortcut CMD + ALT + i to open the web console

open web console

We locate our first element - The Searchbox

  • Select the element picker

element picker

  • Point the element picker at the Searchbox, then click.

find element

  • Use the console to confirm if you got the right element node. if it works on the browser it will most likely work in Selenium.

google home page

Note down the selector name=q, because we need it to create our Page Object.

Next, we locate the second element - The Auto-suggest box

  • Type any text on the searchbox and Auto-suggest box should appear
  • Click on the element picker
  • Point the element picker at the Auto-suggest box, then click.

auto suggest

Note down the selector #searchform ul>li, because we need it to create our Page Object.

Next, we locate the third element - The The results element in the search result page

  • Type any text on the searchbox and Auto-suggest box should appear
  • Click on the first suggestion, which should transition to results page
  • Click on the element picker
  • Point the element picker at the result set box, then click.

Note down the selector class=g, because we need it to create our Page Object.

search results

Now that we have all the elements we need, Let’s build the Page Object

Build the Page Object

GoogleHomePage.java

public class GoogleHomePage {
  private static final By autoSuggest = By.cssSelector("#searchform ul>li");
  private static final By searchBox = By.name("q");
  private WebDriver driver;

  public GoogleHomePage(WebDriver driver) {
    this.driver = driver;
  }

  public GoogleHomePage enterSearchText(String text) {
    driver.findElement(searchBox).sendKeys(text);
    return this;
  }

  public SearchResultsPage selectFirstAutoSuggest(){
    //We need to wait for auto suggest to populate
    WebDriverWait wait = new WebDriverWait(
      driver, Duration.ofSeconds(10), Duration.ofMillis(100)
    );
    
    wait.until(d -> d.findElement(autoSuggest).isDisplayed());

    //Once auto-suggest loads, we can click the first item
    driver.findElement(autoSuggest).click();

    return new SearchResultsPage(driver);
  }
}

SearchResultsPage.java

public class SearchResultsPage {
  private static final By results = By.className("g");
  private WebDriver driver;

  public SearchResultsPage(WebDriver driver) {
    this.driver = driver;
  }

  public int getResultSetCount(){
    List<WebElement> resultsCount = driver.findElements(results);
    return resultsCount.size();
  }
}

What have we done so far?

  • We defined what we are testing
  • Map out the user journey
  • Found element locator values using the web console
  • Confirmed we have the correct element using the console
  • Created the page object with the correcet locators.

See all classes here for easy reference.

public class GoogleUITest {

  WebDriver driver = new ChromeDriver();

  @Test(description = "Google Search displays more than 5 result set")
  public void search_for_any_item_returns_more_than_5_result_set() {
    driver.get("google.com");

    GoogleHomePage homePage = new GoogleHomePage(driver);

    SearchResultPage resultPage = 
    homePage.enterSearchText("Selenium").selectFirstAutoSuggest();

    assertTrue(resultPage.getResultSetCount() > 5);
}
public class GoogleHomePage {
  private static final By autoSuggest = By.cssSelector("#searchform ul>li");
  private static final By searchBox = By.name("q");
  private WebDriver driver;

  public GoogleHomePage(WebDriver driver) {
    this.driver = driver;
  }

  public GoogleHomePage enterSearchText(String text) {
    driver.findElement(searchBox).sendKeys(text);
    return this;
  }

  public SearchResultsPage selectFirstAutoSuggest(){
    WebDriverWait wait = new WebDriverWait(
      driver, Duration.ofSeconds(10), Duration.ofMillis(100)
    );

    wait.until(d -> d.findElement(autoSuggest).isDisplayed());
    driver.findElement(autoSuggest).click();

    return new SearchResultsPage(driver);
  }
}
public class SearchResultsPage {
  private static final By results = By.className("g");
  private WebDriver driver;

  public SearchResultsPage(WebDriver driver) {
    this.driver = driver;
  }

  public int getResultSetCount(){
    List<WebElement> resultsCount = driver.findElements(results);
    return resultsCount.size();
  }
}

Conclusion

In this article you set up your first Page Object. Now you can run the test and put your result in the comments section.

Things to Note

In the next post in this series, we shall be applying design techniques to optimize what we have created.

Before then, feel free to write another test and use completely different elements for the user journey. I am happy to answer questions you may have, reach me on any of my handles.