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 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 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.
Updated 11 months ago
Now that you're up to speed on visual testing, you're ready to learn more about Percy and how to get started.