From 9533eb731091f813bf56881cd58463f84593ac05 Mon Sep 17 00:00:00 2001 From: Raphael Arce Date: Wed, 28 Feb 2024 14:25:00 +0100 Subject: [PATCH] fix: make a11y test work under firefox Signed-off-by: Raphael Arce --- tests/a11y.spec.ts | 130 +++++++++++++++++++++++++-------------------- 1 file changed, 71 insertions(+), 59 deletions(-) diff --git a/tests/a11y.spec.ts b/tests/a11y.spec.ts index d5c8791..4bce8cc 100644 --- a/tests/a11y.spec.ts +++ b/tests/a11y.spec.ts @@ -1,4 +1,4 @@ -import { expect, test } from "@playwright/test"; +import { expect, firefox, Page, test } from "@playwright/test"; function getTab(browserName: string) { if (browserName === "webkit") { @@ -8,108 +8,120 @@ function getTab(browserName: string) { return "Tab"; } -test.describe("Chromium and Webkit only", () => { - test.skip( - ({ browserName }) => browserName === "firefox", - "This test is only for Chromium and Webkit browsers, as using the tab key to change focus does not work in Firefox.", - ); +async function getPageWithUserPrefs(page: Page, browserName: string) { + if (browserName === "firefox") { + const browser = await firefox.launch({ + // this is necessary to make so firefox allows to navigate between focusable elements with the tab key + firefoxUserPrefs: { "accessibility.tabfocus": 7 }, + }); + + return browser.newPage(); + } + + return page; +} +test.describe("Chromium and Webkit only", () => { test("App should be usable with keyboard", async ({ page, browserName }) => { - await page.goto("http://localhost:5173/"); + const customPage = await getPageWithUserPrefs(page, browserName); + + await customPage.goto("http://localhost:5173/"); const tab = getTab(browserName); - await page.keyboard.press(tab); // move focus to language select - await page.keyboard.press(tab); // move focus to book appointment - await page.keyboard.press(tab); // move focus to next button + await customPage.keyboard.press(tab); // move focus to language select + await customPage.keyboard.press(tab); // move focus to book appointment + await customPage.keyboard.press(tab); // move focus to next button - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q1 = page.getByText("Meldest Du Dich zum ersten"); + const q1 = customPage.getByText("Meldest Du Dich zum ersten"); await expect(q1).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q2 = page.getByText("Bist Du verheiratet?"); + const q2 = customPage.getByText("Bist Du verheiratet?"); await expect(q2).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q3 = page.getByText("Hast Du Kinder unter 18 Jahren?"); + const q3 = customPage.getByText("Hast Du Kinder unter 18 Jahren?"); await expect(q3).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q4 = page.getByText("Hast Du die deutsche Staatsangehörigkeit?"); + const q4 = customPage.getByText( + "Hast Du die deutsche Staatsangehörigkeit?", + ); await expect(q4).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q5 = page.getByText("Kommst Du aus einem EU-Land?"); + const q5 = customPage.getByText("Kommst Du aus einem EU-Land?"); await expect(q5).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q6 = page.getByText("Bist Du unter 16 Jahre alt?"); + const q6 = customPage.getByText("Bist Du unter 16 Jahre alt?"); await expect(q6).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q7 = page.getByText("Bist Du Geflüchtete:r?"); + const q7 = customPage.getByText("Bist Du Geflüchtete:r?"); await expect(q7).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const q8 = page.getByText("Bleibst Du in einer anderen Wohnung gemeldet?"); + const q8 = customPage.getByText( + "Bleibst Du in einer anderen Wohnung gemeldet?", + ); await expect(q8).toBeVisible(); - await page.keyboard.press(tab); // move focus to info button - await page.keyboard.press(tab); // move focus to radio buttons - await page.keyboard.press("ArrowDown"); // chose no + await customPage.keyboard.press(tab); // move focus to info button + await customPage.keyboard.press(tab); // move focus to radio buttons + await customPage.keyboard.press("ArrowDown"); // chose no - await page.keyboard.press("Enter"); // click next button + await customPage.keyboard.press("Enter"); // click next button - const overview = page.getByRole("heading", { + const overview = customPage.getByRole("heading", { name: "Deine Dokumenten-Checkliste", }); - const registrationForm = page + const registrationForm = customPage .locator("div") .filter({ hasText: /^Anmeldeformular$/ }); - const movingInConfirmation = page - .locator("div") - .filter({ - hasText: /^Einzugsbestätigung des Wohnungsgebers\/Vermieters$/, - }); - const germanIdOrPassport = page + const movingInConfirmation = customPage.locator("div").filter({ + hasText: /^Einzugsbestätigung des Wohnungsgebers\/Vermieters$/, + }); + const germanIdOrPassport = customPage .locator("div") .filter({ hasText: /^Reisepass oder Passersatzpapiere$/ });