guidepup VS setup

// We use a special test instance from the Guidepup package // that gives us access to VoiceOver! import { voTest as test } from "@guidepup/playwright"; import { expect } from "@playwright/test"; // The test setup is exactly the same as normal for // Playwright, expect we now get a `voiceOver` object as well // as the `page` object! test.describe("Playwright VoiceOver", () => { test("I can navigate the Guidepup Github page", async ({ page, voiceOver, }) => { // Let's navigate to Guidepup GitHub page and wait for // page to be ready, nothing special here! await page.goto("https://github.com/guidepup/guidepup", { waitUntil: "domcontentloaded", }); await expect( page.locator('header[role="banner"]') ).toBeVisible(); // This is where things start to get awesome! Let's tell // VoiceOver to interact with the main page content, just // the same as you would when use VoiceOver normally. await voiceOver.interact(); // Let's do something a lil more exciting - move across // the page's headings until we reach the main Guidepup // repo title in the README using VoiceOver! while ((await voiceOver.itemText()) !== "Guidepup heading level 1") { await voiceOver.perform( voiceOver.keyboard.commands.findNextHeading ); } });

View on GitHub

End goal, having successfully found a way to program the ticking of this checkbox, is to build a library so folks can test their websites with screen readers in CI (ref: https://github.com/guidepup/guidepup).

You can head over to the Guidepup environment setup docs for more details, but I recommend trying out the @guidepup/setup package which is designed to get you setup no faff!