Cross-browser visual testing

Percy runs visual tests for all browsers specified in your BrowserStack configuration file. Set the browser version by integrating your test with the BrowserStack SDK with Automate. Use the Automate capability builder to configure various browser names and versions.

In your BrowserStack configuration file, include the following browser details under the platform attribute:

1. os name
2. osVersion
3. browserName
4. browserVersion

Because each snapshot is captured on the operating system you specify, OS-level rendering differences such as system fonts, form controls, and scrollbars appear in the visual diff. Manage your browsers with Automate when you need to compare how a page renders across operating systems.

All specified browsers appear under the Device & Browsers drop-down. Select a device, and the build displays separate screenshots for that device and browser, highlighting the visual differences specific to each.

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.

Percy supports modern browsers, including Chrome, Firefox, Edge, and Safari. Browser updates are managed automatically according to the following schedule:

• Desktop browsers (Chrome, Firefox, and Edge): Updated every two quarters
• Safari on macOS and mobile browsers: Updated annually

Percy runs visual tests for all the browsers that are enabled for the project on the Percy dashboard.

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, you will get the “browsers selection” option available in the created Project Settings.

1. Create a new Percy project and select “Percy” in Browser Selection to be handled by settings.
2. Click the Browsers tab. Select browsers to handle cross-browser testing for captured snapshots.

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.

Browsers and rendering environment

Percy renders your snapshots on its own infrastructure. Each browser runs on a fixed operating system that Percy manages, so the operating system isn’t something you select or configure when you manage browsers with Percy. Percy reports the browser name and version because those are the only details that vary. Percy updates the operating system and browser versions over time.

To check the browser version for your project, click the information icon:

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.