Blog, BrowserStack Blog
Introducing Percy Visual Engine: A generational leap in image comparisons | BrowserStack
Introducing Percy Visual Engine: A generational leap in image comparisons
This article was originally published by BrowserStack. Click here to view the original article.

We are thrilled to announce the launch of Percy Visual Engine. The engine is an upgrade of Percy’s existing diffing algorithm, and it uses computer vision and machine learning for visual diffs on the Percy platform. As a result, image comparisons on Percy are now faster and more accurate than ever.
The features and capabilities that the Percy Visual Engine unlocks are:
Page Shift Detection
Percy now highlights the exact pixels that cause the page shift instead of marking all of the page’s contents as a diff. Our goal with Percy Visual Engine was to reduce noise and highlight only the most essential changes significantly; you can see the difference in the image below.

On this page, some content has been rearranged in a few sections of the page. However, the rest of the page remains the same. This could have resulted in a noisy diff, but not anymore. With the updates in Percy Visual Engine, we no longer see the whole page shown as a diff. Instead, we only see the exact areas that changed. The new Percy Visual Engine cleans up vertical content shifts and shows you only the diffs you care about.
Diff Highlighter
Some changes on a webpage can be small and hard to identify with the naked eye. To solve this, we have introduced the Diff highlighter, which highlights the exact position of any diffs so you can get to what’s important faster.

Here we can see a very long page, but only a tiny part of one icon has been changed. The Diff highlighter allows you to quickly find the diff in your snapshot to be on your way faster.
Handling Anti-Aliasing noise
The new Percy Visual Engine uses computer vision to analyze each pixel, thereby eliminating the false positives due to anti-aliasing. With so many browsers offered for rendering, it becomes essential to compensate for variations between machines, chip architectures, and GPU non-determinism. Here we can see a difference in anti-aliasing between two different renders in our infrastructure. With Percy Visual Engine, we can detect and remove these differences in your final diff so you can review only the essential changes.


Intelligent Text Stabilization
With the new Percy Visual Engine, we have eliminated false positives caused by minor character shifts during rendering. Here are two images that look the same. It turns out that the positions of the text in this image have changed slightly between renders, but not due to code changes. With Percy Visual Engine, we detect and filter out this type of noise in your snapshots so you can ship your software faster.


Speed
Experience the all-new diffing algorithm that does way more processing per screenshot but still manages to be over 1.5X faster than before!


The Testing Infrastructure for the Internet
BrowserStack powers today’s digital economy to build quality and bug-free software at speed—the same software that’s changing the world.
App & Browser Testing Made Easy
Contact us to discover the seamless experience by testing on 3000+ real devices and browsers.


