@testplane/storybook

A Testplane plugin that makes it easy to write Testplane tests on storybook components:

• Adds automatic screenshot tests for storybook stories;
• Adds an ability to write Testplane tests for storybook stories right inside of the stories.

Installation

npm install @testplane/storybook --save-dev

Usage

⚠️ Storybook 6.4+ is required to use this plugin.

Storybook

If you use storybook@6, you will need to enable buildStoriesJson feature in your storybook config:

// .storybook/main.js
export default {
    // ...
    features: {
        // ...
        buildStoriesJson: true
    }
}

You don't need to do this with storybook@7 or storybook@8.

Testplane

Add @testplane/storybook plugin into your Testplane config:

// .testplane.conf.ts
export default {
    plugins: {
        '@testplane/storybook': {},

        // other Testplane plugins...
    },

    // other Testplane settings...
}

With this minimal config, you will be able to run npx testplane --storybook to autotest each storybook story with Testplane assertView command. Testplane will open each story, wait for play function to finish (if defined), and then call assertView command. These tests would be generated in runtime.

Full plugin config:

Parameter	Type	Default value	Description
enabled	Boolean	true	Enable / disable the plugin
storybookConfigDir	String	".storybook"	Path to the storybook configuration directory
autoScreenshots	Boolean	true	Enable / disable auto-screenshot tests
autoScreenshotStorybookGlobals	Record<string, Record<string, unknown>>	{}	Run multiple auto-screenshot tests with different storybook globals. Only works with storybook >= 8
localport	Number	6006	Port to launch storybook dev server on
remoteStorybookUrl	String	""	URL of the remote Storybook. If specified, local storybook dev sever would not be launched
browserIds	Array<String | RegExp>	[]	Array of browserId to run storybook tests on. By default, all of browsers, specified in Testplane config would be used

⚠️ Storybook tests performance greatly depends on Testplane testsPerSession parameter, as these tests speeds up on reusing existing sessions, so setting values around 20+ is preferred

⚠️ These tests ignore Testplane isolation. It would be turned off unconditionally

autoScreenshotStorybookGlobals

For example, with autoScreenshotStorybookGlobals set to:

{
  "default": {},
  "light theme": {
    "theme": "light"
  },
  "dark theme": {
    "theme": "dark"
  }
}

3 autoscreenshot tests will be generated for each story, each test having its corresponding storybook globals value:

• ... Autoscreenshot default
• ... Autoscreenshot light theme
• ... Autoscreenshot dark theme

Advanced usage

If you have ts-node in your project, you can write your Testplane tests right inside of storybook story files:

import type { StoryObj } from "@storybook/react";
import type { WithTestplane } from "@testplane/storybook"

export const Primary: WithTestplane<StoryObj> = {
    args: {
        primary: true,
        label: "Button",
    },
    testplane: {
        "my test": async ({browser, expect}) => {
            const element = await browser.$(".storybook-button");

            await expect(element).toHaveText("Button");
        }
    }
};

You can also specify extra options in story default config:

import type { WithTestplane } from "@testplane/storybook"
import type { Meta, StoryObj } from "@storybook/react";

const meta: WithTestplane<Meta<typeof Button>> = {
    title: "Example/Button",
    component: Button,
    testplane: {
        skip: false, // if true, skips all Testplane tests from this story file
        autoscreenshotSelector: ".my-selector", // Custom selector to auto-screenshot elements
        browserIds: ["chrome"], // Testplane browsers to run tests from this story file
        autoScreenshotStorybookGlobals: { // overlay plugin config's autoScreenshotStorybookGlobals options
            "es locale": { locale: "es" },
            "fr locale": { locale: "fr" }
        },
        assertViewOpts: { // override default assertView options for tests from this file
            ignoreDiffPixelCount: 5
        }
    }
};

export default meta;

If you decide to create separate config for storybook auto-tests (which is suggested), you need to specify config path via CLI option. For example:

npx testplane --storybook -c .testplane.storybook.conf.ts

This allows you to store references next to your story files:

// .testplane.conf.ts
import path from "path";
import { getStoryFile } from "@testplane/storybook";

export default {
    screenshotsDir: (test) => {
        const relativeStoryFilePath = getStoryFile(test);
        const relativeStoryFileDirPath = path.dirname(relativeStoryFilePath);

        return path.join(relativeStoryFileDirPath, "screens", test.id, test.browserId);
    },
    // other Testplane settings...
}

In this example, screenshot references would be stored in screens/<testId>/<browserId> folder, next to each of your story files.