Visual testing with Chromatic

fundamental-styles uses Chromatic by Storybook to

• create and compare image snapshots of components, for new commits
• catch snapshot differences and require approval from maintainers for the changes, before merging PRs

The image snapshots are taken and compared on the Chromatic cloud so that there are no platform inconsistencies related to OS or display drivers. This process is triggered as a workflow action when you push new commits to your branch. The comparison will be created only if your last commit has a message [ci visual]. It is done to avoid the task being executed after each commit of the PR.

You may also trigger this process locally, like so:

git clone git@github.com:SAP/fundamental-styles.git
cd fundamental-styles
npm install

...make your code changes...

npx chromatic --project-token=PROJECT_TOKEN --build-script-name=storybook:chromatic

You should be able to access the PROJECT_TOKEN once you sign up on Chromatic using your public GitHub account.

For more details see:

• Development Guidelines
• Chromatic Docs