How to Ignore Dynamic Content in Percy Visual Comparisons

To ignore dynamic content in Percy visual comparisons, first decide whether the changing component’s size, position, or styling is part of the behavior under test. If it is, keep the component visible and make its data repeatable with fixtures or mocked API responses. If it is irrelevant, hide or ignore only the smallest affected region during capture. Disable motion and wait for the page to settle before snapshotting.

This distinction matters: hiding a changing element can reduce noise, but it can also hide a real layout regression. Percy has described an Ignore Regions feature, but the exact option name, selector syntax, and SDK support depend on the integration and version. Check the current documentation for your installed SDK before adding Percy-specific configuration; do not copy an unverified API signature.

1. Choose what the comparison should validate

Dynamic content can change between runs even when the page’s visual structure has not regressed. Examples include timestamps, personalized content, randomized listings, dashboard metrics, live counters, notifications, ads, and content that updates from an API.

Approach	Keeps content visible?	Checks its layout?	Use it when
Fixtures or mocked API responses	Yes	Yes	Data changes, but the populated component’s layout matters.
Hide or ignore a targeted region	Usually no, or it may be masked	Not reliably for the affected region	The changing content is outside the purpose of this comparison.
Disable motion and wait for stability	Usually	Yes	Animation, transitions, carousels, spinners, or media timing cause variation.
Loosen comparison sensitivity	Yes	Potentially less reliably	Only after fixing known sources of variation, for small understood rendering noise.

Keep the component visible when its geometry matters

For a dashboard or data-driven widget, return stable fixture data or mock the API response used by the page. The component remains populated, so the comparison can still catch changes to spacing, alignment, size, and styling.

Use a stable state that represents a useful test case: for example, a realistic label length, a known number of rows, and values that exercise the intended layout. Avoid a fixture that is so small or empty that it stops testing the component’s normal geometry.

Ignore content only when its visual behavior is out of scope

A timestamp or unrelated live counter may be safe to ignore if the test is about a different part of the page. Target the smallest region possible. Do not ignore a parent container if its dimensions, placement, or interaction are part of the visual behavior being validated.

Masking or hiding behavior can differ by Percy integration. Confirm whether the installed SDK removes, masks, or otherwise treats the selected region, and verify that the behavior leaves the rest of the page under comparison.

2. Stabilize the page before taking a snapshot

1. Control the state. Use fixtures or a mock response for data that should remain visible. Ensure the test reaches the same application state on each run.
2. Stop moving content. Disable or pause animations, transitions, carousels, and autoplay media where those effects are not under test.
3. Wait for the intended state. Let required content render and the page settle before triggering the Percy snapshot. Prefer an application-specific readiness condition over an arbitrary delay when your test setup allows it.
4. Target unavoidable noise narrowly. Use a documented ignore-region or capture-time CSS option supported by your installed Percy integration.
5. Review the diff. Confirm that the changing region is handled and that nearby spacing, borders, and alignment are still compared.

Do not treat a longer wait as a universal fix. A page with live data can change again after waiting, and a fixed delay can make runs slower without making the content deterministic.

3. Configure Percy using the installed integration’s documentation

Percy changelog material describes Ignore Regions and Percy-specific CSS, including CSS configured at snapshot or global SDK configuration level. That is evidence these approaches have existed, but it does not establish current option names or compatibility for every SDK. The current selector syntax, supported integrations, and package-version requirements were not verified in the research for this guide.

Before writing configuration, identify the SDK and installed version in your project, then consult the official reference for that exact integration:

1. Find the Percy SDK or integration package in the project’s dependency manifest and lockfile.
2. Open the current official documentation for that integration and version.
3. Look up its documented ignore-region or Percy-specific CSS mechanism, including selector rules and whether the rule applies per snapshot or globally.
4. Apply the narrowest rule at the appropriate scope. Keep a note explaining why the region is outside the test’s purpose.
5. Run a comparison with the region changing and another with a deliberate layout change nearby. Verify that the first no longer produces irrelevant noise and the second remains detectable.

Do not guess an option name from a changelog excerpt or transfer a selector example from another SDK. If the installed integration does not document the behavior you need, use deterministic data or a supported capture-time styling mechanism instead.

4. Common problems and fixes

Symptom	Likely cause	Fix
The same text changes on every run	A timestamp, personalized value, live counter, or API result is nondeterministic.	Use a fixture or mock the response if the component matters; otherwise target only that content with a documented ignore mechanism.
A large region disappears from the comparison	The ignored selector matches a container or several elements.	Narrow the selector and confirm the integration’s matching behavior. Check that parent geometry still matters to the test.
The page is still different after adding a wait	Content continues to update, or the capture occurs before the actual ready state.	Make the source deterministic and wait for an application-specific stable state. A delay alone cannot stabilize live content.
Animation frames differ between captures	Capture timing changes which frame is visible.	Disable or pause motion when animation is not under test; wait for a defined state if a particular frame matters.
Percy does not apply the ignore rule	The syntax may not match the installed SDK, version, selector, or configuration scope.	Check the current documentation for the exact integration and confirm that the rule is attached to the snapshot or global configuration as documented.
Real visual regressions stop appearing	The ignored area is too broad, or comparison sensitivity has been relaxed too far.	Restore a narrower target or stricter comparison, then stabilize the actual source of variation.

5. Reliability, runtime, and comparison cost

Deterministic fixtures generally make comparisons easier to reproduce because they remove changing inputs while keeping the component visible. Targeted ignores can make a comparison less informative in the ignored area, so treat each one as a deliberate limit on what the test validates.

Waiting for stability adds time to capture runs. Prefer a condition tied to the state under test over a large fixed delay. Disabling irrelevant motion can reduce timing variation, while loosening comparison sensitivity may conceal genuine defects. Stabilize the source first, then adjust sensitivity only for remaining, understood noise.

Or skip the browser setup

If you need a clean screenshot for review or documentation rather than a Percy baseline comparison, ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL in one GET request and returns an image or PDF. See the ScreenshotNeo API documentation for parameters and response details.

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 Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides screenshot, page information, and PDF capture tools for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

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

Frequently asked questions

Should I hide a component or mock its data?

Mock the data when the component’s layout or styling is part of the comparison. Hide or ignore it only when its visual behavior is outside the test’s purpose.

Can I use Percy-specific CSS globally?

Percy changelog material describes CSS at snapshot or global SDK configuration level. Verify the supported configuration and syntax for your installed integration before relying on it.

Should I increase the comparison threshold?

First make inputs and capture timing stable. A more permissive comparison can hide real defects, so use it only for small rendering differences you understand.

Does a screenshot API replace Percy visual comparisons?

No. ScreenshotNeo returns screenshots or PDFs from a URL; Percy is the visual comparison service discussed here. Use a screenshot API when you need an image capture, and Percy when you need its visual validation workflow.