Visual Testing on mobile browsers

Percy runs visual tests for all mobile 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 mobile browser names and versions.

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

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

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.

Important changes for mobile browsers

Screenshot width

The width parameter passed while running Percy tests will be ignored for mobile browsers as Percy uses real mobile devices and the screenshot width is fixed for these. Please note that the behavior on desktop browsers remains unchanged.

Portrait mode

All screenshots on mobile browsers will be taken in portrait mode by default. Please refer to these pages to read more about changes in mobile browsers’ behavior:

• Text stability in iOS
• Autoplay videos here

Currently, Percy supports the following combinations for mobile browsers:

• Safari with iOS
• Chrome with Android (Beta)

We’ll soon add more combinations to this list. Contact us if you’re looking for something specific.

How to access mobile browsers

To access mobile browsers, you will have to upgrade to the Percy Desktop & Mobile plan. If you do not have access to the mobile plan:

1. Reach out to your Percy account owner and ask them to upgrade.

2. If you don’t know the account owner, fill out this form and we will reach out to your account owner.

3. Alternatively, you can request a free trial of the mobile plan using the same form.

If you already have a Percy Desktop & Mobile plan, you can turn mobile browsers on or off using either of the following options:

1. Browser Settings Page: Use this page to view and change the browser coverage for all your Percy projects.

2. Project settings: You can also use the project settings page to toggle browsers on/off

While reviewing diffs, Percy will show separate screenshots for each browser, highlighting the visual diffs specific to each.

Differences between desktop and mobile plans

All features in Desktop and Desktop & Mobile plans are same, except the support for mobile browsers. Please visit the pricing page for a detailed comparison between the desktop and mobile plans.

Important changes for mobile browsers

Screenshot width

The width parameter passed while running Percy tests will be ignored for mobile browsers as Percy uses real mobile devices and the screenshot width is fixed for these. Please note that the behavior on desktop browsers remains unchanged.

Portrait mode

All screenshots on mobile browsers will be taken in portrait mode by default. Please refer to these pages to read more about changes in mobile browsers’ behavior:

• Text stability in iOS
• Autoplay videos here