How to Use Chromatic to Improve Frontend Development: A Practical Guide

In the rapidly changing environment of frontend development, it is extremely important to maintain consistent design, not allowing visual regressions to appear, and to make sure that the quality through different components is still in place. With aim, we added Chromatic, a next-level product that was developed for Storybook, to our development lifecycle. Chromatic gives an effortless way to cope up with this situation by incorporating automated visual testing and review workflows directly into your CI/CD pipeline.

This guide is based on my experience with Chromatic and exploring its workability in the software development with focus to frontend.

Intro to Chromatic?

Chromatic is a visual testing and UI review tool built specifically for Storybook, the popular open-source tool for developing and documenting UI components. Chromatic helps you ensure that your UI remains visually consistent by detecting changes in your components over time. Its key features include:

Automated Visual Testing: Detect visual changes in your components to prevent unintentional regressions.

UI Review Workflow: Team members can review, comment, and approve UI changes.

Snapshot Management: Automatically capture snapshots of your components and compare them against the previous versions.

Why we Use Chromatic?

To avoid Visual Regressions: Chromatic takes snapshots of UIs while they are being developed and immediately alarms you in case any unwanted alterations are found.

Speed up the Time for Review: Your team can highlight the visual changes they wish to discuss on a pull request (and these can now be instantly reviewed), so they can thus save on time during the pull request process.

Decrease Risks Due to Confusion: With the help of the automated testing and visual comparisons, developers can now safely introduce new code into the mainline.

Collaboration: By allowing designer, product manager, and other non-technical stakeholders to review and give comments on visual changes that are being made, Chromatic is also a tool for improving the synergy of teams from different departments/units.

Getting Started with Chromatic

Here are the practical steps to implement Chromatic in your development workflow.

Step 1: Set Up Storybook

Chromatic works hand-in-hand with Storybook. If you haven't set up Storybook yet, you'll need to start by installing it for your project.

Install Storybook: Run the following command in your project directory:

npx sb init

Start Storybook: After installation, you can start Storybook with:

npm run storybook

Add Components: Once Storybook is up and running, add stories for the components you want to visually test.

Example Button.stories.js:

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
  primary: true,
};

Step 2: Install Chromatic

With Storybook set up, you can now integrate Chromatic into your project.

Install Chromatic CLI: Install Chromatic as a dev dependency:

npm install --save-dev chromatic

Add Chromatic Script: Update your package.json to include a script for Chromatic. This will run Chromatic to capture your Storybook components:

{
  "scripts": {
    "chromatic": "chromatic --project-token <your-token>"
  }
}

The project-token is a unique identifier for your Chromatic project. You can obtain it by signing up on the Chromatic website and creating a new project.

Step 3: Publish Storybook to Chromatic

Next, publish your Storybook to Chromatic for visual testing.

Run Chromatic: Once you've set up the chromatic script, you can run the following command to publish your Storybook:

npm run chromatic
This command captures the current state of your Storybook and uploads it to Chromatic's cloud service. Chromatic will generate visual snapshots of each component and compare them to previous versions (if available).

My Approach Process using Chromatic

Step 1:Set Up Visual Regression Testing using “Build” Section

After the Storybook is uploaded, Chromatic will start automatically comparing new component snapshots with older versions to detect visual regressions.

Baseline Snapshots: On the first run, Chromatic captures baseline snapshots. These are used as the standard to compare against in future builds.

Review UI Changes: Chromatic provides an interface where you can review any detected changes. You can accept changes, flag regressions, or ask your team to weigh in.

Approve or Reject Changes: Team members can approve visual changes directly from Chromatic’s UI or integrate approvals as part of your pull request process using GitHub, GitLab, or Bitbucket integrations.

Step 2: Review Visual Changes in Pull Requests using “Review” Section

Chromatic integrates with platforms like GitHub, GitLab, and Bitbucket to display visual diffs directly in your pull requests. This means developers can see side-by-side comparisons of component changes before merging code.

Create a Pull Request: When a pull request is created, Chromatic automatically runs visual tests and reports any changes.

Approve or Comment: Team members can approve, request changes, or comment on specific UI snapshots directly from the Chromatic interface within the pull request.

Step 3: House Keeping by manage Snapshot Versions

As your project develops, manage and organize snapshots more effectively.

Snapshot Branching: Chromatic supports snapshot branching, meaning it can compare snapshots from different branches. This is useful for larger teams working on multiple features concurrently.

Clean Up Old Snapshots: Over time, you might accumulate old snapshots. Chromatic provides tools for managing and deleting outdated snapshots to keep your workspace clean.