The ember-backstop test-helper addon makes it wicked easy for you to add powerful visual tests to your ember app. This tutorial is designed to show you how in about 5 minutes.
This tutorial starts with a fork of the EmberJS Super Rentals tutorial. We added the ember-backstop test helper to the project and configured everything for you so you can get right in and experience visual testing with everything all set up. Awesome.
You will need the following things properly installed on your machine.
First, find a spot on your machine where you want to put the demo -- desktop works fine...
git clone https://github.com/garris/ember-backstop-tutorial/
cd ember-backstop-tutorial
yarn install
In the project root run the following to start the Backstop-Remote service...
ember backstop-remote
Then, in another window start ember...
ember serve
Ok, let's get to the tests!
So, by now your server is running and the demo app will be hittable at http://localhost:4200. Go ahead and click around there. We'll wait...
The ordinary Ember tests are here, all set up for you -- http://localhost:4200/tests. Go ahead hit that link and watch everything run. Here is the testem test report that you should see...
First, open tests/acceptance/list-rentals-test.js and add the following import statement to the top of the file...
import backstop from 'ember-backstop/test-support/backstop';
... and here is an example of how you add the screenshot helper to your tests...
test('it renders the thing', async function(assert) {
await visit('/sales/company/11102');
await backstop(assert);
assert.dom('#myFancyElement').exists();
});
Go ahead and add it to the last four tests inside tests/acceptance/list-rentals-test.js as shown below...
Ok, the helper is set up -- let's now set up the visual tests.
The first time you run an ember-backstop after set-up the test will fail -- so go ahead! Fail fast! Rerun your testem tests -- it should look like below...
Testem is showing failed BackstopJS tests -- which have failed because we have not yet told BackstopJS what our reference images should look like. Let's fix that -- open the BackstopJS report in a browser tab http://localhost:4200/backstop/backstop_data/html_report/
That should look like this...
These test screenshots look good -- lets tell backstop to approve them which will remove our error state here and ensure that future test screenshots will be compared against these.
In another window approve the tests with...
ember backstop-approve
Now run tests again (refresh http://localhost:4200/tests) -- they should all pass!
When the testem tests (above) have completed go ahead and refresh the Backstop report here http://localhost:4200/backstop/backstop_data/html_report/. It should look like this...
Congratulations! BackstopJS tests are all set up! Just add a backstop() helper anywhere and a screenshot will capture the rendered visual state at that time.
Go forth now and experiment with your new visual powers!
As a suggestion you could open up the project css file at vendor/ember-tutorial.css. Go ahead and delete the position: static; as shown in the following file. See if BackstopJS can find the changes... 😉
The above changes is caught by BackstopJS...
