Cross-browser visual testing

👍

Covered in this doc

• The benefits of cross-browser visual testing
• How cross-browser visual testing in Percy works
• Enabling visual testing for Chrome, Firefox, Edge and Safari

Cross-browser visual testing is available for all Percy customers to effortlessly see visual changes across different browsers.

Percy currently supports modern Chrome, Firefox, Edge and Safari browsers, with support for more browsers in the works. We automatically handle browser upgrades, versioning, and maintenance in our custom rendering infrastructure.

How it works

Because Percy stores the original DOM snapshot and page assets, we simply render the same page within different browsers when generating screenshots. This is handled entirely server-side and has no effect on the speed of your CI run since all rendering and diffing takes place in Percy, like normal.

When cross-browser testing is enabled, each build will show separate screenshots for each browser, highlighting the visual diffs specific to each. The number of diffs for each browser will appear over the browser icon on your build.

Keep in mind that you will occasionally see different visual diff counts for each browser because each renders slightly differently. Catching those browser-specific visual regressions is an advantage of cross-browser testing.

Enabling and disabling browsers

By default, Chrome, Firefox, Edge and Safari are enabled for each new project.

Browsers can be enabled or disabled for any individual project at any time. To enable or disable a browser, simply go to Project Settings.

After enabling a browser, a new baseline will be established on the project's subsequent build. This means that the snapshots in the first build for that browser won't have a baseline comparison. Read more about our baseline picking logic.

If you disable a browser and choose to re-enable it in the future, we will update the browser to Percy's newest version and the subsequent build will create a new baseline for that browser.

Usage

Each browser counts as a separate screenshot that counts towards your monthly screenshot usage. For example, a snapshot of your homepage in both Chrome and Firefox will count as 2 screenshots.