Define Regions via UI

Learn how to define and configure regions in Percy for precise visual testing.

The Regions feature in Percy allows you to define specific areas of your UI for targeted visual testing. Regions can be drawn, selected, and configured directly within the Percy dashboard’s review screen. By default, regions are linked to DOM elements, but you can modify this configuration based on your testing needs.

Ways to apply a Region

• Select regions via UI
• Define regions via code

Select regions via UI

Select a build, open a snapshot, and click Apply Regions on the review screen of the Percy dashboard, you see two options:

• Select region – Hover over elements to highlight them, then click to apply a region.
• Draw region – Enter Apply Region mode and draw a region on the snapshot manually.

By default, regions are:

• Linked to the DOM element.

• Set to the Ignore all rule.
• Editable via the Region settings UI.

Region settings

When a region is selected, the Region settings panel appears. Here, you can choose the desired region rule:

• Ignore all
• Layout
• Intelli Ignore
• Standard (Pixel-based)

See the following sections for a detailed explanation of each rule.

Ignore all

Ignores all completely and excludes all visual changes within the defined region from visual testing.

Layout

• Layout Regions flag changes that impact layout structure rather than pixel-level differences.
• You can configure a Diff ignore threshold to skip minor layout shifts below a certain percentage.

Intelli Ignore

Automatically detects and ignores dynamic UI elements. You can configure Intelli Ignore settings using the following options:

• Click Change Intelli Ignore settings to:
  • Set the image diff ignore percentage.
  • Switch to the Dynamic elements tab and configure it to ignore elements like carousels, banners, cookies, ads, and custom classes. For more information, see Dynamic elements.
• Click Diff sensitivity to adjust detection levels - choose from Strict, Recommended, and Relaxed.
• Use Diff ignore to ignore minor changes below a specified percentage threshold.

Standard (Pixel-based)

Detects pixel-level changes within the region.

• Click Diff sensitivity to adjust detection levels, you can choose from Strict, Moderately Strict, Recommended, Moderately Relaxed, and Relaxed.
• Use Diff ignore to ignore minor changes below a specified percentage threshold.

Functionality available for Regions

• Draw and resize regions.
• Copy regions.
• Apply region configurations across other defined regions.
• Delete regions.
• Move regions.

• Multi-select regions to manage configurations in bulk.

• Link regions to DOM elements via the Inspector view (element selector).

The Regions feature in Percy helps fine-tune visual testing by allowing you to control how specific areas of a page are compared. Use it to ignore dynamic content, detect layout shifts, and ensure meaningful visual testing results across different browsers and resolutions.