Continuous visual integration for Ember
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!
Our goal here is simple: provide a fast, continuous visual review workflow right alongside your code reviews.
We leave it up to you to decide where you want visual coverage in your app — maybe it’s all pages, maybe a handful of acceptance test states, maybe it’s only your style guide or a bunch of component integration tests.
What about responsive designs?
Definitely! You can configure your CSS breakpoints and take advantage of Percy’s responsive visual diffs:
See the ember-percy docs for how to configure your CSS breakpoints.
We’re very excited about this launch and would love to hear your feedback. We have been beta testing ember-percy and already have a few Ember apps sending thousands of snapshots each day, with teams who have integrated Percy’s visual reviews into their development workflow.
Also—Percy’s UI itself is an Ember app, so we can finally test Percy in Percy! For example, if we accidentally removed the logo on our homepage, we would see that change like this:
The journey continues
This has been a long journey over the last 1.5 years to get to this point—visual testing is a deceptively complex problem.
I talked a bit about this in my recent RailsConf talk on Continuous Visual Integration—how getting visual testing working at scale, integrated into your day-to-day workflow and without performance overhead, is no easy task.
I’m proud to say that Percy’s underlying asset-centric architecture has proved itself in this way—we have processed over 1.65 million visual diffs (which also means we’ve opened Firefox 1.65 million times and taken 1.65 million screenshots), and this is with nearly zero-overhead added to your test suite. All the hard computation, rendering, diffing, and storage is offloaded to Percy to keep your tests fast.
We recently worked with the awesome Jeffrey Biles over at Ember Screencasts to record a video walk-through—check it out along with hundreds of other awesome Ember videos:
We invite you to try Percy today!
I’ve been consulting with companies in San Francisco to get their visual tests up-and-running, show best practices for visual regression testing, and build out Percy features. If you’re interested in some hands-on Ember expertise for visual testing, reach out!
