Add a11y Playwright tests (#11955)

.gitignore

@@ -20,4 +20,4 @@ services/database/local_buckets
 tests/test-results/
 tests/playwright-report/
 tests/playwright/.cache/
-tests/playwright/.auth
+tests/.auth/

tests/playwright/pages/admin.spec.ts

@@ -0,0 +1,8 @@
+import { test } from "../utils/fixtures/base";
+
+test("Is accessible on all device types for admin user", async ({
+  adminHomePage,
+}) => {
+  await adminHomePage.goto("/admin");
+  await adminHomePage.e2eA11y();
+});

tests/playwright/pages/help.spec.ts

@@ -0,0 +1,12 @@
+import { test } from "@playwright/test";
+import { e2eA11y, logInAdminUser, logInStateUser } from "../utils";
+
+test("Is accessible on all device types for state user", async ({ page }) => {
+  await logInStateUser(page);
+  await e2eA11y(page, "/help");
+});
+
+test("Is accessible on all device types for admin user", async ({ page }) => {
+  await logInAdminUser(page);
+  await e2eA11y(page, "/help");
+});

tests/playwright/pages/profile.spec.ts

@@ -0,0 +1,45 @@
+import { test } from "../utils/fixtures/base";
+import { BrowserContext, Page } from "@playwright/test";
+import ProfilePage from "../utils/pageObjects/profile.page";
+
+let adminPage: Page;
+let userPage: Page;
+let adminContext: BrowserContext;
+let userContext: BrowserContext;
+
+test.beforeAll(async ({ browser }) => {
+  adminContext = await browser.newContext({
+    storageState: ".auth/admin.json",
+  });
+  adminPage = await adminContext.newPage();
+
+  userContext = await browser.newContext({
+    storageState: ".auth/user.json",
+  });
+  userPage = await userContext.newPage();
+});
+
+test.afterAll(async () => {
+  await adminContext.close();
+  await userContext.close();
+});
+
+test.describe("Admin profile", () => {
+  test(
+    "Is accessible on all device types for admin user",
+    { tag: "@admin" },
+    async () => {
+      const profilePage = new ProfilePage(adminPage);
+      await profilePage.goto();
+      await profilePage.e2eA11y();
+    }
+  );
+});
+
+test.describe("State user profile", { tag: "@user" }, () => {
+  test("Is accessible on all device types for state user", async () => {
+    const profilePage = new ProfilePage(userPage);
+    await profilePage.goto();
+    await profilePage.e2eA11y();
+  });
+});

tests/playwright/utils/auth.setup.ts

@@ -2,7 +2,7 @@ import { test as setup } from "@playwright/test";
 
 import { adminPassword, adminUser, statePassword, stateUser } from "./consts";
 
-const adminFile = "playwright/.auth/admin.json";
+const adminFile = ".auth/admin.json";
 
 setup("authenticate as admin", async ({ page }) => {
   await page.goto("/");
@@ -22,7 +22,7 @@ setup("authenticate as admin", async ({ page }) => {
   await page.context().storageState({ path: adminFile });
 });
 
-const userFile = "playwright/.auth/user.json";
+const userFile = ".auth/user.json";
 
 setup("authenticate as user", async ({ page }) => {
   await page.goto("/");

tests/playwright/utils/fixtures/base.ts

@@ -10,15 +10,15 @@ type CustomFixtures = {
 export const baseTest = base.extend<CustomFixtures>({
   stateHomePage: async ({ browser }, use) => {
     const context = await browser.newContext({
-      storageState: "playwright/.auth/user.json",
+      storageState: ".auth/user.json",
     });
     const stateHomePage = new StateHomePage(await context.newPage());
     await use(stateHomePage);
     await context.close();
   },
   adminHomePage: async ({ browser }, use) => {
     const context = await browser.newContext({
-      storageState: "playwright/.auth/admin.json",
+      storageState: ".auth/admin.json",
     });
     const adminHomePage = new AdminHomePage(await context.newPage());
     await use(adminHomePage);

tests/playwright/utils/pageObjects/profile.page.ts

@@ -0,0 +1,21 @@
+import { Locator, Page } from "@playwright/test";
+import BasePage from "./base.page";
+
+export default class ProfilePage extends BasePage {
+  public path = "/profile";
+
+  readonly page: Page;
+  readonly title: Locator;
+  readonly bannerEditorButton: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.title = page.getByRole("heading", {
+      name: "My Account",
+    });
+    this.bannerEditorButton = page.getByRole("button", {
+      name: "Banner Editor",
+    });
+  }
+}