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.
What is 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.
You can solve this problem by using visual testing tools. When you introduce a code change, they visually diff image snapshots of your components to previous baseline versions. 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
You’ll need to be using the Storybook 8 beta to use the Visual Tests addon. If you initialize a new project in Storybook 8 using npx storybook@next init, the addon will be installed 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
Workflow
Once setup is complete, when you next load Storybook, you’ll see a new addon panel for Visual Tests. 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 Storybook 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.
Top comments (0)