Sign inSign up

Chromatic 3

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

loading
Dominic Nguyen
@domyen
Last updated:

Following the launch of Storybook 8, today we’re thrilled to announce Chromatic 3. This release combines new features, workflows, and core performance upgrades, giving you our most performant, flexible, and efficient visual testing tool yet.

🧩 Visual Tests addon for Storybook
🎭 Playwright & Cypress integrations
💨 TurboSnap
🚅 Up to 4x faster visual tests

What is Chromatic? Chromatic is a cloud-based visual testing service provided by the core team at Storybook. Our tools safeguard your application’s UI and streamline review cycles, making it faster than ever to ship high-quality UIs.

Visual Tests addon

Visual Tests addon

Primarily, Chromatic’s visual tests run in CI to catch visual regressions in new commits. While visual testing in CI safeguards your application, it’s too slow when you need to iterate and get feedback rapidly; you’re forced to wait for all CI tests, preview deploys and quality checks to complete, while context switching out of development.

Chromatic 3 solves this problem by enabling visual tests inside Storybook via Visual Tests addon. Click “run tests” in Storybook’s sidebar to test your local code in Chromatic’s cloud, without waiting on CI or pushing a commit. Results stream into Storybook as tests finish, so you can turn feedback cycles from minutes into seconds.

"Storybook is an invaluable part of our developer workflow. By using Storybook's Visual Tests addon, we've been able to take its utility even further to catch visual regressions without leaving development" by Josh Roberts Lead Frontend Software Engineer at Hearst

Integrations for Playwright & Cypress

Cypress, Chromatic, Playwright

Chromatic was made for Storybook, by Storybook. However, we often get questions about when Chromatic will integrate with other testing tools.

For the first time, Chromatic 3 expands our horizons beyond Storybook with integrations for Playwright and Cypress. This release enables best-in-class functional testing and visual testing in a single test run.

"Our users depend on quality data visualization. Chromatic's Playwright integration brings us an easy, automatic, and highly scalable way of catching visual regressions while managing the team's code quality so that we can deliver features of the highest quality" by Timmy Huang Senior Staff Frontend Software Engineer at Chan Zuckerberg Initiative

Chromatic’s Playwright and Cypress integrations enable all Chromatic features within your end-to-end tests. These features include unlimited, parallelized, cloud-based visual tests, compatibility with all major browsers, our UI Review platform, and so much more.

"Embedding Playwright with Chromatic's visual regression tests lets us cover multiple logical states in only a handful of snapshots. With these visual tests, we can iterate in development with confidence that we aren't affecting or breaking any existing user experiences" by Biarki Madsen Senior Software Engineer at Nuuday

TurboSnap

0:00
/0:10

When every page and component supports different states, themes, browsers, devices, and localization, even the smallest app can contain a ton of UI.

This complexity requires visual testing tools to cover a lot of ground to catch visual regressions across an entire application. The easy solution to that challenge would be to visually test everything, but that slows you down, burns through test snapshots, and ramps up costs.

Chromatic 3 marks the official launch of a significantly more streamlined and cost-effective way of visual testing: TurboSnap. When you configure TurboSnap in your project, Chromatic will identify where & how your UI has changed by analyzing your project’s dependency graph and Git history. Then, Chromatic only captures snapshots of changed UI, while copying over baselines from unchanged tests.

TurboSnap is the most economical way to visual test on the market. You aren’t testing to see what changed; instead, you’re testing to determine the impact of the already-identified changes. Enabling TurboSnap can reduce snapshot usage by up to 80% per test run, while decreasing test times significantly.

"We use TurboSnap to identify the changed files and run only the relevant stories and visual tests, cutting down costs and making our CI/CD much much quicker" by Orr Gottlieb Engineering manager at Monday.com

TurboSnap has now entered general availability and is transitioning to a paid feature. Learn more about the changes in our TurboSnap announcement.

Up to 4x faster visual tests

In the past year, we halved Chromatic's average snapshot capture time and enabled visual tests that are over 100% faster. If you’re using our latest infrastructure (Capture 6, TurboSnap, and Storybook 8), your tests can become 4x quicker than they were even a year ago.

2023 and 2024 Chromatic average test times (seconds), segmented by project size percentile
2023 and 2024 Chromatic average test times (seconds), segmented by project size percentile

Get started with Chromatic 3 🥳

Chromatic 3 is now available for all Storybook, Playwright, and Cypress projects. Explore our documentation below to get started!

FAQ: How do I upgrade to Chromatic 3? 🤔

Unlike version upgrades (think Storybook 7 or Storybook 8) that you complete via the terminal, Chromatic 3 is an umbrella term that refers to the features and integrations we shipped. It's not a package that you upgrade, so there's no need to worry about changing any configuration in your existing projects!

Credits

Thank you to everybody across the Chromatic, Storybook, Playwright and Cypress communities who helped make Chromatic 3 a reality!

Beta testers
Bjarki Madsen from Nuuday, Dean Smith from Motorway, Jackie Weng from Land Information New Zealand, Jackson Miller from The Bank of London, Jacobus Langner from Zappi, James Qualls from Discern, Thierry Philippe from Engie, Tim O'Keeffe from StackAdapt, Timmy Huang from the Chan Zuckerberg Initiative, and so many more!

nuuday, zappi, Land Information New Zealand, Bank of London, CZI, engie, motorway, StackAdapt

In the past two years, we’ve added several major Chromatic features to give you more customization options, coverage, and performance for your visual tests.

Story Modes

Storybook’s globals let you apply global-level parameters (such as themes, localization, a11y features, device settings, or user states) to your stories. Chromatic 3 improves Chromatic’s support for Storybook’s globals via Modes. Each Story Mode represents a defined array of different globals, and you can test any quantity of different Modes in parallel. By enabling Story Modes, your Chromatic tests gain significantly wider coverage of your application’s variants, with very little extra configuration.

Interaction testing

Storybook’s interaction tests let you test your components’ and screens’ interactivity inside Storybook. Chromatic 3 takes Storybook interaction tests even further by giving you a way to automate those tests within your CI pipeline. These automated interaction tests incur no extra costs to the visual tests you’re already running.

Safari & Edge support (plus Chrome & Firefox)

Every browser engine interprets JavaScript in different ways. This inconsistency means an app can look great in one browser but break in another.

To give you the widest browser coverage possible, Chromatic 3 extends our browser support to include Safari and Edge, in addition to Chrome and Firefox. This is available in all paid plans.

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 changelog: May 2024

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

Chromatic changelog: Oct 2024

Usage reports, snapshot trace viewer, ignore selectors list and a preview Page Shift Detection
loading
Varun Vachhar

Visual Tests addon is here

Run Chromatic visual tests inside Storybook
loading
Dominic Nguyen
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.