Ask the Community
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.
Once you unlink a region, resize handles appear so you can manually adjust its size and position. However, the region becomes fixed and no longer adapts to changes in layout. If you apply it across different widths or browsers, the results may be inaccurate if the original element’s position varies.
When you apply and save a region, a loader banner appears at the bottom of the snapshot. This is visible only to the person who applied the region and disappears once processing is complete.
- Access to the Regions feature in the UI is tied to the Approve build permission.
- By default, Product Users and Admins have this permission, however you can configure it from the Central RBAC page.
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.
View ignored changes
You can show or hide changes filtered out by the Visual Review Agent, Regions, or Intelli ignore. These are grouped under a single control labeled Diffs ignored by. Click the highlighted icon to view the ignored changes.
If you add Regions or if differences are ignored by Intelli ignore, the build review screen highlights Regions ignored differences with a blue bounding box and Intelli ignore changes without any bounding box, as shown in the image.
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.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!