Integrate axe-core/playwright into storybook/test-runner

Author: angelikatyborska

.storybook/test-runner.js

@@ -0,0 +1,35 @@
+// TODO: try to make axe-playwright work or uninstall
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
+const { getStoryContext } = require('@storybook/test-runner');
+const { AxeBuilder } = require('@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.
+ */
+module.exports = {
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    // Do not run a11y tests on disabled stories.
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    const results = await new AxeBuilder({ page }).options({
+      // those rules fail for every story
+      rules: {
+        "region": { "enabled": false },
+        "landmark-one-main": { "enabled": false },
+        "page-has-heading-one": { "enabled": false }
+      }
+    }).analyze();
+
+    if (results.violations.length > 0) {
+      const storyId = `'${storyContext.title} ${storyContext.name}' (id: ${storyContext.id})`
+      console.error(`Story ${storyId} did not pass axe-core checks.\n\n`, JSON.stringify(results.violations, null, 2));
+
+      throw `Story ${storyId} did not pass axe-core checks. See test error logs for details.`
+    }
+  },
+};

package.json

@@ -15,6 +15,7 @@
     "format:docs": "prettier --ignore-path .gitignore --write './**/*.{md,mdx}'",
     "format": "yarn format:js && yarn format:scss && yarn format:docs",
     "test": "script/test",
+    "test-storybook": "test-storybook",
     "checks": "yarn lint && yarn css:stats && yarn test",
     "watch": "yarn build && yarn build --watch",
     "clean": "rimraf build/*",
@@ -49,6 +50,7 @@
   },
   "homepage": "https://bitcrowd.github.io/bitstyles",
   "devDependencies": {
+    "@axe-core/playwright": "^4.9.1",
     "@babel/core": "^7.18.10",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -58,10 +60,12 @@
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/html": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/test-runner": "^0.16.0",
     "a11y-dialog": "^7.1.0",
     "alpinejs": "^2.8.2",
     "analyze-css": "^2.1.50",
     "autoprefixer": "^10.4.8",
+    "axe-playwright": "^2.0.1",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.13",