I’m thrilled to announce official support for Ember.js in Percy!

We’ve just launched ember-percy: a drop-in client for visual regression testing for Ember apps.

Let’s jump right in to a quick example—say I have a bunch of Ember acceptance tests that look something like this:

Simple. Just visit the About page, click a team member, and expect that the is-expanded class is now applied.

But wait… are you sure is-expanded is the right class? What if it’s actually supposed to be .TeamMember--isExpanded? What if the class is correct, but the style is overridden somehow? What if .TeamMember is accidentally positioned off-screen? What if another developer breaks the styling and doesn’t know? What if any of 100 other CSS or HTML things make it visually wrong while your tests still pass?

Usually the risk of these “What Ifs” is covered by QA—we must manually use the app and look at it to make sure it’s visually correct.

This is where continuous visual integration kicks in. Let’s drop in the percySnapshot() async helper where it’s important to have visual coverage:

Done! percySnapshot() captures a DOM snapshot of the current page state, and uploads it to Percy to be rendered, screenshotted, and compared against the latest screenshots from master. The computation, rendering, visual diffing, and storage is totally offloaded to Percy to keep your tests fast.

What happens now?

The next time you run your tests, you’ll see this in GitHub:

Click Details, and now you can review pixel-by-pixel visual diffs of the changes for this PR:

This shows every pixel changed across the entire app, for this specific PR.

Simply click Approve in Percy, and your GitHub PR is now green!