![\"Argos\"](\"https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/github-readme-logo-dark.png\"){kind=logo}
\n \n \n \n
The open source visual testing platform for AI-native engineering teams.
\n\n# Official Argos Storybook integration\n\n[](https://www.npmjs.com/package/@argos-ci/storybook)\n[](https://www.npmjs.com/package/@argos-ci/storybook)\n[](https://www.npmjs.com/package/@argos-ci/storybook)\n\nCapture and review visual changes of your [Storybook](https://storybook.js.org/) stories with Argos. It runs your stories in a real browser and uploads a screenshot of each one to Argos in your CI.\n\nVisit the [Storybook SDK documentation](https://argos-ci.com/docs/reference/storybook) for guides, the API reference, and more.\n\n## Installation\n\n```sh\nnpm install --save-dev @argos-ci/storybook\n```\n\n## Usage\n\nThe recommended way to run visual tests is with the [Storybook Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon). Register the Argos plugin in your Vitest config:\n\n```ts\n// vitest.config.ts\nimport { defineConfig } from \"vitest/config\";\nimport { argosVitestPlugin } from \"@argos-ci/storybook/vitest-plugin\";\n\nexport default defineConfig({\n plugins: [\n argosVitestPlugin({\n // Upload the screenshots to Argos only on CI.\n uploadToArgos: process.env.CI === \"true\",\n }),\n ],\n});\n```\n\nA 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:\n\n```ts\n// Button.stories.tsx\nimport { argosScreenshot } from \"@argos-ci/storybook/vitest\";\n\nexport const Example: Story = {\n play: async (ctx) => {\n await argosScreenshot(ctx, \"example\");\n },\n};\n```\n\n> Using the [Storybook Test Runner](https://storybook.js.org/docs/writing-tests/integrations/test-runner) instead? Import `argosScreenshot` from `@argos-ci/storybook/test-runner` and call it from the `postVisit` hook. See the [Test Runner quickstart](https://argos-ci.com/docs/quickstart/storybook-quickstart/storybook-test-runner-quickstart).\n\n## Compatibility\n\n`@argos-ci/storybook` supports Storybook 8 through 11, including the 11 pre-releases. Screenshots can be taken with the [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) (Storybook 9 or later, Vitest 4 or 5) or with the [Storybook Test Runner](https://storybook.js.org/docs/writing-tests/integrations/test-runner) (Storybook 8 or later).\n\n## Links\n\n- [Official SDK Docs](https://argos-ci.com/docs/reference/storybook)\n- [Quickstart](https://argos-ci.com/docs/quickstart/storybook-quickstart)\n- [Discord](https://argos-ci.com/discord)\n","readmeFilename":"README.md"}