Ignore stories and elements

Sometimes a component’s UI changes every render or contains content like video/animation that is impossible to test consistently. This triggers visual changes every time you test even though nothing in the component code has changed.

It’s easy to tell Chromatic to ignore stories or DOM elements when looking for changes.

Ignore elements

Ignore stories

You can omit stories from Chromatic testing using the disable story parameter:

storiesOf('Component', module).add('story', () => <story />, { chromatic: { disable: true } });

You can use Storybook’s parameter inheritance to whitelist stories if you want to implement Chromatic incrementally:

// In .storybook/config.js
import { addParameters } from '@storybook/react'; // <- or your app layer

addParameters({ chromatic: { disable: true } });

// In the components you'd like to enable Chromatic for
storiesOf('Component', module)
  .addParameters({ chromatic: { disable: false } })
  .add('story', () => <story />);

You can also import isChromatic from 'storybook-chromatic/isChromatic', a function that returns true when running inside Chromatic.

import isChromatic from 'storybook-chromatic/isChromatic'

if (!isChromatic()) {
  storiesOf('Component', module).add('story', () => <story />);


## Ignore DOM elements

Add the `.chromatic-ignore` CSS class to elements in your component you want
Chromatic to ignore.

import React from 'react';

export default function MyComponent() {
  return (
        This date will always change so ignore it:{' '}
        <span className="chromatic-ignore">{new Date()}</span>
        Also ignore the animated gif:

How does it work?

Chromatic uses the rendered visual output at the pixel level to determine whether components’ have changed. Setting the .chromatic-ignore class instructs the diffing algorithm to ignore the pixels within the bounding rectangle of ignored elements. It’s important to ensure the calculated bounding rectangle fully covers the changing content.