Regions in Percy

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

Use the Regions feature in Percy to target specific areas of your UI for focused visual testing. It helps you minimize noise from dynamic content and highlight only meaningful changes across snapshots.

High-level steps

1. Open snapshot and click the Apply Regions icon.
2. Select DOM element or Draw a custom box.
3. Select a region rule from Ignore, Layout, Intelli Ignore, or Standard. For more information, see Define regions via UI.
4. Click Save and validate visual changes.

Benefits

• Faster Reviews: Cut review time by ignoring non-critical visual differences like timestamps or ads.
• Reliable Tests: Improve test reliability by isolating flaky or dynamic UI areas that frequently change.
• Reusable Regions: Streamline workflows with reusable, code-defined regions across browsers and branches.
• Quicker Debugging: Debug faster by narrowing down diffs to only the areas that matter.
• Scalable Automation: Scale testing efficiently by automating region management in your test code.

The Regions feature gives you granular control over what matters in visual testing, so you can ignore the noise and catch the real changes.

Explore further

• Define regions via UI

• Define regions via code

• Recommendations: Use Regions effectively in Percy