Applitools Eyes Ignore Region Examples for Dynamic Web Content

In Applitools Eyes for Playwright, pass a locator in the ignoreRegions array on eyes.check(). Eyes excludes that area from the visual comparison, so changes inside it will not fail the checkpoint. Keep the region narrow: genuine UI regressions inside an ignored area are hidden too. If content changes but its structure and placement still matter, use Layout matching instead.

1. Ignore a dynamic region in Playwright

The locator identifies the element whose visual differences should not count for this checkpoint. This follows the documented Playwright API shape:

await eyes.check('Homepage', {
  fully: true,
  matchLevel: 'Strict',
  ignoreRegions: [page.locator('.dynamic-content')],
});

For example, .dynamic-content might identify an ad slot, live feed, animation, date field, media player, or user-specific detail when its appearance is intentionally irrelevant to the test. Use a selector specific to the changing component rather than a broad parent container.

Runnable Playwright example

This complete test uses the Applitools Playwright integration and a configured Eyes instance. Install the integration and configure its required API key and runner according to the official Applitools documentation; the example assumes your project exposes an initialized eyes instance and a Playwright page.

import { test } from '@playwright/test';

// Assumes eyes is initialized using the Applitools Playwright integration.
test('homepage ignores its live feed', async ({ page }) => {
  await page.goto('https://example.com');
  await page.locator('.dynamic-content').waitFor({ state: 'visible' });

  await eyes.check('Homepage', {
    fully: true,
    matchLevel: 'Strict',
    ignoreRegions: [page.locator('.dynamic-content')],
  });
});

Replace the sample URL and selector with your application’s page and dynamic component. The test waits for the target to appear before the checkpoint so a missing component is not silently mistaken for an ignored region. Confirm the initialization and imports for your installed SDK version in its current integration documentation.

Multiple areas and selector stability

The documented option accepts an array, so add a locator for each independently irrelevant area:

await eyes.check('Dashboard', {
  fully: true,
  matchLevel: 'Strict',
  ignoreRegions: [
    page.locator('[data-testid="live-feed"]'),
    page.locator('[data-testid="rotating-promo"]'),
  ],
});

Prefer selectors tied to stable component identity, such as a test ID or a durable class. Avoid positional selectors that can point to a different element after the page changes. If a selector matches multiple elements or no elements, inspect the locator and checkpoint behavior rather than widening the ignored area preemptively.

2. Decide whether to ignore or use Layout matching

Choice	What it checks	Use it when	Coverage tradeoff
Ignore region	Excludes the selected region from visual assessment.	Any visual change in that specific area is immaterial, such as an ad or volatile live content.	Visual defects inside the region can pass unnoticed.
Layout matching	Checks structure and relative positions while allowing text, images, or other content to differ.	The content varies but layout and element placement still need validation.	It retains structural checks but does not validate the actual text or graphics in the same way as strict comparison.
Floating region	Allows bounded movement of a region.	The region may shift within an acceptable range, but its visual content still matters.	Movement tolerance is allowed; this is not a full exclusion.
Region capture	Targets an area for capture.	The checkpoint should assess a specific area.	It changes capture scope; it is not an ignore annotation.

Use the narrowest behavior that reflects the test’s purpose. If a changing paragraph can contain a wrong label or a broken image that matters, ignoring it removes that signal. Layout matching is often the better fit when the intended assertion is that the surrounding structure remains sound despite changing content.

3. Mark an ignore region in the Eyes dashboard

1. Open the failed or changed checkpoint in the Eyes dashboard.
2. Choose the Ignore region annotation.
3. Draw it around only the content whose differences should be excluded.
4. Save the annotation and review the resulting comparison before accepting a baseline change.

Applitools support guidance says the annotated region can be assigned to corresponding areas on other baselines that include it. Recheck the affected checkpoints after annotating, especially if pages have different layouts. The dashboard also offers annotations such as Floating, Strict, Dynamic, Ignore colors, and Layout; choose based on the difference you want to tolerate.

4. Troubleshooting

Symptom	Likely cause	What to do
The changing area still causes a mismatch.	The locator identifies the wrong element, the element is outside the intended captured area, or the annotation does not correspond to the changed pixels.	Inspect the locator target and the checkpoint diff. Tighten or correct the selector, then verify the ignored boundary.
A missing widget no longer fails the test.	The ignore region suppresses visual assessment, while the test does not separately assert that the widget exists.	Add a functional assertion for required presence or behavior before the visual checkpoint. Ignore only visual variation, not required application behavior.
A selector stops identifying the dynamic component.	The selector depends on generated classes, position, or markup that changed.	Use a durable selector such as an application-owned test ID and verify it resolves to the intended element.
Large parts of the page stop reporting real changes.	The ignored area is too broad.	Reduce it to the smallest dynamic component and use Layout matching for content that can vary while its structure still matters.
Dynamic text differs but the test should still check alignment.	A full ignore removes the structural signal as well as the content difference.	Apply Layout matching to the relevant region or checkpoint instead of ignoring it entirely.
The region moves slightly between runs.	The change is positional rather than arbitrary content variation.	Consider a Floating region with an appropriate bounded movement allowance rather than an ignore region.

5. Performance, reliability, and cost considerations

An ignore annotation changes what Eyes assesses; it does not make a flaky selector reliable or ensure the page has finished rendering. Wait for the relevant page state before capturing, and keep selectors stable. Avoid hiding an entire panel just to eliminate intermittent differences: a narrowly scoped region preserves more useful comparison coverage.

Keep the functional and visual responsibilities explicit. A visual ignore cannot prove that a dynamic component loaded correctly, contains the expected data, or responds to interaction. Add ordinary Playwright assertions for required behavior and reserve Eyes for the visual contract that remains meaningful. No ignore-region performance or cost figures are established by the cited documentation, so do not assume this option changes runtime or billing.

6. Or skip the browser setup

If you need a screenshot artifact without configuring browser capture, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns an image or PDF; the example below saves a WebP screenshot. See the ScreenshotNeo API documentation for its parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture, and each step can be turned off. Bot checks, blank pages, and failed loads are never billed; responses include X-Page-Verdict and X-Billed headers. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. These screenshots are useful as capture artifacts; they do not replace Eyes checkpoint comparison or its ignore-region behavior.

Sign up free for 1,000 screenshots a month, with no card required.

7. FAQ

Does an ignored region still get checked for visual regressions?

No. Differences in the ignored area are excluded from visual assessment, which is why separate functional assertions may be needed.

Can I use Layout matching for only a dynamic section?

Yes. Applitools’ guidance describes applying Layout treatment to selected regions when content may change but structure and relative positioning matter.

Are Playwright ignoreRegions examples identical in every Eyes SDK?

No. The example here uses the documented Playwright locator API. Other integrations have their own APIs and should be checked against their own documentation.

Sources

• Applitools documentation: Playwright checkpoint options and integration guidance.
• Applitools: Adding Ignorable Regions: dashboard workflow and examples of dynamic areas.
• Applitools: Match Regions: region comparison behavior and match-level distinctions.