Matryoshka dolls by Fanghong — source Wikimedia

User interface testing, in general is hard, those why we use among others page object pattern. Still, the way we define those page objects matter, any changes in UI, quite often have consequences in page object itself. One of technique that helps here is splitting one page into page objects fragments — as extra: it will help with integration testing.

There are many available implementations of page object pattern — the idea from the article might work with most of them. Today we will work with ember-cli-page-object implementation for the Ember.js framework with Mocha and Chai as the testing platform.

Components architecture help us to be more `smart` with our tests.

Acceptance test for Mail Log page

We will focus on two features on our page: adding new log and edit the existing one. In both situations we would be working on the same form, still when in edit two forms would be visible on the page, so we need to deal with that.

One thing worth to notice is the readability of the acceptance tests. And page object plays an important role here. We are also using async and await (new stuff from ES2017). Just have a look how readable is the source code:

(For the brevity, I’ve to skip mirage and authentication part)

Create Page Objects within Page Object

The acceptance test looks amazing, and I know you like it :-) — declarative, straightforward. So now let’s look at the definition. We are working with three different page objects: MaiLog page, Row of the table and Form .

Kind of page objects we have

Looking at the source (below), we can see that we define constructor - the formObject function that return page object with passed scope. Thanks that we can define formNew on MailLog , together with defining formEdit on Row . In the end, our main page object is pretty neat. Have a look.

Summary

Nesting page objects are pretty convenient technique, I highly recommend it for acceptance and integration testing. There is also composability approach described by Davin Weaver you can look on.

There is one caution — do not over engineer your tests, keep it quite simple.