Pixel perfect visual diff testing

Visual diffing, or visual difference testing, is a method of comparing screenshots of your web application at different stages to detect any unintended visual changes. This ensures that your application's visual appearance remains consistent across updates.

QA Wolf's visual diffing tool automatically captures screenshots of your application before and after changes are made. These screenshots are then compared pixel by pixel to identify any visual discrepancies. Testers write visual assertions to determine if the percentage of difference between the two images falls within a predefined acceptable range.

Just because something functions properly doesn’t mean it looks right, and those aesthetic regressions can be just as damaging as functional regressions. When you’re dealing with hundreds (or thousands) of pages, manual testing is impossible while a “wait and see” approach just means customers see it first.

Visual diffing is also necessary when testing apps that rely on third-party content that your team can’t control, complex graphics that have pixel-level interactions, and features that use the Canvas API.

Yes, QA Wolf's visual diffing integrates into your existing CI/CD pipeline. This allows visual tests to run automatically with each code change, providing continuous monitoring and immediate feedback on visual differences.

Almost any web application can benefit from visual diffing. It's particularly useful for branding sites, CMS integrations, data dashboards, sites with complex graphics, and third-party embeds. But it ensures visual consistency and catches issues that might be missed by manual testing, so really any site can use it.

QA Wolf uses Playwright’s visual assertions, which returns the percentage of difference between the baseline image and the actual image.  When writing the tests, testers set an acceptable range of difference for the image (typically below 1%) so any differences beyond that range result in a test failure. In addition, our testers have debugging tools at their disposal to help them create accurate tests.

When there’s a change to a webpage or component, our AI determines whether the change was intentional or not. If the AI isn’t sure, it’ll escalate to a QA engineer for additional investigation.

We recommend running visual diffing tests with every code change, pull request, or deployment. This ensures that any visual inconsistencies are caught early, maintaining the integrity of your application's visual design.