mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-11 00:06:25 +08:00
69 lines
2.0 KiB
Markdown
69 lines
2.0 KiB
Markdown
```js filename=".storybook/test-runner.js" renderer="common" language="js"
|
|
const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
|
|
|
|
const { getStoryContext } = require('@storybook/test-runner');
|
|
|
|
/*
|
|
* See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
|
|
* to learn more about the test-runner hooks API.
|
|
*/
|
|
module.exports = {
|
|
async preVisit(page) {
|
|
await injectAxe(page);
|
|
},
|
|
async postVisit(page, context) {
|
|
// Get the entire context of a story, including parameters, args, argTypes, etc.
|
|
const storyContext = await getStoryContext(page, context);
|
|
|
|
// Apply story-level a11y rules
|
|
await configureAxe(page, {
|
|
rules: storyContext.parameters?.a11y?.config?.rules,
|
|
});
|
|
|
|
const element = storyContext.parameters?.a11y?.element ?? 'body';
|
|
await checkA11y(page, element, {
|
|
detailedReport: true,
|
|
detailedReportOptions: {
|
|
html: true,
|
|
},
|
|
});
|
|
},
|
|
};
|
|
```
|
|
|
|
```ts filename=".storybook/test-runner.ts" renderer="common" language="ts"
|
|
import type { TestRunnerConfig } from '@storybook/test-runner';
|
|
import { getStoryContext } from '@storybook/test-runner';
|
|
|
|
import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
|
|
|
|
/*
|
|
* See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
|
|
* to learn more about the test-runner hooks API.
|
|
*/
|
|
const config: TestRunnerConfig = {
|
|
async preVisit(page) {
|
|
await injectAxe(page);
|
|
},
|
|
async postVisit(page, context) {
|
|
// Get the entire context of a story, including parameters, args, argTypes, etc.
|
|
const storyContext = await getStoryContext(page, context);
|
|
|
|
// Apply story-level a11y rules
|
|
await configureAxe(page, {
|
|
rules: storyContext.parameters?.a11y?.config?.rules,
|
|
});
|
|
|
|
const element = storyContext.parameters?.a11y?.element ?? 'body';
|
|
await checkA11y(page, element, {
|
|
detailedReport: true,
|
|
detailedReportOptions: {
|
|
html: true,
|
|
},
|
|
});
|
|
},
|
|
};
|
|
|
|
export default config;
|
|
```
|