Ignore regions

Exclude intentionally variable pixels while keeping the rest of a component covered.

Mark a region#

Existing Chromatic-compatible markers work:

html

<div class="chromatic-ignore">Content that changes every run</div>
<div data-chromatic="ignore">Another changing region</div>

Or declare selectors on a story:

export const Profile = {
  parameters: {
    framecheck: { ignoreSelectors: ['[data-testid="live-clock"]'] },
  },
};

chromatic.ignoreSelectors is supported when the corresponding Framecheck setting is not supplied.

Choose narrow selectors#

Mask the live timestamp, not its entire card, if the card's spacing and surrounding text should still be tested. Inspect the captured result to confirm the intended area is masked. A selector that does not match what you expect can hide too little or too much.

Masks remove visual coverage for those pixels. They do not stop network requests or remove sensitive content from the uploaded Storybook. Keep private data out of fixtures.

Changing ignore rules#

Changing selectors can make a comparison require review again. Review the new masked image deliberately rather than accepting it just because you changed configuration.

Prefer stable fixtures when possible#

A fixed test date or avatar preserves more coverage than hiding the entire element. Use masks for content that is intentionally variable and unimportant to the visual assertion.