Getting Started with Screener + Storybook

Get Automated Visual Testing across your React or Vue components with Storybook and Screener.

Follow the steps below to setup Screener with Storybook, or use the New Project Wizard.


1

Verify Requirements

  1. Storybook is installed.(v3 or v2.17+)
  2. You have written some stories for your components.
  3. You can successfully view your stories when running the Storybook Dev server
    (npm run storybook).

2

Install

Install the screener-storybook package as a dependency in your project:

npm install --save-dev screener-storybook

3

Save Screener Config File

  1. Go to the New Project Wizard.
  2. Follow the wizard steps to generate your Screener Config code.
  3. Save the code into a file named screener.config.js in the root directory of your application.

Recommendation
Store API Key as an environment variable

Secure your API Key by storing it as an environment variable. For example, store it in an environment variable called SCREENER_API_KEY, and then reference it in your screener.config.js file with: process.env.SCREENER_API_KEY

For additional configuration options, view the repository documentation.


4

Add Screener Script

Add the following NPM script to your package.json file:

"scripts": {
  "test-storybook": "screener-storybook --conf screener.config.js"
}

5

Run

Great, you're all set!

Now run your first test with the following command:

npm run test-storybook

View your initial results in the Screener Dashboard.


Next Steps


Got Questions? Ask Us