Intelli Ignore

Learn how Intelli Ignore or contextual diff works in Percy

Intelli Ignore, is a remarkable feature which enhances the stability of a webpage by meticulously analyzing image differences and pinpointing only those discrepancies that genuinely matter to the human eye. Crafted to mitigate false positives stemming from network glitches, varying image types, or external factors, Intelli Ignore adeptly refines the testing process.

It’s smart enough to recognize and ignore tiny, unimportant changes on webpages, just like a regular person would in real life. For example, consider the image below. The amber color indicates a detected difference by Intelli Ignore, but it’s considered unimportant. In simpler terms, it’s showing that there’s a change, but the system thinks it’s not a big deal. Whereas in the second part of the same image, where one snapshot represents a Desktop view and the other a Phone view, the differences are quite evident and significant for a human observer. Consequently, these differences are highlighted in red to draw immediate attention to them.

Small differences that people might not notice at first are ignored by Intelli Ignore.

Consider region

If there are particular differences that Intelli Ignore has bypassed but you deem them critical, you can override its effects by specifying a consider region. This will reveal the differences exactly as they appear, countering Intelli Ignore’s influence.

You can apply consider regions by passing them in options as shown below:

Enabling the Intelli Ignore feature

Intelli Ignore is automatically activated for all Percy projects created after April 8th, 2024. For older projects, you can enable this feature by accessing project settings. Within the Advanced Options section, choose Intelli ignore (images only) under Adjust diff sensitivity. Simply toggle the button to enable this feature.

Adjust diff sensitivity

The Adjust diff sensitivity setting enables adjustment of the diff sensitivity when ignoring differences for the images on the website application. It affects each change individually, as not every image difference is the same, requiring varying levels of attention to detail. The setting takes effect on the next build and does not impact past builds.

In the image above, adjusting the percentage to 0 indicates that no differences will be ignored; instead, every difference on the image will be highlighted. This slider ranges from 0 to 100. Setting it to 100 means all differences on the image will be ignored, with only text and other differences highlighted.

Things to keep in mind

• The diff sensitivity applies to the whole webpage; Intelli Ignore operates solely for images.
• If you are using the scope element as an environment variable, then only the scoped/intended image is considered by Intelli Ignore.
• Resetting the slider option returns it to the default value, which is 20%.

Component shift

For Percy Web projects with Intelli Ignore enabled, Percy applies a component shift algorithm to handle layout movements on supported pages. This reduces false diffs from minor page shifts and lets you focus on meaningful visual changes.

Intelli Ignore feature on Percy dashboard

Use the Intelli Ignore rule under the Select regions option to examine contextual differences on Percy builds. For more information, refer to Define regions via UI.