Storybook Quickstart

Learn how to setup visual testing in a Storybook using Argos.

The best way to integrate Argos with Storybook is to use Storycap to crawl your Storybook and capture screenshots of your components.

Prerequisites

To get the most out of this guide, you'll need to:

• Use Storybook
• Create your project in Argos

1. Install

npm

npm i --save-dev @argos-ci/cli storycap

yarn

yarn add --dev @argos-ci/cli storycap

pnpm

pnpm add --save-dev @argos-ci/cli storycap

bun

bun add --dev @argos-ci/cli storycap

Read the CLI documentation if you need information about advanced usages.

2. Capture screenshots

There are two ways to capture screenshots of your Storybook:

• If your Storybook is running and accessible via an URL, add this command to your CI pipeline to capture screenshots of your stories:

# Capture screenshots of your stories
npm exec -- storycap <STORYBOOK-URL> --outDir ./screenshots

• If your Storybook is not deployed, you need to serve your Storybook before capturing the screenshots. Use the following commands:

# Build Storybook
npm exec -- storybook build --output-dir ./storybook-static

# Screenshot Storybook with Storycap
npm exec -- storycap --serverCmd "npx http-server ./storybook-static --port 6006" http://127.0.0.1:6006/ --outDir ./screenshots

Read the Storycap documentation to learn more about the installation and advanced usages.

Add ./screenshots to your .gitignore file, to avoid uploading screenshots to your Git repository.

3. Upload screenshots on CI

Add this command to your CI pipeline to upload the screenshots to Argos.

npm exec -- argos upload --token <ARGOS_TOKEN> ./screenshots

Note: The value of ARGOS_TOKEN is available your project settings on Argos.

Congratulations on installing Argos! 👏

After committing and pushing your changes, the Argos check status will appear on your pull request in GitHub (or GitLab).

Note: you need a reference build to compare your changes with. If you don't have one, builds will remain orphan until you run Argos on your reference branch.

You can now review changes of your app for each pull request, avoid visual bugs and merge with confidence. Welcome on board!

Additional ressources

• Argos + Storybook example
• Storycap documentation
• Storybook documentation

---

Join our Discord, submit an issue on GitHub or just send an email if you need help.