Refactoring to Page Objects with ember-cli-page-object

Wednesday,
August
3rd,
2016

The Page Object design pattern is used to isolate HTML structure and CSS selectors from your tests. One of the main benefits from the page object pattern is test readability, and this really starts to shine as your acceptance and integration (component) tests get more complicated. Not only do page objects greatly improve test readability, they also make your tests more DRY. When HTML structure and CSS selectors change, you can make a change in a single place in your page object as opposed to going through and updating multiple, repeated selectors in your tests. Personally, I have also found that tests have become easier to write as my page objects get more defined.

Luckily for us Ember developers, there is a fantastic addon called ember-cli-page-object that helps us create page objects. I’ve created a screencast where I walk through a simple Ember application with an acceptance and integration test, and we’ll refactor these tests to use a page object with the ember-cli-page-object addon. All of the code can be found at https://github.com/skaterdav85/refactoring-to-page-objects. For those that just want to see the tests before and after the refactor side by side, I have included them below the video.