Define Regions via UI

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

The Regions feature in App 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.

Select a build, open a snapshot, and click Apply Regions on the review screen of the App Percy dashboard.

By default, regions are:

• 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
• 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.

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.

The Regions feature in App 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.