Official Argos Storybook integration

Capture and review visual changes of your Storybook stories with Argos. It runs your stories in a real browser and uploads a screenshot of each one to Argos in your CI.

Visit the Storybook SDK documentation for guides, the API reference, and more.

Installation

npm install --save-dev @argos-ci/storybook

Usage

The recommended way to run visual tests is with the Storybook Vitest addon. Register the Argos plugin in your Vitest config:

// vitest.config.ts
import { defineConfig } from "vitest/config";
import { argosVitestPlugin } from "@argos-ci/storybook/vitest-plugin";

export default defineConfig({
  plugins: [
    argosVitestPlugin({
      // Upload the screenshots to Argos only on CI.
      uploadToArgos: process.env.CI === "true",
    }),
  ],
});

A screenshot is captured for every story automatically. To capture additional screenshots (for example, at different steps of an interaction), call argosScreenshot inside a story's play function:

// Button.stories.tsx
import { argosScreenshot } from "@argos-ci/storybook/vitest";

export const Example: Story = {
  play: async (ctx) => {
    await argosScreenshot(ctx, "example");
  },
};

Using the Storybook Test Runner instead? Import argosScreenshot from @argos-ci/storybook/test-runner and call it from the postVisit hook. See the Test Runner quickstart.

Links

• Official SDK Docs
• Quickstart
• Discord