Announcing cross-browser visual testing with Percy

It’s a big day here at Percy — we’re announcing support for cross-browser visual testing!

To give our customers even more visual insight into every visual change across environments, we’re thrilled to launch cross-browser visual testing in Percy. Now, in addition to reviewing visual changes across responsive widths, all Percy customers can review visual changes across both Chrome and Firefox, with more browsers to come.

As web developers know all too well, maintaining visual accuracy and consistency across the increasingly-fragmented environment of different browsers, widths, and devices can be quite a challenge. It makes it very easy for visual bugs to slip through the cracks and make it out to customers.

At Percy, we’re trying to make the challenge of getting that confidence much easier — now, with just one click!

This feature is an integral part of our goals to reduce time spent manually testing, and ultimately help teams deploy more frequently and confidently by improving cross-browser visibility.

How it works

We take rendering performance and consistency seriously — so seriously, in fact, that from the start we’ve built our own custom rendering infrastructure specifically tailored for visual testing.

Our original Firefox-based infrastructure and “DOM snapshotting” model has been with us from the beginning. It’s a major driver behind how we’ve been able to solve many of the hard problems in visual testing such as deterministic rendering, snapshot stability through font and animation freezing, and performance optimization.

As part of this launch and massive effort to get Chrome rendering into our infrastructure, we’ve built all of those features and learnings into automating Chrome as well, ensuring that scalability and performance are up to par. This was supported by advances in Chrome’s own screenshotting APIs and the Chrome Remote Debugging protocol, which we make extensive use of to do things like full-page rendering, viewport stitching, and incorporate our animation freezing and snapshot stabilization technology.

Getting started

All Percy customers can now enable cross-browser testing–head over to your project settings to add Chrome and Firefox rendering to your builds.

New projects will have both Firefox and Chrome enabled by default. For current projects, you can enable Chrome in just a single click. Once enabled, each build will show separate snapshots for each browser, highlighting the visual changes specific to each.

Enabling cross-browser visual testing will not affect the speed of your CI runs, as all rendering is handled entirely within Percy’s infrastructure per usual. Enabling additional browsers does impact snapshot usage and creates new baselines for subsequent builds for those projects.

To learn more, visit our documentation for cross-browser testing.

We couldn’t be more excited about this powerful functionality, and encourage you to consider where it may be valuable. This is just one of many product updates we have in store for the coming months to make visual testing an even more integral part of delivering software.

If you have any questions about how to get started with cross-browser visual testing, don’t hesitate to drop us a line.

Percy is a visual testing platform that gives your team confidence in every visual change before it’s shipped. Learn more at https://percy.io. 🔑