or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

axe-test.mdconfiguration.mdimage-snapshot.mdindex.mdpuppeteer-test.md
tile.json

tessl/npm-storybook--addon-storyshots-puppeteer

Image snapshots addition to StoryShots based on puppeteer

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-storyshots-puppeteer@7.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--addon-storyshots-puppeteer@7.6.0

index.mddocs/

Storybook Addon StoryShots Puppeteer

Storybook Addon StoryShots Puppeteer provides automated visual regression testing, accessibility testing, and custom Puppeteer test execution for Storybook components. This deprecated addon enables screenshot comparison, axe accessibility audits, and arbitrary browser automation through Puppeteer integration with StoryShots.

⚠️ Deprecation Notice: This addon is deprecated as of version 7.6.20 and will not receive further updates. Migration to alternative solutions is recommended.

Package Information

  • Package Name: @storybook/addon-storyshots-puppeteer
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/addon-storyshots-puppeteer --save-dev
  • Peer Dependencies: puppeteer >=2.0.0 (required, install separately: npm install puppeteer --save-dev)

Core Imports

import { 
  puppeteerTest, 
  imageSnapshot, 
  axeTest,
  // Configuration interfaces
  CommonConfig,
  PuppeteerTestConfig,
  ImageSnapshotConfig,
  AxeConfig,
  Context,
  // Default configurations
  defaultCommonConfig,
  defaultPuppeteerTestConfig,
  defaultImageSnapshotConfig,
  defaultAxeConfig
} from '@storybook/addon-storyshots-puppeteer';

For CommonJS:

const { 
  puppeteerTest, 
  imageSnapshot, 
  axeTest,
  defaultCommonConfig
} = require('@storybook/addon-storyshots-puppeteer');

Basic Usage

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

// Basic image snapshot testing
initStoryshots({ 
  suite: 'Image storyshots', 
  test: imageSnapshot() 
});

// Custom Puppeteer tests
initStoryshots({
  suite: 'Puppeteer storyshots',
  test: puppeteerTest({
    storybookUrl: 'http://localhost:6006'
  })
});

Architecture

The addon is built around three main testing approaches:

  • Image Snapshots: Automated screenshot comparison using jest-image-snapshot for visual regression testing
  • Accessibility Testing: Automated accessibility audits using @axe-core/puppeteer integration
  • Custom Puppeteer Tests: Arbitrary browser automation through user-defined test functions
  • Shared Configuration: Common browser management and navigation options across all test types

Capabilities

Puppeteer Test Execution

Enables arbitrary Puppeteer tests defined in story parameters, providing full browser automation capabilities for interactive testing scenarios.

function puppeteerTest(customConfig?: Partial<PuppeteerTestConfig>): TestFunction;

interface PuppeteerTestConfig extends CommonConfig {
  testBody: ((page: Page, options: Options) => void | Promise<void>) & {
    filter?: (options: Options) => boolean;
  };
}

Puppeteer Testing

Image Snapshot Testing

Automated visual regression testing through screenshot capture and comparison using jest-image-snapshot integration.

function imageSnapshot(customConfig?: Partial<ImageSnapshotConfig>): TestFunction;

interface ImageSnapshotConfig extends CommonConfig {
  getMatchOptions: (options: Options) => MatchImageSnapshotOptions | undefined;
  getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
  beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
  afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
}

Image Snapshot Testing

Accessibility Testing

Automated accessibility audits using Axe Core integration to verify component accessibility compliance with WCAG guidelines.

function axeTest(customConfig?: Partial<AxeConfig>): TestFunction;

interface AxeConfig extends CommonConfig {
  beforeAxeTest: (page: Page, options: Options) => Promise<void>;
}

Accessibility Testing

Configuration Management

Shared configuration interfaces and default values for browser management, navigation options, and test execution control.

interface CommonConfig {
  storybookUrl: string;
  chromeExecutablePath?: string;
  getGotoOptions: (options: Options) => DirectNavigationOptions | undefined;
  customizePage: (page: Page) => Promise<void>;
  getCustomBrowser?: () => Promise<Browser>;
  browserLaunchOptions: LaunchOptions;
  setupTimeout: number;
  testTimeout: number;
}

interface Context {
  kind: string;
  story: string;
  parameters: { [key: string]: any };
}

Configuration