Sign inSign up

The Chromatic Visual Tests addon for Storybook

Bring the power of Chromatic into Storybook. Run and review visual tests right from the addon panel

loading
Varun Vachhar
— @winkerVSbecks
Last updated:

Chromatic has quickly become a must-have visual testing tool for front-end teams. It catches regressions by taking pixel-perfect snapshots of your components, making it a breeze to ship UI updates without worrying about sneaky visual bugs. It's used by leading teams across the globe – including the BBC, Adobe, Monday.com, and Netlify.

This year, we've been working on a way that you can bring Chromatic's visual testing workflow right into Storybook.

Read on to learn more about the addon and to sign up for early access.


CI/CD is for teams, the addon is for you

Chromatic now integrates with Storybook as a CI job, ensuring that dev teams have certainty that the UI meets company standards.

However, as an individual developer, sometimes you just want to quickly test your changes before opening a pull request. Some folks reported having to wait up to 30 minutes for CI jobs to complete. You need a faster feedback loop.

The Visual Tests addon brings the power of Chromatic right into Storybook, so you can run visual tests without waiting on CI.

Faster feedback loop for combining Storybook with Chromatic

The addon workflow

With the Visual Tests addon, you can trigger Chromatic visual tests “on-demand” from your local Storybook instance. These tests are executed in Chromatic’s parallelized cloud infrastructure and report back the results in your Storybook.

Here’s what the workflow looks like:

  1. Build components in Storybook as usual
  2. Click a button to run visual tests in major browsers
  3. Get warned directly if components don’t look right
  4. Fix UI regressions and carry on

The addon complements your existing CI workflow. By leveraging git history, it reconciles "on-demand" test runs in Storybook with the tests executed in CI, preventing redundant test runs.

See the impact of code changes across stories to pinpoint regressions

See the impact of code changes across stories to pinpoint regressions.

Test in multiple browsers

Visual Tests run in real, cloud browsers to simulate how users will actually experience the UI. Click the “Run tests” button to get started.

Untitled

View all changes in the sidebar

When visual changes or errors are detected in stories, the stories that need attention will be highlighted in the sidebar.

Untitled

Pinpoint visual changes

Go to a story to view its visual changes. By default, the changes between the baseline and latest screenshot will be highlighted in neon green.

visual-tests diff-less-mouse.gif

Verify if changes are intentional

There are two types of changes: improvements and regressions. If a change is intentional, “Accept” it to update the visual baseline for that story. If you find a regression, fix it and run tests again to confirm your fix.

visual-tests baseline.gif

Sign up for early access

The Visual Tests addon is still in early access, headed soon into public beta, and we need your feedback to speed it into a full release. Sign up below to get early access (with free usage) and project updates.


October 2023 improvements

  • Added support for the merge_group event in the GitHub Action. (Kudos to @mhemmings for this contribution.)
  • Improved Chromatic’s Content Security Policy to clear console noise.
  • Improved CLI to fix dependency tracing for monorepos with no package.json at the repository root.
  • Enabled the ability to override commit SHA on GitHub Action for issue_comment events
  • Prevented error from being thrown if the DOM of the head or base test does not contain any closing tags.
  • Improved loading UX of the Retry Build button

Fixes

  • Resolved the issue with Storybook links being duplicated in Figma Dev Mode when the user added a link to the Chromatic web application instead of the hosted Storybook.
  • Resolved bug where privately hosted Storybooks did not redirect to the correct login URL
  • Resolved bug where mode names with hyphens would break the Inspect Snapshot UI

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

Introducing the new Chromatic website

Explore a year of improvements, curated on our new website
loading
Dominic Nguyen

Putting Pets in Pajamas with Chromatic’s E2E integrations

Validate functionality and UI in one workflow
loading
Joe Vaughan

Story Modes are here

Simultaneously test themes, viewports, locales, and a11y—plus some early features access and more
loading
Jarel Fryer
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.