# Storybook CSF React Tutorial

# Getting Started with Applitools Eyes & Storybook

Note: This tutorial showcases how to use Storybook with the Component Story Format (CSF). To use the legacy format, check out Applitools Eyes for Storybook React

# Testing Storybook with Applitools Eyes

1. Install Applitools Eyes for Storybook

In order to use Applitools Eyes, we need to first install the Eyes SDK for Storybook as an npm package.

npm i -D @applitools/eyes-storybook

2. Set your Applitools API key

Before running your test, you need to make your API key available to the environment. You can do this by either prepending your test command or exporting it in your terminal session.

To prepend, run a command like npm test as:

APPLITOOLS_API_KEY="[Your Key]" npm test

To export your API key on a Mac, run:

export APPLITOOLS_API_KEY="[Your Key]"

To export your API key on Windows, run:

set APPLITOOLS_API_KEY="[Your Key]"

Learn how to find your API key

3. Run your new tests!

Now you're ready to run your tests.

To test all of your stories, run the following command:

npx eyes-storybook

And that's it! Applitools will automatically run visual tests on all of your stories.

Your tests should now be available to review in the Applitools dashboard.

# Applitools Eyes Storybook SDK

# How it works

The Applitools Eyes Storybook SDK does not require you to change any code! You simply need to add Applitools SDK as a dependency and run the CLI command!

Our SDK simply opens up different stories from your project and upload the DOM to our Visual grid servers. It uploads multiple DOMs concurrently. The visual grid receives these DOMs and renders them in parallel using real browsers. Then it take pictures of each stories. And finally, these pictures are then sent to our AI servers to check for differences.

The picture below shows how it works

# Check out a working demo

See it in action with our example over on GitHub!

# More information

The @applitools/eyes-storybook npm package page contain more information about advanced configuration, best practices and troubleshooting. Visit eyes-storybook SDK repo to find out more about what's possible with Applitools' Storybook SDK.