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
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.
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.
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.
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."
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.
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 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.