GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Documentation update

Browse Source
This commit is contained in:
Corey Vaillancourt 2021-04-12 09:23:01 -04:00
parent a4b84a23c4
commit 5cb97edb15
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
addons/storyshots/storyshots-puppeteer/README.md
View File

@ -228,6 +228,25 @@ initStoryshots({ suite: 'A11y checks', test: axeTest() });
For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
### Specifying options to `axeTest`
```js
import initStoryshots from '@storybook/addon-storyshots';
import { axeTest } from '@storybook/addon-storyshots-puppeteer';
const beforeAxeTest = (page, { context: { kind, story }, url }) => {
return new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 600)
);
};
initStoryshots({ suite: 'A11y checks', test: axeTest({ beforeAxeTest }) });
```
`beforeAxeTest` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeAxeTest` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the axe test .
## _imageSnapshots_
Generates and compares screenshots of your stories using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
@ -317,4 +336,4 @@ initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', beforeScreenshot }),
});
```
```