Skip to main content

Argos Storybook SDK

Integrate visual testing with your Storybook seamlessly using Argos. This SDK allows you to capture and review visual changes in your Storybook components directly within your CI.

Getting Started​

To get started with Argos and Storybook, check out our Storybook Quickstart Guide.

Comparing Argos and Chromatic​

While both Argos and Chromatic provide visual testing for Storybook, they take different approaches:

  • Argos captures screenshots of your Storybook components in your CI using Playwright.
  • Chromatic captures screenshots of your Storybook components in the cloud.

For a deeper comparison, see our Argos vs Chromatic guide.

Interactions using the play function​

The play function in Storybook lets you define interactions for your components, ensuring they are in a specific state before capturing a screenshot.

When running tests, the Storybook test runner automatically executes the play function before taking a screenshot. This means:

  • Your component will be in the expected state before the screenshot is taken.
  • You do not need to call the play function manually, Argos handles it for you.

This ensures your visual tests accurately reflect how users interact with your components.

API Overview​

argosScreenshot(page, context[, options])​

  • page: The Playwright Page instance.
  • context: The test context provided by the Storybook test runner.
  • options: Customizable options for argosScreenshot. Explore available options.
    • options.fitToContent: Adjusts the screenshot to the content size (default: true).
    • options.fitToContent.padding: Sets padding around the content in pixels (default: 16).
    • options.fitToContent.zoom: Specifies the zoom level (default: 2).

Additional Resources​