CCM-12666: WIP - playwright accessibility tests

Author: bhansell1

package-lock.json

@@ -0,0 +1,58 @@
+import path from 'node:path';
+import { defineConfig, devices } from '@playwright/test';
+import baseConfig from '../playwright.config';
+
+const buildCommand = [
+  'INCLUDE_AUTH_PAGES=true',
+  'npm run build && npm run start',
+].join(' ');
+
+export default defineConfig({
+  ...baseConfig,
+  fullyParallel: true,
+  timeout: 60_000, // 30 seconds in the playwright default
+  expect: {
+    timeout: 10_000, // default is 5 seconds. After creating and previewing sometimes the load is slow on a cold start
+  },
+  projects: [
+    {
+      name: 'accessibility:setup',
+      testMatch: 'ui.setup.ts',
+      use: {
+        baseURL: 'http://localhost:3000',
+        ...devices['Desktop Chrome'],
+        headless: true,
+        screenshot: 'only-on-failure',
+      },
+    },
+    {
+      name: 'accessibility',
+      testMatch: '*.accessibility.spec.ts',
+      use: {
+        screenshot: 'only-on-failure',
+        baseURL: 'http://localhost:3000',
+        ...devices['Desktop Chrome'],
+        headless: false,
+        launchOptions: {
+          slowMo: 200,
+        },
+        storageState: path.resolve(__dirname, '../.auth/user.json'),
+      },
+      dependencies: ['accessibility:setup'],
+      teardown: 'accessibility:teardown',
+    },
+    {
+      name: 'accessibility:teardown',
+      testMatch: 'ui.teardown.ts',
+    },
+  ],
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    timeout: 2 * 60 * 1000, // 2 minutes
+    command: buildCommand,
+    cwd: path.resolve(__dirname, '../../../..'),
+    url: 'http://localhost:3000/templates/create-and-submit-templates',
+    reuseExistingServer: !process.env.CI,
+    stderr: 'pipe',
+  },
+});

tests/test-team/config/accessibility/accessibility.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 4 : undefined,
+  workers: process.env.CI ? 4 : 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
     ['line'],

tests/test-team/config/playwright.config.ts

@@ -0,0 +1,34 @@
+import { test as base } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+export type AxeFixture = {
+  makeAxeBuilder: () => AxeBuilder;
+};
+
+/*
+ * https://dequeuniversity.com/rules/axe/html/4.11 - search for wcag131
+ */
+const PRINCIPLE_1_GUIDELINE_1_1_3_1_AAA = [
+  'aria-hidden-body',
+  'aria-required-children',
+  'aria-required-parent',
+  'definition-list',
+  'dlitem',
+  'list',
+  'listitem',
+  'p-as-heading',
+  'table-fake-caption',
+  'td-has-header',
+  'td-headers-attr',
+  'th-has-data-cells',
+];
+
+export const test = base.extend<AxeFixture>({
+  makeAxeBuilder: async ({ page }, use) => {
+    const makeAxeBuilder = () =>
+      new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']); // This list is inclusive
+
+    await use(makeAxeBuilder);
+  },
+});
+export { expect } from '@playwright/test';

tests/test-team/fixtures/axe-test.ts

@@ -11,6 +11,8 @@
     "@faker-js/faker": "^9.9.0",
     "@nhsdigital/nhs-notify-event-schemas-template-management": "*",
     "@playwright/test": "^1.51.1",
+    "@axe-core/playwright": "^4.11.0",
+    "axe-core": "^4.11.0",
     "async-mutex": "^0.5.0",
     "aws-amplify": "^6.13.6",
     "date-fns": "^4.1.0",
@@ -30,6 +32,7 @@
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
+    "test:accessibility": "playwright test --project accessibility -c config/accessibility/accessibility.config.ts",
     "test:api": "playwright test --project api -c config/api/api.config.ts",
     "test:e2e": "playwright test --project e2e -c config/e2e/e2e.config.ts",
     "test:event": "playwright test -c config/event/event.config.ts",

tests/test-team/package.json

@@ -0,0 +1,4 @@
+export * from './campaign-id-required-page';
+export * from './choose-message-order-page';
+export * from './create-message-plan-page';
+export * from './message-plans-page';

tests/test-team/pages/routing/index.ts

@@ -1,5 +1,5 @@
 import { Locator, type Page } from '@playwright/test';
-import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
+import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingMessagePlansPage extends TemplateMgmtBasePageNonDynamic {
   static readonly pageUrlSegment = 'message-plans';

…team/pages/routing-message-plans-page.ts …team/pages/routing/message-plans-page.tstests/test-team/pages/routing-message-plans-page.ts renamed to tests/test-team/pages/routing/message-plans-page.ts tests/test-team/pages/routing-message-plans-page.ts renamed to tests/test-team/pages/routing/message-plans-page.ts

@@ -0,0 +1,92 @@
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+import { test, expect } from 'fixtures/axe-test';
+import {
+  RoutingChooseMessageOrderPage,
+  RoutingCreateMessagePlanPage,
+  RoutingMessagePlanCampaignIdRequiredPage,
+  RoutingMessagePlansPage,
+} from 'pages/routing';
+import { loginAsUser } from 'helpers/auth/login-as-user';
+import { TemplateMgmtBasePage } from 'pages/template-mgmt-base-page';
+import AxeBuilder from '@axe-core/playwright';
+
+let user: TestUser;
+let userWithMultipleCampaigns: TestUser;
+
+const routingStorageHelper = new RoutingConfigStorageHelper();
+
+async function run<T extends TemplateMgmtBasePage>(
+  page: T,
+  makeAxeBuilder: () => AxeBuilder,
+  fn?: (page: T) => Promise<void>
+) {
+  await page.loadPage();
+  if (fn) {
+    await fn(page);
+  }
+  const results = await makeAxeBuilder().analyze();
+  expect(results.violations).toEqual([]);
+}
+
+test.describe('Routing - Accessibility', () => {
+  test.beforeAll(async () => {
+    const authHelper = createAuthHelper();
+
+    user = await authHelper.getTestUser(testUsers.User1.userId);
+    userWithMultipleCampaigns = await authHelper.getTestUser(
+      testUsers.UserWithMultipleCampaigns.userId
+    );
+    await routingStorageHelper.seed([
+      RoutingConfigFactory.create(user).dbEntry,
+    ]);
+  });
+
+  test.afterAll(async () => {
+    await routingStorageHelper.deleteSeeded();
+  });
+
+  test('Message plans', async ({ page, makeAxeBuilder }) =>
+    run(new RoutingMessagePlansPage(page), makeAxeBuilder));
+
+  test('Campaign required', async ({ page, makeAxeBuilder }) =>
+    run(new RoutingMessagePlanCampaignIdRequiredPage(page), makeAxeBuilder));
+
+  test('Choose message order', async ({ page, makeAxeBuilder }) =>
+    run(new RoutingChooseMessageOrderPage(page), makeAxeBuilder));
+
+  test('Choose message order - error', async ({ page, makeAxeBuilder }) =>
+    run(new RoutingChooseMessageOrderPage(page), makeAxeBuilder, (p) =>
+      p.clickContinueButton()
+    ));
+
+  test.describe('client has multiple campaigns', () => {
+    test.use({ storageState: { cookies: [], origins: [] } });
+
+    test.beforeEach(async ({ page }) => {
+      await loginAsUser(userWithMultipleCampaigns, page);
+    });
+
+    test('Create message plan', async ({ page, makeAxeBuilder }) =>
+      run(
+        new RoutingCreateMessagePlanPage(page, {
+          messageOrder: 'NHSAPP,EMAIL,SMS,LETTER',
+        }),
+        makeAxeBuilder
+      ));
+
+    test('Create message plan - error', async ({ page, makeAxeBuilder }) =>
+      run(
+        new RoutingCreateMessagePlanPage(page, {
+          messageOrder: 'NHSAPP,EMAIL,SMS,LETTER',
+        }),
+        makeAxeBuilder,
+        (p) => p.clickSubmit()
+      ));
+  });
+});

tests/test-team/template-mgmt-accessibility/routing/routing.accessibility.spec.ts

@@ -36,7 +36,7 @@ import { TemplateMgmtUploadLetterMissingCampaignClientIdPage } from '../pages/le
 import { RoutingChooseMessageOrderPage } from '../pages/routing/choose-message-order-page';
 import { RoutingCreateMessagePlanPage } from '../pages/routing/create-message-plan-page';
 import { RoutingMessagePlanCampaignIdRequiredPage } from '../pages/routing/campaign-id-required-page';
-import { RoutingMessagePlansPage } from '../pages/routing-message-plans-page';
+import { RoutingMessagePlansPage } from '../pages/routing/message-plans-page';
 
 // Reset storage state for this file to avoid being authenticated
 test.use({ storageState: { cookies: [], origins: [] } });

tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { RoutingMessagePlansPage } from '../pages/routing-message-plans-page';
+import { RoutingMessagePlansPage } from '../pages/routing/message-plans-page';
 import {
   assertFooterLinks,
   assertSignOutLink,