BackstopJS visual regression testing addon for Ember.
- Simple to add, Simple to use.
- Works in Local or CI pipeline.
- Manages your test and reference files.
- Works in your existing Acceptance and Integration tests.
ember install ember-backstop
Add these lines to your <project>/gitignore...
#backstopjs
html_report
bitmaps_test
Add this line to <project>/mirage/config.json...
this.passthrough('/backstop/**');
Add this to your <project>/testem.js...
proxies: {
'/backstop': {
target: 'http://localhost:3000',
secure: false,
},
},
You will need the backstop-remote service running for visual tests.
In a seperate window run...
ember backstop-remote
Leave that running while you're testing. When you don't need it anymore you can either close the window or run ember backstop-stop to stop the service.
Ember-Backstop works with ember test and ember serve e.g.
ember test --server --filter="your_test_name_partial"
or
ember serve
First import the backstop helper into your test...
import backstop from 'ember-backstop/test-support/backstop';
Then add an await backstop(assert); assertion to any UI state you want to test...
test('it renders the thing', async function(assert) {
await visit('/sales/company/11102');
await backstop(assert);
assert.dom('#myFancyElement').Exists();
});
Now, whenever you run a test, BackstopJS will take a screen shot and compare it against the last known good.
The first time you run backstop-helper tests BackstopJS will fail because there aren't any reference files yet. So, here's what you do...
- run tests normally
- When tests complete, in another window run
ember backstop-approve
Your next test run should now pass.
You can always view the last test run report by running the following in another window...
ember backstop-report
Anytime you want to promote a changed test to the new reference file, run...
ember backstop-approve
This command also takes an optional filter parameter e.g.
ember backstop-approve --filter=testFilenameAsRegExString
See http://backstopjs.org for documentation on BackstopJS -- but keep in mind -- for this implementation all DOM interactions should probably be done in your Ember test -- and not the BackstopJS config.
Take a look at your test network calls. Are you seeing UnrecognizedURLError errors? If so, there may be an issue with a middleware addon dependency loading too early. Try ensuring any server dependencies don't block proxy requests to /backstop/. Post the issue here and let us know!
Post an issue, propose a feature or just say Hi! https://github.com/garris/ember-backstop/issues
Yes. Please pitch in to make this addon awesome for everyone.
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
This project is licensed under the MIT License.