October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk4 min

How to Ignore Dynamic Content in Percy Visual Comparisons

Choose between deterministic data, targeted suppression, and motion control based on whether the changing element’s layout matters to your Percy comparison.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To prevent irrelevant page changes from creating Percy visual diffs, first decide whether the changing content’s size and position matter to the test. For API-driven components whose layout you need to verify, use deterministic fixtures or mock the response so the component remains visible. For content unrelated to the assertion, hide it or use a targeted ignore region. For motion, disable or pause it and capture only after the page settles.

Choose a fix that matches what the test should prove

Dynamic text or data can change a screenshot without indicating a layout regression. Percy’s examples include timestamps, personalized content, randomized listings, dashboard metrics, and real-time counters. The important distinction is whether the component’s geometry is part of the visual behavior under test.

As an Amazon Associate I earn from qualifying purchases.

Approach Does content stay visible? Does the test retain layout validation? Best fit
Deterministic fixtures or mocked responses Yes Generally yes Changing API data when component spacing and alignment matter
Hide content or ignore a targeted region Hidden content does not; masking behavior depends on implementation Only if the region’s geometry is outside the test’s purpose Irrelevant, unpredictable content
Disable motion and wait for stability Usually Yes Transitions, carousels, spinners, or other timing-sensitive states
Loosen comparison sensitivity Yes Potentially weakens detection Small, understood rendering noise after other controls

Percy’s guidance recommends keeping populated components visible when their layout matters, and warns that hiding an element is appropriate only when its layout is not critical. Broad tolerance can conceal genuine defects, so stabilize the source of variation before considering it.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Stabilize data when the component itself is under test

For a dashboard or other API-driven page, make the test return repeatable data through a fixture or mocked API response. The component remains populated, allowing Percy to compare spacing, alignment, and styling instead of unrelated live values. Keep the fixture consistent across runs and ensure it exercises the state the test is intended to cover.

This is preferable to hiding a whole card or container when its dimensions, placement, or surrounding layout are assertions. If only one value is irrelevant, isolate that value rather than suppressing a larger region.

Hide or ignore only content outside the assertion

A changing timestamp, personalized greeting, live counter, ad, or notification may be a candidate for targeted suppression if the test does not cover it. Avoid suppressing a parent container if its size, position, or interaction matters: doing so can make a real visual regression disappear from the comparison.

Rank #2

Percy announced an “Ignore Regions” feature on October 26, 2022, as a way to address flakiness from dynamic data (Percy changelog announcement). Percy’s February 23, 2026 guide also discusses reducing false positives (Percy’s guide to reducing false positives).

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Do not copy an unverified ignore-region code snippet: the exact option name, selector format, supported integration, and package-version requirements depend on the SDK, and current syntax is not established here. Check the official reference for the particular integration and installed version before configuring an ignore region. Confirm in a test that the chosen behavior masks or excludes the intended pixels and does not undermine layout checks.

Stop motion and wait for a stable capture state

Animations, transitions, carousels, and autoplay media can produce different frames depending on capture timing, buffering, or network behavior. Disable or pause motion in the test environment where practical, and wait for the intended state before taking a snapshot. A stable, explicit state is more reliable than relying on a delay that may be too short on a slow run or unnecessarily long on a fast one.

Percy changelog material also describes Percy-specific CSS that can be supplied at snapshot or global SDK configuration level, including an iframe-hiding example. Treat that as historical feature evidence rather than a guarantee that a particular syntax works in every current SDK; verify current support before using it.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Apply the changes in this order

  1. Define the assertion: decide whether the changing element’s content, geometry, or neither is relevant to this comparison.
  2. Stabilize relevant content: use repeatable fixtures or mocked responses when the populated component’s layout must remain testable.
  3. Suppress only irrelevant variation: target the smallest region that can be ignored without removing geometry or behavior the test needs to validate.
  4. Control timing: disable or pause motion and wait for the required page state before capture.
  5. Review the resulting comparison: confirm the change removes noise without hiding a meaningful difference; avoid broad sensitivity changes that could mask defects.

Troubleshoot recurring Percy diffs

  • Text or metrics change while alignment looks stable: replace live data with a fixture if the component layout matters; otherwise consider a narrowly targeted ignore or hide behavior.
  • A whole card or section stops appearing in useful comparisons: the suppression target is probably too broad. Restore the container and isolate only the irrelevant content.
  • The diff varies from run to run despite stable data: look for animations, transitions, autoplay content, loading states, or capture timing, then make the state deterministic before snapshotting.
  • An ignore-region example does not work: verify the current API and selector syntax against documentation for the exact Percy integration and installed package version; do not assume historical changelog examples are current SDK instructions.
  • A threshold change clears noise but misses meaningful changes: revert or narrow the tolerance and stabilize the page at its source instead.

Or skip the browser setup

If you need a clean screenshot outside Percy’s visual-comparison workflow, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return an image or PDF; its capture options include custom CSS and JavaScript, selector waits, delay or network-idle waits, and hiding selectors. It removes cookie and consent banners, newsletter popups, and chat widgets before capture, with each step switchable. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and whether the request was billed. Its MCP server gives AI agents screenshot, page-info, and PDF-capture tools.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Example cURL request (see the ScreenshotNeo API documentation):

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

The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.