Skip to main content

Testing Storybook with Applitools

Applitools Eyes Storybook SDK​

How it works​

storybook architecture

The Applitools Eyes Storybook SDK brings seamless visual testing to your workflow — no code changes, no test maintenance, and no extra effort required.

Simply add the SDK as a dependency and run a single CLI command. Eyes automatically scans your Storybook, uploads each story’s DOM to the Ultrafast Grid, and renders snapshots across real browsers in parallel. Our Visual AI then compares these snapshots to catch even the smallest visual differences, so you can ship visually perfect components with confidence.

Running the example project​

  1. Clone or download one of the repository examples below and navigate to that folder

    React example

    git clone https://github.com/applitools/tutorial-storybook-react.git
    cd tutorial-storybook-react

    Angular example

    git clone https://github.com/applitools/tutorial-storybook-angular.git
    cd tutorial-storybook-angular

    Vue example

    git clone https://github.com/applitools/tutorial-storybook-vue.git
    cd tutorial-storybook-vue

  2. Install the dependencies

    npm install

To authenticate via the Applitools server and run tests, you need to set your API key provided from Applitools Eyes. For details on how to retrieve your API key, see the Applitools documentation.

  1. Choose one of the following options to set your API Key.

    • Set your Applitools API Key as an environment variable.
      • macOS/Linux: export APPLITOOLS_API_KEY=<Your API Key>
      • Windows: set APPLITOOLS_API_KEY=<Your API Key>
    • Note: If you are not using the Eyes public cloud "https://eyes.applitools.com", you will need to set your Eyes dashboard URL via an APPLITOOLS_SERVER_URL=<Your Server URL> environment variable. See a full list of available environment variables here.

  2. Run the example tests with the command below. The will create a test baseline of every story in the Storybook.

    npx eyes-storybook

    storybook angular run test

  3. After the example tests complete. Visit your Applitools Eyes dashboard to view the results. storybook architecture

Integrating Eyes Storybook into an existing project​

Follow our API Reference Guide to install the Eyes Storybook SDK in your project.

Need help?​

Having Trouble?

Don't suffer in silence! Let us help you. Please reach out to us to get your project working.