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!

Visual testing basics

Covered in this doc

What visual testing is and how it works
How visual testing different from functional testing and manual QA
What visual diffs are and why they matter

What is visual testing?

Visual testing is the automated process of detecting and reviewing visual UI changes. Check out the video below to get an overview of visual testing with Percy.

Visual testing vs. functional testing

From unit and acceptance tests to integration and end-to-end tests, there are tons of tools and processes out there devoted to making sure software works. But how can you test changes that are purely visual?

Oftentimes, UI bugs aren't caught by your test suite, but they’re visually wrong. So, in lieu of unruly and brittle regression tests, visual testing fills the gap left by functional testing to ensure not only that everything works as intended but looks visually perfect as well.

Visual testing vs. manual QA

Today you may be checking for visual bugs manually. Whether you have a team or you yourself are responsible for catching visual bugs, you know the downfalls. It’s expensive, time-consuming, manual, and ultimately imperfect.

That’s why teams are augmenting or replacing manual QA with visual testing to ensure visual bugs are always caught, and to maintain the visual integrity of their entire frontend with complete confidence.

How does visual testing work?

At the most basic level, visual testing works by comparing screenshots to detect if any pixels have changed. Those pixel changes are called "visual diffs."

Visual diffs 101

Sometimes referred to as perceptual diffs, pdiffs, CSS diffs, and UI diffs, visual diffs are the computational difference between two images. In our UI we highlight changed pixels in red so you can easily see what has changed.

Is visual testing for pages or components?

With Percy, you can test both components and full pages. Both can be valuable in different situations. Visual testing for components is a great way to track individual changes while full UI testing can ensure that all components and content are interacting correctly will one another.

We find that testing both pages and components works best. The earlier you can catch a visual diff in your team's workflow the better.

Visual testing workflow

Visual testing becomes truly valuable when practiced continuously and at scale. With Percy, you can add snapshots to web applications, components, static sites, style guides, test frameworks and more.

Our SDKs make it easy to install and add snapshots where you want them. Percy also integrates with your CI service and source code management system to add visual tests to each commit. When tests are kicked off, Percy renders snapshots, detects diffs, and notifies your team of changes. Once notified, it’s easy to review diffs to determine whether the changes were intended or not.


What's next

Now that you're up to speed on visual testing, you're ready to learn more about Percy and how to get started.

Getting started
Percy basics

Visual testing basics


Suggested Edits are limited on API Reference Pages

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