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 UI screenshots to detect if anything has changed visually. 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 areas in red so you can easily see what has changed.

Is visual testing for pages or components?

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

We find that testing viewports and full pages together 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 screenshots to native or hybrid mobile applications, style guides, test frameworks and more.

Our SDKs make it easy to install and add screenshots 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 screenshots, detects visual changes, and notifies your team of changes. Once notified, it’s easy to review diffs to determine whether the changes were intended or not.