How to Ignore Dynamic Content in Chromatic Snapshots

To ignore a changing region in a Chromatic visual snapshot, mark its element with data-chromatic="ignore" or the chromatic-ignore CSS class. For multiple elements, use Chromatic’s ignoreSelectors option where your Storybook or integration configuration supports it. Chromatic omits the marked area’s pixels from comparison, but its size and position can still cause a diff.

If the changing value is meaningful to the component, keep it in the snapshot and make its input repeatable instead: use fixed fixtures or seeded randomness, and freeze or mock the clock for dates and times. This preserves visual coverage while removing accidental variation.

1. Choose the fix that matches the changing content

What changes	Use	What remains tested
An isolated timestamp, ad, video frame, or other region outside the test’s scope	`data-chromatic="ignore"`, `.chromatic-ignore`, or `ignoreSelectors`	The rest of the story; the ignored element’s dimensions and position still matter.
Random values or current time that are part of the UI you care about	Fixed test data, seeded randomness, or a fixed clock	The component and its visible output, with repeatable inputs.
CSS transitions or animations, video, or an animated GIF	Check Chromatic’s automatic pausing behavior before adding a workaround	The captured component state, subject to the animation settings in use.
A JavaScript animation library changes the captured state	Disable it in the Chromatic run or wait for/assert completion; ignore the region only if it is out of scope	The final or selected stable state, when disabled or awaited.
A story should have no visual snapshot	Use `chromatic.disableSnapshot`; for supported test integrations, consider `disableAutoSnapshot` and take targeted snapshots	No automatic snapshot for the disabled capture; targeted captures remain possible where supported.

2. Ignore a single element with a DOM marker

Add the marker to the element whose pixels should not be compared. These JSX examples can be used in a Storybook component:

function ArticleMeta({ datePublished, videoUrl }) {
  return (
    <section>
      <p className="chromatic-ignore">Published on: {datePublished}</p>
      <video data-chromatic="ignore" src={videoUrl} controls />
      <h1>The article title remains visually tested</h1>
    </section>
  );
}

The marker belongs on the element that encloses the unstable pixels. Keep that element’s layout stable: changing its width, height, or placement can still affect the snapshot diff.

3. Ignore several elements with selectors

Use ignoreSelectors when several elements share a selector or you want to keep Chromatic-specific handling out of component markup. The setting’s location depends on the Storybook integration or test integration and version, so put it in the configuration documented for the integration you use.

// Example option value; add it to the supported Chromatic configuration
// for your Storybook or integration version.
const chromaticOptions = {
  ignoreSelectors: ['.product-price', '[data-volatile="true"]'],
};

This is an illustrative option object, not a complete project configuration file: integration configuration differs. Confirm that your installed integration accepts the option and that the selectors match the rendered DOM at capture time. Avoid broad selectors that hide content you intended to validate.

4. Make important changing values deterministic

Do not ignore a value just because it changes between runs if its appearance is part of the component contract. Stabilize its input instead.

Random values: use a fixed fixture or a seeded random source so each run renders the same values.
Current date or time: freeze or mock the clock in the test environment, or pass a fixed timestamp into the story.
Server-backed content: use stable test data or a controlled fixture so network state does not alter the rendered story.

Deterministic content keeps the meaningful pixels under comparison. It also makes a future visual change easier to interpret because the input has not shifted independently.

5. Check animation behavior before masking pixels

Chromatic automatically pauses CSS transitions, CSS and SVG animations, videos, and animated GIFs. CSS animations default to pausing at the end of their cycle; the pauseAnimationAtEnd setting can change the captured frame in supported configurations. JavaScript animation libraries are not automatically controlled.

For JavaScript-driven animation, disable animation during Chromatic runs or wait for and assert the intended state before capture. A delay can be appropriate when the page needs time to settle, but it can also hide timing symptoms without fixing the underlying instability. Ignore the animated region only when that region itself is outside the test’s scope.

6. Ignore a region or disable the snapshot?

Ignoring an element keeps the rest of the capture under visual comparison. Disabling a snapshot removes the entire capture, so use it only when no visual assertion is wanted for that story or automatic capture point.

For a Storybook story, chromatic.disableSnapshot can disable snapshotting at story, component, or project level.
For Vitest, Playwright, or Cypress integrations, disableAutoSnapshot disables the automatic end-of-test capture so tests can take snapshots at selected points, where supported.

There is a cost difference as well: Chromatic’s billing documentation says an ignored area remains part of a captured snapshot and still generates billed snapshot usage, while a disabled snapshot generates zero billed snapshots. Check the current plan rules if billing determines which approach you choose.

7. Troubleshooting

Symptom	Likely cause	What to do
The ignored element still appears to cause a diff	The element’s size or position changed, or the changing pixels lie outside the marked element.	Inspect the rendered DOM and snapshot diff. Mark the correct containing element, then stabilize its dimensions and placement.
A selector does not suppress the changing area	The selector does not match at capture time, or `ignoreSelectors` is placed in an unsupported configuration location.	Check the actual rendered selector and the configuration instructions for your integration and version.
The component still differs after ignoring a timestamp	Other content or layout is unstable, or the timestamp changes the element’s dimensions.	Stabilize the clock and text layout, and inspect the rest of the diff. Keep the timestamp visible if it is part of the intended test.
A JavaScript animation is captured at inconsistent frames	Chromatic’s automatic pausing does not control JavaScript animation libraries.	Disable the animation for Chromatic or wait for and assert the selected state before snapshot capture.
Disabling a snapshot removes more coverage than expected	A whole story or automatic capture point was disabled instead of one region.	Use an element marker or selector for a local exclusion; use targeted snapshots where the integration supports them.
Snapshot usage remains billed after adding an ignore marker	Ignored pixels still belong to a captured snapshot.	Review current billing rules. Disabling the entire snapshot produces zero billed snapshots according to Chromatic’s billing documentation, but also removes that capture from comparison.

8. Performance, reliability, and cost considerations

An element marker or selector changes what is compared; it does not remove the page or story rendering work. Keep ignored regions narrow so they do not hide useful regressions, and prefer deterministic inputs when the UI itself is under test. Stable fixtures, a fixed clock, and explicit animation state also reduce ambiguity when diagnosing a diff.

Use snapshot disabling selectively. It removes visual coverage for that capture, while an ignore marker preserves comparison of the rest of the story. For cost decisions, remember that ignored areas still count as captured snapshots under the cited Chromatic billing guidance; verify current plan rules because billing terms may change.

Or skip the browser setup

If you need a rendered website screenshot outside Chromatic, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF. It accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off.

For an image response, use cURL:

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

See the ScreenshotNeo API documentation for request options. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

9. FAQ

Does ignoring an element remove it from the page?

No. The marker tells Chromatic to disregard that element’s pixels during visual comparison; it does not mean the element is removed from the rendered page.

Can I ignore every dynamic element with one setting?

You can target multiple elements with selectors where your integration supports ignoreSelectors, but broad exclusions can hide real visual regressions. Prefer the narrowest selectors that match the out-of-scope regions.

Should I ignore a date that changes every day?

If the date display is part of what the story should validate, pass a fixed date or freeze the clock. Ignore it only when its pixels are intentionally outside the test.

Do ignored areas reduce snapshot billing?

No, according to Chromatic’s billing documentation: the capture remains a billed snapshot. Disabling a snapshot is the option that generates zero billed snapshots, at the cost of removing that visual capture.