Welcome to Chromatic, the visual testing tool for Storybook made by Storybook maintainers. This quick guide shows you how to get the most out of Chromatic.
Chromatic supports every view layer Storybook supports out of the box. React, Angular, Vue, and many more.
Chromatic is a Storybook addon that automatically turns your stories into visual test specifications.
The addon uploads your Storybook bundle to our Capture Cloud infrastructure where your tests run in parallel in a consistent browser environment.
Diff Detector renders the UI of each story and takes a visual snapshot. Snapshots are compared to “baselines” –the last known good state of stories. If there are visual changes we notify you in a PR, email, or via CI.
You then review changes using Merge Manager, a web interface that helps identify bugs and update baselines. Tests pass when there are no changes or all changes are accepted.
storybook-chromatic package from NPM. Storybook 3.4 and above is required.
npm install --save-dev storybook-chromatic
Then import the package inside your
.storybook/config.js after importing Storybook itself.
Next: Run your first test
🎉That was easy. Now you’re ready to run your first Chromatic test.