Closed AmirTugi closed 3 days ago
Hi @AmirTugi, we will take a look and let you know what we find.
Hey @AmirTugi thanks a lot for elaborating, but could you please provide a reproduction repo? You can use https://storybook.new for a minimal repro setting. I tried the test-runner with Storybook 8.0.8 with your test-runner.ts file and the a11y tests worked without issues.
I actually find it weird that your tests failed with waitForPageReady
while in your snippet such function is not used. That function is not used internally by the test-runner, only if you add it yourself. I think you might have it in your preVisit
hook. Maybe what's going on is you are using Webpack and somehow the waitForPageReady
function is hanging because of some Webpack request that won't resolve, but I am not sure as I don't know the configuration of your project.
Managed to fix the issue.
Seems like it relied in axe-playwright
which is what the official Storybook docs suggest.
I replaced it with @axe-core/playwright
and configured it almost the same as the axe-playwright
, and now it works.
This is my new set-up.
import type { TestRunnerConfig } from '@storybook/test-runner';
import { getStoryContext } from '@storybook/test-runner';
import { AxeBuilder } from '@axe-core/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 = {
tags: {
include: ['a11y-include'],
skip: ['a11y-skip'],
},
async postVisit(page, context) {
const storyContext = await getStoryContext(page, context);
const disabledRules = (storyContext.parameters?.['a11y']?.config?.rules ?? [])
.filter((rule: { enabled: boolean }) => !rule.enabled)
.map((rule: { id: string }) => rule.id)
const results = await new AxeBuilder({ page })
.include('#storybook-root')
.options({
// Limit the result types to only violations that the test managed to find
resultTypes: ['violations'],
})
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.disableRules(disabledRules)
.analyze()
expect(results.violations).toEqual([]);
},
};
export default config;
The downside of this is that the error reporting is the expect().toEqual([])
which is less readable than the reporter from axe-playwright
.
But I'm sure that with a bit of effort it can be fixed.
Describe the bug A11y tests crash in the test runner when upgrading Storybook to v8. I followed the upgrade manual and everything passes but the a11t tests in the test runner. It's saying
To Reproduce Steps to reproduce the behavior:
Upgrade Storybook to
8.0.8
and use@storybook/test-runner@0.17.0
Expected behavior The a11y tests should pass as before
Screenshots
System
Additional Context Here's the
test-runner.ts
file I have