Chromatic CI/CD workflow

This workflow runs on every pull request and pushes to main branches, but only if the CHROMATIC_PROJECT_TOKEN secret is set up in the repository. This workflow is responsible for running the visual regression tests using Chromatic, a software as a service that integrates with Storybook to detect visual changes in the UI components and pages.

note

Find out more about what Chromatic is and does here.

SaaS setup

Chromatic has a robust free plan that allows for 5000 free snapshots per month, which should be sufficient for the prototyping phase.

To minimise unnecessary snapshots, the workflow only runs on any pull requests, or pushes to the main branch. This means that the workflow will not run on pushes to feature branches, and will only run on pushes to the main branch if the pull request has already been merged.

Turbosnap is also enabled, which means that Chromatic will only take snapshots of the pages/components that have changed, instead of all of them.

The settings for the workflow can be found in .github/workflows/chromatic.yml.

Prerequisites

The project you want to connect to Chromatic should already be on GitHub.

Set up

To set up Chromatic, follow the steps below:

Sign up/sign in to Chromatic here with your GitHub account and add a project by clicking on "Choose from GitHub".
Choose the repository you want to connect to Chromatic.
You do not need to follow the steps outlined on the next page. The only important step is the project token, which is displayed in the page, or can also be found in the project settings:
Go to the GitHub repository secrets page, by going to Settings > Security/Secrets and variables > Actions:
Add and save the CHROMATIC_PROJECT_TOKEN secret with the value of the project token obtained in step 3.