Back to blog

Introducing the Chromatic Visual Tests addon

Pinpoint UI bugs down to the pixel with Storybook

loading
Dominic Nguyen
@domyen
Last updated:

TLDR: We’re launching a visual tests addon for Storybook. It automatically QAs the look of all your components, tracks their appearance, and notifies you of visual changes right inside your Storybook env. Sign up here for early access!


Testing UIs is awkward because you have to account for tons of design details. “Did I pick the right shade of gray?" – "Did margins collapse or stack?" The simplest way to check if the UI looks right is to manually view it in Storybook.

But looking at every state of the UI is impractical when you have hundreds of components with thousands of variants. In practice, most teams can't look at each and every state so they suffer regressions over and over.

I’m excited to share a sneak peek of the Chromatic Visual Tests addon for Storybook. It turns your stories into tests that pinpoint regressions across browsers and viewport sizes. All of this in a hyper-parallelized cloud infrastructure.

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

Pinpoint UI changes by capturing an image of each component

What are visual tests?

Visual tests take screenshots of stories and compare them to previous screenshots to catch regressions in UI appearance. Thousands of teams, such as Microsoft, Salesforce, and Monday.com use visual tests to verify that their UIs look exactly as they should before shipping code.

We believe the best way to run visual tests is Chromatic, a cloud service by Storybook maintainers(me!). Over the last 5 years, Chromatic has captured 3 billion screenshots for every type of Storybook imaginable.

How Chromatic works in CI

Chromatic helps you detect UI regressions by continuously monitoring stories for visual changes in CI. Every time you push code, every story is screenshotted and compared to the “last known good” screenshot. If visual changes are found, you get notified via a PR check.

Chromatic CI workflow

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

Chromatic currently integrates with Storybook as a CI job, which is essential for giving dev teams certainty that the UI meets company standards. But if you’re an individual dev, CI also means waiting on other jobs in order to review your test results.

Some folks we talked to wait 30 minutes for CI to finish. Often, you’re stuck in a loop fixing bugs then waiting for CI to confirm those fixes.

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

Visual Test addon pinpoints bugs automatically from inside Storybook

Get started by signing up for early access

Run visual tests in Storybook

With the Visual Tests addon, you can conveniently trigger Chromatic visual tests directly from your local Storybook instance. These tests are executed in the cloud and report back the results in your Storybook. This accelerates the feedback loop and allows you to catch bugs earlier in the development process.

🏆 The holy grail workflow

  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 for visual testing. Using git history, it’s able to reconcile the tests run “on-demand” in Storybook with the tests that are run in CI to prevent running the same test twice.

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

Click to test in multiple browsers

Visual Tests run in real browsers to simulate how users will actually experience the UI. Click the “Test” button to spin up a fleet of cloud browsers.

Run visual tests in Chromatic cloud and see results in Storybook

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.

Highlight changed stories in sidebar

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.

Toggle the visual diff to see the exact pixels that changed
Toggle the visual diff to see the exact pixels that changed

Verify if changes are intentional or not

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.

Accept intentional changes to update test baselines and prevent future bugs
Accept intentional changes to update test baselines and prevent future bugs

And more Chromatic goodies…

  • 🐇 All tests are parallelized by default
  • 🌎 Chrome, Safari, Firefox, and Edge
  • 💅 Specify viewport, i18n, and CSS media features
  • embed, Figma, Slack, and much more...

Where it fits in the test strategy?

Visual tests cover a crucial aspect of user interfaces: appearance. They combine the acuity of a browser-based test with the ease of a unit test. In Storybook, visual tests are a natural byproduct of writing stories which means no writing or maintaining extra tests.

Testing Trophy 2023 includes Visual, Static, Unit, Integration, E2E

Sign up for early access

Visual Tests addon is in active development and we need your feedback to bring it to life. Sign up below to get early access (and free usage) and project updates.

👉 Sign up for Visual Tests addon early access

Shout out to contributors Norbert de Langen, Tom Coleman, Michael Arestad, Matthew Weeks, Gert Hengeveld, Jarel Fryer

Join the Storybook mailing list

Get the latest news, updates and releases

6,578 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

Visual Tests addon entering private alpha

Sign up now to take part, plus project updates
loading
Dominic Nguyen
Join the community
6,578 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI