Sign inSign up

Visual Tests addon is here

Run Chromatic visual tests inside Storybook

loading
Dominic Nguyen
@domyen
Last updated:

Storybook 8 has arrived, and so has Visual Tests addon! The addon brings Chromatic’s cloud-based visual tests into Storybook, so you can catch visual changes on demand. No need to push a commit or wait for your CI pipeline to complete!

Here’s how Visual Tests addon works and how to get started with it today!

Why Visual Tests addon?

Originally, we built Chromatic as a CI tool that uses Storybook stories as baselines for visual tests. While CI testing is a crucial safety net for your work, waiting on CI can slow down your ability to iterate in development. The solution to this problem isn’t to stop testing. It’s to make sure that the test-to-dev feedback loop is as fast as possible.

Visual Tests addon solves this problem by providing Chromatic’s cloud-based visual testing directly inside Storybook. You don’t need to push code to trigger a test run. Instead, visually test the local code on your machine at the click of a button and receive results in seconds.

This workflow gives you a 10x faster feedback cycle. Make changes, run tests, and review differences, all without leaving development.

Visual Tests addon

Get started

First, upgrade your Storybook to Storybook 8:

npx storybook@latest upgrade

Check out Storybook’s guides for how to migrate from Storybook 6 to Storybook 8, or how to upgrade from Storybook 7 to Storybook 8.

💡
Visual Tests addon is also compatible with Storybook 7.6, but for the best developer experience, we recommend upgrading to Storybook 8.

Then, install and configure Visual Tests addon with the following command:

yarn add --dev @chromatic-com/storybook

After you install, you’ll see Visual Tests addon in your Storybook addon panel the next time you run Storybook. The addon’s onboarding flow will trigger instantly.

You can start your first visual test by clicking the ▶️ Play button in the Storybook sidebar. Behind the scenes, this sends your stories to the cloud: first to snapshot, then to test.

Visual Tests addon

The addon highlights which stories require your attention as 🟡 in the Storybook sidebar, and results will stream in as your tests complete.

Visual Tests addon test results

Any changes will be highlighted in Visual Tests addon tab. If the changes are intentional, accept them as new baselines for your future tests. If they weren’t intentional, fix the story, then re-run the tests with the ▶️ Play button.

Have any questions about using the addon? Consult Visual Tests addon docs, or reach out to Chromatic’s support in the Chromatic app.

What’s next?

With Visual Tests addon now released, our next focus will be optimizing test speed and ergonomics to give you the fastest feedback loop possible. We’ll share more updates in the future from Chromatic’s social media channels and future Storybook releases.

As Visual Tests addon bridges the gap between Storybook and Chromatic, it will also be a big part of our next major release, Chromatic 3.


FAQs

Is Visual Tests addon free?

Visual Tests addon uses the same pricing as Chromatic, which gives you 5,000 free snapshots per month. You can optimize your snapshot usage by enabling TurboSnap to only run visual tests of unchanged UI, which we detect by analyzing your component’s dependency graph.

I was using the addon for free as a beta tester – what happens next?

Thank you for helping us stress-test the addon! Now that the beta period has ended, snapshots from Visual Tests addon will be tracked in your Chromatic snapshot usage. Learn more about Chromatic’s pricing tiers, or please contact our support team if you have any questions.


Continue reading

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,482 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Chromatic 3

Visual testing integrations for Storybook, Playwright and Cypress, plus 4x faster visual tests, TurboSnap, and so much more
loading
Dominic Nguyen

Chromatic changelog: May 2024

New snapshot features including improved handling of GIFs, videos & animations. Alongside a few UI enhancements.
loading
Varun Vachhar

The power of visual testing

Learn how to perform visual tests to verify your application’s appearance
loading
Joe Vaughan
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.