Skip to content

Commit 7542082

Browse files
docs: update testplane-storybook docs (autoscreenshotSelector)
1 parent 03ff156 commit 7542082

File tree

1 file changed

+43
-4
lines changed

1 file changed

+43
-4
lines changed

docs/plugins/testplane-storybook.mdx

+43-4
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,18 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
8585
<td>true</td>
8686
<td>Enable / disable auto-screenshot tests</td>
8787
</tr>
88+
<tr>
89+
<td>autoscreenshotSelector</td>
90+
<td>`String`</td>
91+
<td>""</td>
92+
<td>Custom selector, which will be used in auto-screenshot tests</td>
93+
</tr>
94+
<tr>
95+
<td>autoScreenshotStorybookGlobals</td>
96+
<td>`Record<string, Record<string, unknown>>`</td>
97+
<td>{}</td>
98+
<td>Run multiple auto-screenshot tests with different [storybook globals](https://storybook.js.org/docs/7/essentials/toolbars-and-globals#globals)</td>
99+
</tr>
88100
<tr>
89101
<td>localport</td>
90102
<td>`Number`</td>
@@ -113,6 +125,28 @@ With this minimal config, you will be able to run `npx testplane --storybook` to
113125
unconditionally.
114126
</Admonition>
115127

128+
#### autoScreenshotStorybookGlobals
129+
130+
For example, with `autoScreenshotStorybookGlobals` set to:
131+
132+
```json
133+
{
134+
"default": {},
135+
"light theme": {
136+
"theme": "light"
137+
},
138+
"dark theme": {
139+
"theme": "dark"
140+
}
141+
}
142+
```
143+
144+
3 autoscreenshot tests will be generated for each story, each test having its corresponding storybook globals value:
145+
146+
- `... Autoscreenshot default`
147+
- `... Autoscreenshot light theme`
148+
- `... Autoscreenshot dark theme`
149+
116150
## Advanced usage
117151

118152
If you have `ts-node` in your project, you can write your Testplane tests right inside of storybook story files:
@@ -151,11 +185,16 @@ const meta: WithTestplane<Meta<typeof Button>> = {
151185
title: "Example/Button",
152186
component: Button,
153187
testplane: {
154-
skip: false, // if true, skips all Testplane tests from this story file
155-
autoscreenshotSelector: ".my-selector", // Custom selector to auto-screenshot elements
156-
browserIds: ["chrome"], // Testplane browsers to run tests from this story file
188+
// if true, skips all Testplane tests from this story file
189+
skip: false,
190+
// Override default autoscreenshotSelector from plugin config
191+
autoscreenshotSelector: ".my-selector",
192+
// Override default autoScreenshotStorybookGlobals from plugin config
193+
autoScreenshotStorybookGlobals: { "dark theme": { theme: "dark" } },
194+
// Testplane browsers to run tests from this story file
195+
browserIds: ["chrome"],
196+
// override default assertView options for tests from this file
157197
assertViewOpts: {
158-
// override default assertView options for tests from this file
159198
ignoreDiffPixelCount: 5,
160199
},
161200
},

0 commit comments

Comments
 (0)