Visual testing on mobile browsers

👍

Covered in this doc

  • How to access mobile browsers
  • Differences between desktop and mobile plans
  • Mobile browsers supported
  • Important changes for mobile browsers

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

21962196

Project settings page to configure browsers enabled

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

12001200

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.

Mobile browsers supported


Currently, Percy supports the following combinations for mobile browsers:

  • Safari with iOS
  • Chrome with Android (Beta)

We’ll add more combinations soon to this list. Please reach out to us if there is something specific you are looking for.

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: