Skip to main content

Storybook quick start

Installation​

Install the SDK​

In your project directory, install the Applitools Eyes SDK for Storybook:

npm i -D @applitools/eyes-storybook
info

Prefer a UI-first flow? You can also use the Applitools Eyes Addon for Storybook to run and triage tests directly within Storybook. See the dedicated page.

Run the guided setup​

npx eyes-setup

This creates an applitools.config.js with sensible defaults for Storybook.

Set your Applitools API key​

When prompted by the CLI, enter your Applitools API key. If you don't have one, you can sign up for a free account and obtain your API key from the Applitools Dashboard. Alternatively, you can set the API key as an environment variable: Mac/Linux:

export APPLITOOLS_API_KEY=<YOUR_KEY>

Windows (CMD):

set APPLITOOLS_API_KEY=<YOUR_KEY>
info

Note: Detailed instructions on acquiring your API key are provided in the Applitools Dashboard section.

Running your test​

# Let Eyes start Storybook dev server for you (default)
npx eyes-storybook

# Or point Eyes to an existing Storybook instance
npx eyes-storybook -u http://localhost:6006

This discovers stories and captures visual checkpoints.

  • First run creates baselines (one per story & environment).
  • Subsequent runs compare new snapshots against baselines and report diffs.
  • CLI prints a link to the Applitools Dashboard.

Viewing results (Applitools dashboard)​

For detailed visual test results:

  1. After your test run, the terminal output will include a link to the test results in the Applitools Dashboard.
  2. Click the link to navigate directly to your test results.
  3. Review any visual differences detected.
  4. Accept the changes and click the Save button to update the baselines, or reject the changes to flag any issues.