Skip to main content
Experience faster, smarter testing with BrowserStack AI Agents. See what your workflow’s been missing. Explore now!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Define Regions via code

Examples of using Regions in Percy via code.

You can define regions programmatically in your test scripts to consistently apply them across browsers and devices.

Methods to define Regions:

  • Using elements: Reference DOM elements (e.g., Playwright objects) to automatically extract the region area.
  • Using coordinates: Pass raw x, y, width, and height values for precise control.

  • Using selectors: Use XPath or CSS selectors to define regions that remain consistent even if the layout shifts.

Key details:

  • Code-defined regions are applied automatically across all browsers and devices.
  • These regions are not editable through the Percy UI and must be configured directly in your test scripts.

  • You can apply them globally or limit them to specific browsers or devices.

For language-specific examples, see the region examples on how to apply regions via code.

For Percy on Automate projects, pass the regions parameter in the options of the screenshot command.

Ignore all rule

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Cypress
Copy icon Copy

Layout

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Cypress
Copy icon Copy

Intelli Ignore

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Cypress
Copy icon Copy

Standard (Pixel-based)

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Cypress
Copy icon Copy

Supported parameters

Refer to the table below for details about each parameter and its description:

Parameter Type Description
algorithm
(mandatory)
string Specify the snapshot comparison algorithm. One of the following can be passed:
intelliignore
ignore
layout
standard
diffSensitivity
(optional)
integer Set the sensitivity level for detecting differences. Allowed values:
1 strict, 2 moderately strict, 3 recommended, 4 moderately recommended, 5 relaxed.
imageIgnoreThreshold
(optional)
integer Set the threshold for ignoring minor image differences. Allowed range:
(0, 0.1, 0.15, …,1).
diffIgnoreThreshold
(optional)
integer Set the threshold for ignoring minor differences. Allowed values:
(0,0.1,0.15, …, 1).
elementXpath
(optional)
string Supported XPath Formats

- Only basic XPaths with id is supported.
- Full absolute XPaths are supported.
- Examples:
1. ‘//[@id=”carouselImage”]’
2. ‘//[@class=”banner”]’
3. ‘/html/body/div[1]/header/nav’

Not Supported

- Double-quoted XPath strings- Examples:
1. /*[@id=’carouselImage’] (inside double quotes)

Relative or dynamic XPath patterns

1. //button[text()=”Submit”]
2. //input[@type=”email”]
3. //div[@class=”header”]/h1
elementCSS
(optional)
string Specify the CSS selector for the element. Currently we only support combination of tag, class, and id.
1. div#id1.class2.class3
2. div.class1.class2
3. .class3
4. #id
5. div, p, section
boundingBox
(optional)
object Defines the coordinates and size of the region.
-x (Integer): Specify the X-coordinate of the region.
-y (Integer): Specify the Y-coordinate of the region.
-width (Integer): Specify the width of the region.
-height (Integer): Specify the height of the region.
carouselsEnabled
(optional)
boolean Enable detection of carousels. Any component containing one of the following class names will be ignored:
(slide, gallery, carousel, or swiper)
bannersEnabled
(optional)
boolean Enable banner detection. Any component containing the banner class name will be ignored.
adsEnabled
(optional)
boolean Enable ad detection. Any ad component containing one of the following class names will be ignored: (‘google_ad’, ‘adslot’, ‘advertisment’, ‘amazon-adsystem’, ‘taboola’, ‘google-ad’, ‘googlead’)

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

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy Check Circle