Storybook Plugin for Cappa

This plugin allows to take screenshots of Storybook stories with Cappa.

Install

pnpm add -D @cappa/plugin-storybook

Usage

Add the plugin to your cappa config:

import { defineConfig } from "@cappa/core";
import { cappaPluginStorybook } from "@cappa/plugin-storybook";

export default defineConfig({
  plugins: [cappaPluginStorybook({ storybookUrl: "http://localhost:8080" })],
});

Make sure to have a running Storybook server on the given url.

Add the plugin to your storybook config:

const config: StorybookConfig = {
  addons: ["@cappa/plugin-storybook"],
};

Run cappa cli in the directory of your cappa config:

cappa

Options

Storybook options

Cappa uses a storybook addon that allows you to pass options from storybook into cappa.

Parameters

Example

export const Primary: Story = {
  parameters: {
    cappa: {
      skip: true,
      delay: 1000,
      fullPage: false,
    },
  },
};

Play function

cappa automatically waits for the play function to finish, before taking screenshots. This allows you to define 'actions' that are executed before the screenshot is taken e.g. clicking on a button.

delay is added "on top" of the play function execution.

Example

export const Primary: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole("button"));
  },
};

Flakiness

To avoid flakiness, cappa disables css animations and transitions by default. For additional use cases or animation libraries, you can use the isCappa function to check if the current window is a cappa window. You can use it inside of your storybook preview file (.storybook/preview.ts):

if (isCappa()) {
  import("disable-animations.css");
  MotionGlobalConfig.disableAnimations = true;
}

How it works

cappa uses a 'one way binding' to pass options from storybook into cappa. That means that the storybook addon is responsible for passing options into cappa and 'communicating' the correct timing to take the screenshot.