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.

You may also trigger this process locally, like so:

git clone [email protected]: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