Getting started

👍

Covered in this doc

• High-level summary of what Percy does
• Overview of how to get started with visual testing

Percy is an all-in-one visual testing and review platform.

We help teams automate manual QA to catch visual bugs and gain insight into UI changes on each commit. Our goal is to give you and your team confidence in the visual integrity of your UI every time you deploy. Learn more about the benefits of visual testing.

📘

Supported Platforms

Percy supports visual testing for desktop browsers, real-mobile browsers and native mobile applications. Continue on this page if you want to use Percy for testing your native mobile applications, visit here to know more about Percy for Websites.

How it works

Percy handles everything from capturing and rendering screenshots, to detecting and notifying your team of visual changes.

Step 1: Integrate Percy into your stack

To integrate Percy, start by installing one of our SDKs to add snapshot commands where you'd like visual coverage. We’ve built several SDKs to help you get started with visual testing for your applications.

If you're unsure about which SDK you should use, feel free to reach out to [email protected].

Step 2: Run visual tests

Percy is designed to integrate with your tests and CI environment. Just set the PERCY_TOKEN environment variable in your CI environment.

Note: Although we strongly recommend running Percy via your CI workflow, you can also run Percy locally and may find it helpful to do so while you’re first getting started.

Regardless of how you’re running your visual tests, Percy handles all rendering and visual change detection. When you push changes to your codebase, Percy captures screenshots on devices you choose, and compares them to previously generated screenshots to see if any pixels have changed. Screenshots for individual pages are grouped into snapshots, and snapshots are grouped into builds to be reviewed.

In the image above, the left area is the baseline screenshot and the area on the right is the new screenshot overlayed with the visual diff—the changed pixels highlighted in red. Percy uses a variety of strategies to determine the optimal baseline for comparison, including any installed source code integrations, the default branch of the project, and which commits have previously finished builds.

Step 3: Review and approve visual changes

Our review workflow is designed to keep your team up-to-date with visual changes on every commit. With our source code integrations, we manage your pull/merge request statuses, notifying you when visual changes are detected and changes are requested.

With a source code integration enabled, one click will take you from your pull request to Percy where you can review all visual changes. Our side-by-side UI makes it easy to tell what exactly has changed, and to spot visual regressions across your selected mobile devices. Your team is alerted when changes are requested or when changes are approved and ready to ship!

Visual testing with Percy gives teams complete insight and confidence on each and every deploy. You can easily catch visual bugs, review design changes, and be sure that every pixel you deploy to customers is correct, before they even see it.