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.
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 website, visit here to know more about Percy for native mobile applications.
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 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, rendering, and visual change detection. When you push changes to your codebase, Percy captures DOM snapshots, renders screenshots, and compares them to previously generated screenshots to see if any pixels have changed. Screenshots for individual components and 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 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.
Updated 5 months ago
Learn more about the platform, check out our 2-minute tutorials, or jump right into integrating an SDK.