test(e2e): add axe step to visual regression tests

e2e/axe-test.js

@@ -0,0 +1,21 @@
+import { test as base } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+const test = base.extend({
+  makeAxeBuilder: async ({ page }, use, testInfo) => {
+    const makeAxeBuilder = () =>
+      new AxeBuilder({ page })
+        .withTags([
+          'best-practice',
+          'wcag2a',
+          'wcag2aa',
+          'cat.semantics',
+          'cat.forms'
+        ])
+        .disableRules('page-has-heading-one');
+
+    await use(makeAxeBuilder);
+  },
+});
+
+export { test };

e2e/visual/no-theme.spec.js

@@ -1,8 +1,10 @@
-const { test, expect } = require('@playwright/test');
+const { expect } = require('@playwright/test');
+
+const { test: axeTest } = require('../axe-test');
 
 const schema = require('./fixtures/form.json');
 
-test('no-theme - viewer', async ({ page }) => {
+axeTest('no-theme - viewer', async ({ page, makeAxeBuilder }) => {
 
   // given
   await page.route('/form', route => {
@@ -33,10 +35,16 @@ test('no-theme - viewer', async ({ page }) => {
 
   // then
   await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
 });
 
 
-test('no-theme - editor', async ({ page }) => {
+axeTest('no-theme - editor', async ({ page, makeAxeBuilder }) => {
 
   // given
   await page.route('/form', route => {
@@ -67,4 +75,10 @@ test('no-theme - editor', async ({ page }) => {
 
   // then
   await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
 });

e2e/visual/theming.spec.js

@@ -1,8 +1,10 @@
-const { test, expect } = require('@playwright/test');
+const { expect } = require('@playwright/test');
+
+const { test: axeTest } = require('../axe-test');
 
 const schema = require('./fixtures/form.json');
 
-test('theming - viewer', async ({ page }) => {
+axeTest('theming - viewer', async ({ page, makeAxeBuilder }) => {
 
   // given
   await page.route('/form', route => {
@@ -33,10 +35,16 @@ test('theming - viewer', async ({ page }) => {
 
   // then
   await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
 });
 
 
-test('theming - editor', async ({ page }) => {
+axeTest('theming - editor', async ({ page, makeAxeBuilder }) => {
 
   // given
   await page.route('/form', route => {
@@ -67,4 +75,10 @@ test('theming - editor', async ({ page }) => {
 
   // then
   await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
 });

package.json

@@ -58,6 +58,7 @@
     }
   ],
   "devDependencies": {
+    "@axe-core/playwright": "^4.7.3",
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-react-jsx": "^7.14.5",
     "@babel/plugin-transform-react-jsx-source": "^7.14.5",