Visual Testing with Storybook

Ensure your UI components are always visually perfect

Enjoy the benefits of early testing of Storybook components
built with React, Vue, or Angular.

Why Use

schedule icon

Find bugs earlier

Using Storybook and visual UI testing detects component bugs far upstream in the development process, when you first code your components. This prevents bugs from appearing downstream in applications, when they’re harder to diagnose.

stopwatch icon

As fast as unit testing

Our Storybook SDKs use our Visual Grid, so you can test hundreds of UI components in less than a minute. That means no interruption to your development workflow.

multiple windows icon

Cross-browser testing

Our Visual Grid supports multiple types of browsers, so you can find bugs that don’t appear on Chrome, but do on Firefox.

prohibit icon

Codeless testing

You’ve got plenty of code to write as it is. With Applitools, you don’t write any code to test React, Vue, and Angular components built with Storybook. Just a couple of commands and you’ve run your first visual test.

responsive testing icon

Responsive testing

Your customers use your app across all kinds of devices: phones, tablets, laptops, and more. Each with its own browser size that can affect UI component rendering. Applitools lets you test on a wide range of viewport sizes, so you can find bugs due to responsive design.

“At first our developers didn’t believe in visual automation. Now they’ve been singing Applitools’ praises because it catches critical bugs.”
Norbert de Langen
Greg Sypolt Gannett
Director, Quality Engineering

How Applitools works with Storybook

You run an npx command, as detailed in this tutorial. Our Storybook SDK then extracts all stories from your Storybook, and renders each component across all visual states. For each rendering, our Storybook SDK then extracts a DOM Snapshot that we send to Applitools Visual Grid. Our visual grid renders the component across multiple browsers with different viewport sizes, in parallel. Each component rendering screenshot is sent to our AI comparison engine to find significant differences that indicate a visual bug.

Storybook flow chart

Works with your toolchain

Applitools integrates with every popular continuous integration tool. (And some unpopular ones too.) Plus GitHub, Visual Studio, Jira. So you can:

Include visual UI testing in your continuous integration builds.

Submit visual bugs into Jira with one button click.

Ensure your visual baselines are validated on each GitHub pull request for your code.

Map changes in visual appearance to underlying code changes with UI Version Control.

Get Started

Bring visual testing to Storybook. Get a free Applitools account,
then check out our tutorials for ReactJS, VueJS, and AngularJS: