Simple Page Objects for Testing Ember.JS Apps Share: Evermore Date Published 21 November 2018 Categories Blog, Guide Reading Time 2-Minute Read The introduction of the new test helpers and native async/await functionality makes testing a breeze. With this article we will showcase how you can use it. Testing Ember.JS apps is getting better and better with every new release. The introduction of the new @ember/test-helpers and native async/await functionality makes testing a breeze. Let’s take this simple test case of our article-form component. The test case looks sweet as it is right now. And as an added benefit of the new testing helper, we can do the same in our acceptance tests as well, which means that we will benefit from extracting some of the logic. Here come page objects. They usually encapsulate given page or page section into a helper that is used to interact with it. “A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML.” — Martin Fowler Creating page objects in Ember were a bit tricky to do if you planned to use them in both integration and acceptance tests. Of course, thanks to the awesome community, there is an addon that helps with that — http://ember-cli-page-object.js.org/. But since the introduction of the new helpers, we can create a simple one, just using the baked in functionality (and I like to keep the dependencies to a minimum 🙃). Now we can just import it and use it for interacting with the form. They work really well with qunit-dom as well. Having the selectors as properties means that we can just use them to assert that the DOM is at the state that we expect it to be. It is really a simple, but quite pleasant, pattern that we use regularly in Evermore. Shout out to all the people that continue to make Ember.JS a joy to work with.