The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →To exclude a changing region from Chromatic’s visual comparison, add data-chromatic="ignore" to its element, use the chromatic-ignore CSS class, or configure an ignoreSelectors selector. Chromatic ignores pixels inside the matched element, but its size and position can still trigger a visual difference. If the changing value is part of what you want to test, keep it visible and make its inputs deterministic instead.
Choose whether to hide the region or stabilize it
First decide whether the changing content is genuinely outside the scope of the test. Ignoring a region removes its pixels from visual comparison; it does not make meaningful content repeatable.
As an Amazon Associate I earn from qualifying purchases.
| Situation | Recommended approach | What remains tested |
|---|---|---|
| An isolated timestamp, ad, video frame, or other intentionally variable area is out of scope | Mark the element with data-chromatic="ignore" or chromatic-ignore, or configure ignoreSelectors |
The rest of the story is compared. The ignored element’s dimensions and position can still matter. |
| Random values or current time affect a component you want to validate | Use stable fixtures or seeded randomness; freeze or mock the clock | The component stays visible and is tested with repeatable inputs. |
| CSS animation, transition, video, or GIF changes between captures | Check Chromatic’s default animation handling before adding a workaround | The capture can still test the component’s selected state. |
| A JavaScript animation changes what appears in the capture | Disable the animation in Chromatic or wait/assert that it has completed; ignore it only if it is out of scope | The selected or final stable state remains testable when disabled or awaited. |
| You do not want a visual snapshot for a story, or need captures only at selected moments | Disable the story snapshot or automatic integration snapshot, then take targeted snapshots where supported | A disabled capture is not compared; targeted captures remain available where supported. |
Ignore one element or a set of elements
Add the marker directly to the element when you control its markup. For example:
<video data-chromatic="ignore" src={src} controls />
<p className="chromatic-ignore">Published on: {datePublished}</p>For multiple elements or markup you cannot conveniently change, use ignoreSelectors, for example ignoreSelectors: ['.product-price']. Chromatic documents this option for Storybook and supported integrations; its configuration location depends on the integration and version, so use the instructions for the one in your project.
Ignored pixels do not mean ignored layout
Chromatic’s ignored-element guidance warns that changes in an ignored element’s dimensions can still cause a diff. Keep its width, height, and relative position stable, or stabilize the content and layout another way. A selector that matches the right element can still leave a snapshot unstable if that element expands, collapses, or shifts surrounding content.
Make meaningful dynamic values repeatable
If a changing value is part of the interface you intend to validate, do not hide it just to silence a diff. Chromatic recommends using fixed test data or seeded randomness for generated values, and a fixed clock for output based on the current date or time. This keeps the content visible while making successive captures comparable.
- Use the same fixture values on each run for generated content.
- Seed random generators when randomized output is under test.
- Freeze or mock the clock when dates, times, or relative-time labels appear in the UI.
- Keep the layout stable as well as the data if the test is meant to catch layout changes.
Understand Chromatic’s animation handling
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 alter the captured frame in supported configurations. Check your configuration before adding a separate workaround for these animation types.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Chromatic does not automatically control JavaScript animation libraries. Disable JavaScript-driven animation during Chromatic runs, or assert that it has completed before the capture. A delay can be appropriate when the page needs time to settle, but it can mask timing symptoms without fixing the underlying instability.
Disable a whole snapshot only when that is the intent
Ignoring an element preserves comparison of the rest of the capture. Disabling a snapshot removes that capture from visual comparison, so it is a broader choice.
- For Storybook,
chromatic.disableSnapshotcan disable snapshotting at story, component, or project level. - For Vitest, Playwright, or Cypress integrations,
disableAutoSnapshotturns off the automatic end-of-test capture so tests can take snapshots at selected points.
There is also a billing difference: 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 usage is the deciding factor.
Rank #4
Or skip the browser setup
If your goal is to capture a website screenshot rather than compare a Storybook component in Chromatic, ScreenshotNeo provides a screenshot API with a single GET request. For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; and its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
Quick Recap
Best Value
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.
