Run visual tests on mobile apps

Capture Percy screenshots of your Android or iOS app on real devices, then compare each device against the baseline in your IDE.

Test Companion runs your app on a real BrowserStack device, captures screenshots of the app’s screens, and sends them to Percy. The comparison opens in the Visual Analysis panel, where each screen is compared per device. For how the review loop and the panel work, read Visual analysis.

Prerequisites

Before you start, confirm the following:

• Test Companion is installed in a supported IDE and you are signed in to your BrowserStack account.
• Your BrowserStack account has access to BrowserStack Percy.
• You have an Android .apk or an iOS .ipa build to test.

Run a visual test

These steps assume your project is already connected. If this is your first visual test, start from Connect Visual Analysis and let the panel build the prompt for you.

To capture your app screens and start a Percy build, follow these steps:

1. Open the Test Companion panel in your IDE.

2. Click App in the toggle above the chat input.

   

3. Click Select App and choose your build.

   The connected app appears as a chip next to the toggle. For every way to connect a build and the supported formats, read Connect your app.

4. Describe the visual test in the chat:

    Do visual testing for this app
   

5. Press Enter.

Test Companion starts a session on a real BrowserStack device and opens your app. Test Companion identifies the screens to capture, writes a test that takes Percy screenshots of the screens, and runs the Percy build.

How Test Companion captures screens

Test Companion selects one of two capture routes, based on what your project already has.

Every screenshot is captured on a real device, so Percy compares each screen per device. When a screen is captured in more than one orientation, Percy compares each orientation too.

Review the build

The Visual Analysis panel opens on the finished build.

To work through the build, follow these steps:

1. Select a snapshot in the Snapshots list to open its comparison.
2. Compare the snapshot in Side by side, Overlay, or Diff view.
3. Use Devices to check the render on each captured device and orientation.
4. Click Approve build when every change is intended.

When a difference is a real regression, leave the build unapproved. Fix the code, then run the visual test again.

Example prompts

Name the screens you want to capture, so Test Companion captures those and nothing else.

Capture the whole app

Do visual testing for this app

Capture specific screens

Run visual regression on the search and article screens of this app.

Next steps

• Visual analysis: Read how baselines, builds, and the Visual Analysis panel work.
• Run visual tests on web apps: Run the same review loop for web pages.
• Connect your app: Read every way to connect a build and the supported formats.