How to Ignore Dynamic Content in Happo Visual Regression Tests

To handle dynamic content in Happo visual regression tests, first identify what is changing. Let Happo silence animations and wait for asynchronous assets and fonts; make meaningful app states deterministic; use color-delta tolerance only for small pixel noise; and use ignored diffs only when the changing region is intentionally outside the test. Happo’s reviewed documentation does not provide enough detail to safely prescribe a DOM attribute recipe for its dataHappoHide metadata, so do not infer one from the field name.

This guide covers Happo’s documented stabilization and review concepts, a practical workflow for isolating flake, and how to decide whether to fix the test state or suppress a diff.

1. Identify the source of the changing pixels

Before changing configuration, reproduce the comparison and classify the variation. The right fix depends on whether pixels move because of capture timing, a legitimate application state, a noisy rendering difference, or an external resource.

Cause	Clues	First response
Animation or transition	The same element appears at different points in a motion sequence.	Start with Happo’s automatic animation silencing. Check whether application code starts motion after capture begins.
Asynchronous rendering, fonts, or assets	Text wraps differently, images appear late, or content shifts between snapshots.	Start with Happo’s wait behavior, then make the fixture and readiness condition repeatable.
Application state or data	A timestamp, random value, rotating item, personalized response, or open/closed widget changes.	Set a fixed test state or drive the UI to a known state before capture.
Small rendering noise	Only subtle anti-aliasing or image-compression differences remain.	Consider color-delta tolerance; it is a pixel-noise threshold, not an element-specific ignore rule.
Outside network resources	Third-party content or requests vary by run or environment.	Identify the host and assess whether Happo’s hostname allow/block controls fit; verify current documentation before configuring them.

Happo’s Storybook integration describes interaction tests that drive a component into states such as loading, error, hover, or an open menu before the screenshot. Happo also documents Cypress and Playwright integrations. Use the integration that matches your setup to make the captured state explicit.

2. Start with Happo’s capture stabilization

Happo says it automatically silences animations and waits for asynchronous assets and fonts. Begin there before suppressing a difference. These behaviors address common timing variation while preserving the value of detecting a genuine UI change.

Re-run the affected comparison and inspect which region changes.
Check whether the changing content is still animating, loading, or waiting on a font or asset when the snapshot is taken.
If the state is app-specific, make it deterministic in the fixture or interaction sequence. Use fixed data and explicit actions rather than relying on a live timer or external response.
Re-run the comparison. If the remaining difference is small pixel noise, evaluate color-delta tolerance. If it is a specific region that should not be reviewed, consider an ignored diff.

Happo’s documentation describes the stabilization behavior, but the research available for this article does not establish a configuration switch or code snippet for it. Follow the current documentation for your Happo integration rather than adding guessed configuration.

3. Make meaningful UI states repeatable

Dynamic content is often a sign that the snapshot reaches the page in an uncontrolled state. For content that matters to users, preserve the visual test by controlling its inputs instead of hiding it.

Use fixed fixture data for dates, prices, user names, and list ordering.
Drive interactive components to a known state before capture: for example, explicitly open a menu or wait until a loading state has finished.
Stub or control application-owned responses where the test environment supports it.
For Storybook, use interaction tests to reach the exact state the story is intended to document.
When an external resource is the source, record its hostname and determine whether the variation is expected or should be excluded from the worker’s requests.

Do not make a changing region disappear just because it is inconvenient if its content or behavior is part of the UI contract. A deterministic state usually gives a more useful regression signal.

4. Use color-delta tolerance for small pixel noise

Happo documents color-delta tolerance for treating minor rendering differences as noise, including examples such as image-compression noise and anti-aliasing. Use it when the compared result is effectively the same to a reviewer but small pixel-level variation creates distracting diffs.

Tolerance does not identify a DOM element or understand whether a widget is semantically dynamic. Raising a threshold can also make a real visual regression less visible. Keep the threshold appropriate to the rendering noise you observed and review the resulting comparisons.

5. Ignore a specific diff only when the scope is intentional

Happo’s API reference lists operations to create and delete ignored diffs. Treat an ignored diff as a review decision: it can suppress the unwanted movement, but it can suppress a real regression in the same area too. Keep the ignored scope narrow, document why it is ignored, and revisit it when the underlying UI changes.

The API reference also shows an optional dataHappoHide Boolean in ignored-diff details. The available reference excerpt does not explain the exact markup, where that metadata is applied, or how to use it in a test. Do not assume it means you can add a particular HTML attribute to an element. Check the current Happo integration documentation for supported syntax before implementing a hide mechanism.

6. Investigate recurring flake and outside requests

Happo exposes a flake listing with filters for project, component, variant, target, and SHA. Use those filters to find whether the same example or target fails repeatedly, then compare the failure evidence with the changing region. This can help distinguish timing, data, asset-loading, and network causes before you choose a suppression method.

Happo announced hostname allow/block-list controls for snapshot requests on September 23, 2026. The announcement said the option was off by default at publication and described keeping requests to unallowed hosts from leaving the worker. Confirm the current package documentation for syntax, defaults, and rollout status before relying on the behavior. The announcement also reported one customer reducing flaky examples from about 2,000 to about 20; that is Happo’s report about one customer, not a typical or independently verified result.

7. Troubleshooting

Symptom	Likely cause	What to do
The same animation differs from run to run.	The page or component continues to animate around capture time.	Begin with Happo’s animation silencing. Check for app code that starts or restarts motion after the snapshot setup.
Text or layout shifts between captures.	A font or asynchronous asset is not ready, or the data differs.	Check Happo’s wait behavior, then control the fixture and ensure the capture reaches a repeatable state.
A live widget changes even after stabilization.	The variation comes from application state or an outside request.	Trace the data source. Fix the state if it matters; investigate request-host controls if the source is external.
Color-delta tolerance hides too much.	The threshold is broad enough to absorb meaningful changes.	Reduce the tolerance and fix state variance directly. Do not use a broad noise threshold as a substitute for a targeted decision.
You cannot find the documented hide attribute or option.	The reviewed API excerpt does not specify how `dataHappoHide` is applied.	Do not guess the markup. Check the current documentation for the exact integration and version you use.
Flake appears only in one target or variant.	The environment, fixture, asset, or network conditions differ across targets.	Use Happo’s flake filters for target, variant, component, project, or SHA to narrow the pattern and compare the capture conditions.
A hostname control has no effect.	The feature’s current package syntax, default, or availability may differ from the announcement.	Verify the current package documentation and rollout status before diagnosing the request policy.

8. Performance, reliability, and maintenance

Prefer fixing repeated work at its source. A deterministic fixture avoids repeatedly reviewing the same incidental movement and keeps meaningful changes visible.
Keep ignored regions maintainable. Record why each ignored diff exists and revisit it when the component changes, so old suppressions do not silently outlive their purpose.
Use tolerance sparingly. It is suited to small rendering noise; overly broad tolerance can reduce the chance of noticing a real visual change.
Control network variability deliberately. Outside resources can make captures depend on systems beyond your application. Confirm the current hostname control behavior before making it part of a reliability plan.
Do not infer cost or speed gains from a flake anecdote. The available source reports one customer example, not a general benchmark.

9. Or skip the browser setup

If your goal is to capture a page rather than maintain a visual regression test, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. 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

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}`);

Cookie banners, popups, and chat widgets are removed before the shot.
Bot checks, blank pages, and failed loads are never billed.
An MCP server lets AI agents use screenshot tools.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

10. FAQ

Does an ignored diff stop Happo from capturing the page?

The reviewed API reference describes ignored diffs as diff operations. It does not say they prevent the page capture itself.

Should I ignore a timestamp that changes every run?

If the timestamp is meaningful UI, make the test input deterministic. If the region is intentionally outside the visual contract, use a narrowly scoped supported ignore after checking the current integration syntax.

No. The documented purpose is to treat minor pixel differences as noise; it is not a semantic element selector.

Where can I find Happo’s exact hide syntax?

Use the current documentation for your Happo integration. The available API reference identifies optional dataHappoHide metadata but does not establish its exact DOM usage.