Visual Regression Testing with Storybook's Chromatic

When building a design system or component UI it becomes more and more difficult to catch visual bugs as the project scales. This is especially true when changing one component affects other components that use it, and QA doesn't know to check every component it's related to.

Visual regression testing is an extra layer of security there, and Storybook's Chromatic is the most polished one I have tried. So let's set a new project up and show off some of the features Chromatic offers.

00:00 - Introduction
01:40 - Setting up a new Storybook
03:12 - Create our project on Github
04:43 - Walking through Chromatic setup
10:00 - Reviewing changes in the dashboard
12:34 - Continuous Integration (CI) setup
18:27 - Troubleshooting CI not working
20:01 - Solution to CI not working
21:25 - CI working
23:31 - Adding PR step in Chromatic
26:49 - Auto updates in Github Actions on approval/denial
29:05 - One final PR to fix bug that was denied
31:33 - Wrap-up

#chromaui #storybook #testing