Slimming down your ember-cli-page-object components with a custom `component` helper

Every Ember developer who takes acceptance testing seriously surely knows the brilliant ember-cli-page-object addon. It’s a must-have tool to improve readability and maintainability of your tests.

This article suggests a way to make your page object components more concise, readable and maintainable.

Image for post
Image for post
Every element of this faulty system has been 100% unit-tested

In my projects, page object components quickly get out of hand:

Lots of code duplication! In order to make a point, this example has been exaggerated. Typically, you would use a more concise approach, as suggested by ember-cli-page-object authors:

But as your acceptance test becomes more elaborate, you’ll find yourself using more and more common checks on every element of your page object components.

It’s absolutely tedious to update your page object components by hand every time you need another common check in your tests. Instead, you want typical checks available for any element— and your components start to look like the big example above. :(

In order to resolve this problem and minimize code duplication, I created a custom `component` helper:

Note that ember-cli-page-object 0.x used to have its own `component` helper, but in 1.x it was replaced with a plain object.

This custom helper will decorate your components with a bunch of handful checks, eliminating the need to type them by hand every time.

See how more compact and readable the example page object becomes when used with the `component` helper:

We no longer have to specify common predicates, queries or methods — they are now provided by the `component` helper. Note that we can still provide custom ones if we want to: just add them to a component descriptor (second argument).

This is how you can the revised page object component can be used in a test, async-await style:

Note how all the elements obtained `isActive`, `focus()` and `blur()`.

If your app’s components are robust and build with reusability in mind, you can optimize your page object components even further:

Compare this to the very first example above. 😎

PS Pro tip: to avoid tight coupling between page object components and HTML classes, consider using ember-hook or ember-test-selectors.

PPS The ember-cli-page-object team are working on a public API that will allow injecting custom checks and methods into default plain object components. You’ll be able to use the concise approach suggested in this article without a need in a custom `component` helper. The default variety of component checks and methods will also become richer.

Written by

frontend developer, EmberJS enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store