ContactSign inSign up
Contact
UI Tests Visual test Interaction test TurboSnap

Verify UI functionality in the browser

Simulate clicks, typing, and hovers right in your browser to ensure everything works perfectly. Debug faster with DOM-based assertions and fix issues directly in your workflow.

Get started for freeBook a demo
Storybook iconMade by the Storybook team
wealthsimple logo
seek logo
github logo
circleci logo
mozilla logo
vscode logo
wealthsimple logo
seek logo
github logo
circleci logo
mozilla logo
vscode logo
wealthsimple logo
seek logo
github logo
circleci logo
mozilla logo
vscode logo
wealthsimple logo
seek logo
github logo
circleci logo
mozilla logo
vscode logo
wealthsimple logo
seek logo
github logo
circleci logo
mozilla logo
vscode logo
Run tests in the browser
Interaction tests run in the browser, the same environment you use to develop components. That makes reproductions straightforward.
Debug with browser devtools
Simplify debugging by doing it directly in browser devtools with full access to DOM, styling, and assets.
Integrates with Git and CI
Interaction test status is reported in version control & CI to keep your team in the loop.
Cross browser & responsive
Expand test coverage to Chrome, Firefox, Safari, and Edge in one click. All browsers run in parallel so your test suite stays fast.
Tests run in parallel by default
Your tests run on as many machines as needed to deliver results in the least time possible. Parallelization is automatic with no extra configuration from you.
Testing LibraryJest
Battle-tested in open source
Getting started with interaction testing is easy because it uses industry-standard APIs. Testing-Library simulates user events. Jest asserts DOM structures.
“Chromatic helps us to prevent at least three critical UI bugs per week that would otherwise make our platform unusable.”
Orr Gottlieb
Orr Gottlieb
Engineering manager
monday.com

How does interaction testing work?

Components do more than just render the UI—they also fetch data and manage state. Interaction tests let you verify functionality that your users encounter by simulating user events like click, type, and hover in the browser.

Powered by your Storybook

Stories capture all states and variations of components. They’re a pragmatic, reproducible way to keep track of UI test cases. Chromatic uses these stories to power interaction tests. The best part is that it just works - no configuration necessary.

Interaction test code sampleExample of an interaction test with multiple steps
Testing Library icon

Simulate user events with Testing Library

Vitest icon

Assert DOM structure with Vitest/Jest

Storybook

Render UI in Storybook

Your test results in one place

Chromatic runs all your tests in parallel in the cloud, giving you a clean dashboard to spot errors fast. Push code, check results, and get back to building.

Image of Chromatic dashboard with failed tests
Online merge manager
Get an online dashboard of interaction test status and visual changes for every build.
Verify tests with your team
Collaborate on verifying changes with design, product, and engineering using the online merge manager.
Share links to debug
Send teammates a link to specific instance of a component to ensure they’re referencing the exact same test you are.
“Chromatic has reduced the number of UI regressions we ship by two-thirds.”
Paul Vidal
Paul Vidal
CTO
Collective

Debug easily in your browser

Reproduce and fix test failures directly in your browser—no test environment required. Debug with real code and devtools, then share a repro link with teammates in seconds.

Browser chrome
Chromatic build page with UI test failure
Published Storybook with interaction errorpointer cursor
Error reports in Chromatic
Chromatic notifies you of interaction errors and failed assertions. Each report includes steps to reproduce and environment information.
Fully-inspectable components
Reproductions are easier than ever with fully inspectable DOM, styling, and assets uploaded with each test.
Storybook
Debug in published Storybook
Chromatic publishes a Storybook online to help debugging tests. Open it in a browser to reproduce the exact state of your story when the test failed.

Integrate test reports into CI

Keep everyone in the loop by integrating Chromatic into your CI pipeline, Slack, or create custom workflows via webhook.

Integrates with
CircleCIJenkinsBitbucketGithubGitlabBuildkiteAzure PipelinesTravis
Chromatic adds status checks for your pull/merge requests. The badges show errors or changes that need to be reviewed.
Never fix the same functional bug twice.

Frequently asked questions

“Chromatic is a valuable addition to our testing toolset. It helps us catch UI bugs a lot quicker and easier!”
Malek Hakim
Malek Hakim
Sr. Software engineer
Priceline
Company
AboutCareersTerms of ServicePrivacySecurity • SOC 2StatusContact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.