Get started

Welcome to Chromatic, the continuous UI testing tool for Storybook made by Storybook maintainers. This quick guide shows you how to get the most out of Chromatic.

Chromatic supports all the view layers Storybook supports out of the box. React, Angular (beta), Vue (beta), and many more.

Workflow


Overview

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.

Chromatic Overview


Installation

Install the 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.

import 'storybook-chromatic';

Next: Run your first test

🎉That was easy. Now you’re ready to run your first Chromatic test.

Read next chapter