Testing a Static Storybook Web App

To run Screener against a static Storybook build, instead of starting the Storybook Dev server, follow these setup instructions.

What You'll Need

• If you haven't already, follow the steps under the Quickstart to integrate Sauce Labs Visual Component Testing (Screener) with Storybook and set your Sauce credentials as environment variables.
• An existing Storybook project with some component stories.

Run a Static Storybook Build

1. Export your Storybook project into a static web app by running:

npm run build-storybook

2. Open your "screener.config.js" file and add the storybookStaticBuildDir option with its value set to your own static Storybook folder:

Storybook 6.4 or newer

module.exports = {
 projectRepo: 'sb-6.4-test',
 apiKey: process.env.SCREENER_API_KEY,
 resolution: '1024x768',
 storybookStaticBuildDir: 'storybook-static'
}

Storybook 6.3 or older

module.exports = {
 projectRepo: 'sb-6.1-test',
 storybookConfigDir: '.storybook',
 apiKey: process.env.SCREENER_API_KEY,
 resolution: '1024x768',
 storybookStaticBuildDir: 'storybook-static'
}

3. Run your test:

npm run test-storybook

More Information

• Build Storybook as a Static Web App