Percy Developer Hub

Welcome to the Percy Developer Hub. You'll find comprehensive guides and documentation to help you start working with Percy as quickly as possible, as well as support if you get stuck. Let's jump right in!

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.

How it works


Percy handles everything from capturing and rendering snapshots, 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 generate snapshots where you'd like visual coverage. We’ve built several SDKs to help you get started with visual testing for your websites, web applications, components, and end-to-end testing frameworks. You can also build your own SDK.

If you're unsure about which SDK you should use, feel free to reach out to support.

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 asset discovery, page rendering, and diff detection. When you push changes to your codebase, Percy captures DOM snapshots, renders snapshots, and compares them to previously generated snapshots to see if any pixels have changed. Snapshots are grouped into builds to be reviewed.

In the image above, the left area is the baseline snapshot and the area on the right is the new snapshot 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 responsive widths and browsers. 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.


What's next

Learn more about the platform, check out our 2-minute tutorials, or jump right into integrating an SDK.

Percy basics
Tutorials
SDKs overview

Getting started


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.