New in Percy: Save time reviewing builds with automatic diff matching

Lindsay Cade
Percy Blog
Published in
3 min readMar 27, 2019

One of the biggest challenges with visual testing is how to balance completeness of coverage with speedy review processes. As you add more snapshots to your test suites, it naturally takes you longer to review detected changes, and discerning between unintended and intended changes can become a task in itself.

To help teams save time on visual reviews cycles, we’re excited to present our first advanced image processing feature — automatic visual diff matching!

All Percy users now have access to automatic diff grouping! If any matching visual changes have been identified, you’ll see that they’ve been grouped in all builds created after February 20.

How automatic diff matching works

With this feature, you can expand to see all visual changes or approve all matches with a single click.

So, what exactly is a matching diff?

For diffs to be matched, the following criteria must be met:

🔶All diffs must have the same geometry. This includes size but is independent of location.

🔎All diffs must have the exact same underlying pixel color — in both the baseline snapshots and the new snapshots.

🌐Only snapshots that have the same diffs for each enabled width and browser will be matched.

For example, if you updated the color of a single button that appears on several pages in different places, the resulting diffs would be matched:

However, if you updated the colors of all your buttons to be the same, you might see separate diff matchings relating to size, color, etc:

We built automatic diff matching to streamline unwieldy builds and help teams more quickly understand exactly what has changed on every commit. Changes that impact several pages — like a footer or header update — are now grouped for more efficient build reviews!

We’re so excited about this update and look forward to evolving our image processing and computer vision capabilities. Ultimately, we want to make it easier for you to spot visual bugs and approve intended changes faster. Let us know what you think! Drop us a line at support@percy.io with feedback or questions.

Percy is a visual review platform that gives your team confidence in every visual change before it’s shipped. Learn more at https://percy.io. 🔎

--

--