node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป



Applitools Eyes SDK For Storybook

npm (scoped)


Add your Applitools API key to your environment variables as APPLITOOLS_API_KEY

Install eyes.storybook as a local dev dependency in your tested project:

npm install --save-dev eyes.storybook 

Open your package.json, and add a script:

"eyes-storybook": "eyes-storybook"


When your project is setup, you can run a test with the following command:

$ npm run eyes-storybook

Advanced configuration

To change browser, viewport sizes etc., or use the rendering service, you can use a configuration file.

Create configuration file called applitools.config.js in your project directory (the name can be changed using command argument, e.g. npm run eyes-storybook -- --conf myconfig.js).

The default values and all available options, you can find in DefaultConfigs.js

Common example:

module.exports = {
    useRenderer: true, // Use the rendering service 
    appName: 'My Storybook Application',
    viewportSize: [
        {width: 1000, height: 600}
    maxRunningBrowsers: 5,

    seleniumAddress: 'http://localhost:4444/wd/hub',
    capabilities: {
        browserName: 'chrome',
        chromeOptions: {
            'args': ['--headless', '--disable-gpu']

If you would like to run storybook server out of the eyes-storybook execution, you should specify storybookAddress option in your applitools.config.js file and add the following line to the end of .storybook/config.js:

Storybook v2:

if (typeof window === 'object') window.__storybook_stories__ = require('@kadira/storybook').getStorybook();

Storybook v3 - React:

if (typeof window === 'object') window.__storybook_stories__ = require('@storybook/react').getStorybook();

Storybook v3 - Vue.js:

if (typeof window === 'object') window.__storybook_stories__ = require('@storybook/vue').getStorybook();

Please check the applitools website for more instructions: