Page Object for Single Page Applications

Page Objects are a popular design pattern for testing and quality assurance. They allow to organize tests in a clear and scalable way, modelling each page of your application with an object that provides functional methods and abstract the implementation details.

BTW, almost every library or best practice associate a Page Object  (PO) with an URL of the application, making them hard to use with a Single Page Application (SPA).

One way to organize a test of a SPA with PO is to build them with a fluent interface that link the navigation pattern to the objects.

Suppose to have a SPA and to want to test the following navigation pattern:

  • Start from the Home Page
  • Click a menu button V1_BTN to make view V1 the active one
  • Click button B1 to get the popup P
  • Insert data D in the popup

The scenario can be described by a test like this (Java Code, imports omitted):

@Test

@Test public void navigation() {
  P_PO pPO = UITestContext.getMainPO()
    .getMenuPO()
    .openV1()
    .openP();

  pPO.insertData(new D());

  Assert.assertEquals("Success", pPO.getMessage())
}

This level of abstractness can be reached using  a fluent interface between different objects. For example

class MainPO {
  // WebDriver here ...
  public MenuPO getMainPO() {
    return new MenuPO(...);
  }
}

class MenuPO {
  public V1_PO openView1() {
    // WebDriver code to click the button
    return new V1_PO(...);
  }
}

class V1_PO {
  public Popup1PO openPopup1() {
    // Code to open the popup
    return new Popup1PO(...)
  }
}

This way of organize is little bit verbose but its clean and clear structure allows an collaborator to start coding new tests as the new feature comes.

Work