Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes, via the Visual Tests addon. Learn how it works and try the beta today.
Why visual testing?
The challenge of UI testing is that functional tests don’t give you the complete picture of how your UI works. For example, testing a login button might confirm the button’s logic but it won’t detect that the button is now completely covered by the nav bar. It’s functional for your test, but not for your users.
Visual testing tools solve this problem. When you introduce a code change, they capture snapshots of your components and visually diff them against previous baselines. Then, you can either fix issues before merging to the main branch, or accept the changes and set new baselines for future tests. When combined with functional tests, this gives the best of both worlds: complete confidence that your app looks and works correctly.
Historically, visual testing takes place in CI as part of your PR review process. It’s so effective that we even built a cloud service called Chromatic that is used across the industry to automatically turn stories into visual tests.
The Visual Tests addon for Storybook brings a totally new approach, where you can now get visual diffs in Storybook at any stage of development. No need to wait on CI to confirm visual fidelity.
Get started
Install
To use the Visual Tests addon, you’ll need to be using the Storybook 8 beta. If you initialize a new project in Storybook 8 using npx storybook@next init, the addon will install automatically. If you upgrade an existing project using npx storybook@next upgrade, you’ll need to manually add the addon using npx storybook@next add @chromatic-com/storybook.
Learn more about setup in the docs.
Run your first visual test
Once setup is complete, you’ll see a new addon panel for Visual Tests when you next load Storybook. You can run your first test by clicking the ▶️ button in the Storybook sidebar:
Then, after running tests, you can view and inspect diffs in the addon panel:
If the changes are intentional, accept them to set new baselines. If not, fix the detected changes, then restart the process:
High fidelity, high performance
Chromatic is by far the fastest visual testing tool on the market, capable of processing thousands of stories per minute. But what’s fast in CI can feel slow in an interactive UI. So, as part of this addon’s development, we sped up the workflow by 78%. Faster tests make you more productive.
This aligns with the theme of Storybook 8’s improvements: performance. Among many other gains, you can now create 3x faster builds for testing workflows, and we quickened startup time in React projects by 20–40%.
Finally, we created a beautiful addon UX. You can view the test status of your stories in the Storybook sidebar, which highlights stories needing your attention in yellow. You can also filter the sidebar to only show stories containing changes.
Share your feedback
The Visual Tests addon is in public beta and is being actively used by projects of all shapes and sizes. We’d love your feedback to help get it ready for a first stable release as part of Storybook 8.0 and Chromatic 3.0.
Share any issues you encounter using Visual Tests addon with the Storybook and Chromatic team.
