0
# Storybook Addon StoryShots Puppeteer
1

2
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.
3

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

6
## Package Information
7

8
- **Package Name**: @storybook/addon-storyshots-puppeteer
9
- **Package Type**: npm
10
- **Language**: TypeScript
11
- **Installation**: `npm install @storybook/addon-storyshots-puppeteer --save-dev`
12
- **Peer Dependencies**: `puppeteer >=2.0.0` (required, install separately: `npm install puppeteer --save-dev`)
13

14
## Core Imports
15

16
```typescript
17
import { 
18
  puppeteerTest, 
19
  imageSnapshot, 
20
  axeTest,
21
  // Configuration interfaces
22
  CommonConfig,
23
  PuppeteerTestConfig,
24
  ImageSnapshotConfig,
25
  AxeConfig,
26
  Context,
27
  // Default configurations
28
  defaultCommonConfig,
29
  defaultPuppeteerTestConfig,
30
  defaultImageSnapshotConfig,
31
  defaultAxeConfig
32
} from '@storybook/addon-storyshots-puppeteer';
33
```
34

35
For CommonJS:
36

37
```javascript
38
const { 
39
  puppeteerTest, 
40
  imageSnapshot, 
41
  axeTest,
42
  defaultCommonConfig
43
} = require('@storybook/addon-storyshots-puppeteer');
44
```
45

46
## Basic Usage
47

48
```typescript
49
import initStoryshots from '@storybook/addon-storyshots';
50
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
51

52
// Basic image snapshot testing
53
initStoryshots({ 
54
  suite: 'Image storyshots', 
55
  test: imageSnapshot() 
56
});
57

58
// Custom Puppeteer tests
59
initStoryshots({
60
  suite: 'Puppeteer storyshots',
61
  test: puppeteerTest({
62
    storybookUrl: 'http://localhost:6006'
63
  })
64
});
65
```
66

67
## Architecture
68

69
The addon is built around three main testing approaches:
70

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

76
## Capabilities
77

78
### Puppeteer Test Execution
79

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

82
```typescript { .api }
83
function puppeteerTest(customConfig?: Partial<PuppeteerTestConfig>): TestFunction;
84

85
interface PuppeteerTestConfig extends CommonConfig {
86
  testBody: ((page: Page, options: Options) => void | Promise<void>) & {
87
    filter?: (options: Options) => boolean;
88
  };
89
}
90
```
91

92
[Puppeteer Testing](./puppeteer-test.md)
93

94
### Image Snapshot Testing
95

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

98
```typescript { .api }
99
function imageSnapshot(customConfig?: Partial<ImageSnapshotConfig>): TestFunction;
100

101
interface ImageSnapshotConfig extends CommonConfig {
102
  getMatchOptions: (options: Options) => MatchImageSnapshotOptions | undefined;
103
  getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
104
  beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
105
  afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
106
}
107
```
108

109
[Image Snapshot Testing](./image-snapshot.md)
110

111
### Accessibility Testing
112

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

115
```typescript { .api }
116
function axeTest(customConfig?: Partial<AxeConfig>): TestFunction;
117

118
interface AxeConfig extends CommonConfig {
119
  beforeAxeTest: (page: Page, options: Options) => Promise<void>;
120
}
121
```
122

123
[Accessibility Testing](./axe-test.md)
124

125
### Configuration Management
126

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

129
```typescript { .api }
130
interface CommonConfig {
131
  storybookUrl: string;
132
  chromeExecutablePath?: string;
133
  getGotoOptions: (options: Options) => DirectNavigationOptions | undefined;
134
  customizePage: (page: Page) => Promise<void>;
135
  getCustomBrowser?: () => Promise<Browser>;
136
  browserLaunchOptions: LaunchOptions;
137
  setupTimeout: number;
138
  testTimeout: number;
139
}
140

141
interface Context {
142
  kind: string;
143
  story: string;
144
  parameters: { [key: string]: any };
145
}
146
```
147

148
[Configuration](./configuration.md)