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 public void navigation() {
  P_PO pPO = UITestContext.getMainPO()

  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.