PageObjects and how to make functional tests fun!

Writing and maintaining automated functional tests for web applications has always been a very complicated issue for us. We are usually between using Selenium or Canoo WebTest but regardless of the choice we seemed to always have to spend a lot of time fixing broken funcional tests and having trouble running them on continuous integration tools such as Cruise Control. Plus writing the tests itself was usually a very dull activity with all those xpaths and problems with Ajax calls, timers, etc.

Selenium offers a nice record-and-play feature but this didn't prove to be interesting either. The resulting test code is not very readable/maintainable and having to constantly re-record each test case and then re-tune it directly in the code was not very appealing either.

Nevertheless, we initially decided to create helper classes that would encapsulate the selenium or webtest calls such as click or type to more meaningful names like loginAs. This proved to be useful but still maintaining such tests was very time-consuming given that we had always to track down the failures and which methods in the helpers should be fixed.
At the same time, these helper classes would grow and become a mess as well as including many different levels of abstraction, for example, having methods like clickOnEditButton, which would just simulate a click, and createNewDocument, which would perform all the necessary actions to create a new document in our system. We finally found our way when we learned about the PageObjects pattern.

It consists of basically creating a class for each page on the system. Interactions with the page become methods in the class. If such interaction directs the user to a different page, like clicking on a link, the method returns a new object of the next correspondent page. The constructor of each page object class can also verify if the current page is indeed the one being created.

With this simple pattern we could change this:

Before

    helper.loginAsAdmin();
    selenium.clickAndWait("spacelink-" + helper.getSpaceKey());

    helper.createNewDocumentPage(helper.createPageName());
    helper.submit();

    assertEquals("test document content", selenium.getText("//div[@class='wiki-content']");

into this:

After using PageObjects

  @Test
  public void approveDocument() {
    CreateNewDocumentPage createDocPage = new LoginPage(helper)
        .loginAsAdmin()
        .goToUserSpace()
        .goToCreateNewDocumentPage();

    createDocPage.enterTitle("test document").
    createDocPage.enterContent("test document content");

    ViewDocumentPage viewDocPage = createDocPage.submit();
    assertEquals("test document content", viewDocPage.getContent());
  }

The improvement is clear!!!
The tests maintainability is much better since after changing some piece of code the developers know exactly which action in which page should be updated.
More than that, all the sudden writing functional tests went from a dull activity to something that is actually fun!

Page objects ftw!

	February 2010
Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28

PageObjects and how to make functional tests fun!

Labels

Comments (3)

Aleksandr Zuikov says:

Ürgo Ringo says:

Igor Malinin says: