@guidepup/playwright

Guidepup Playwright

Screen-reader driver for Playwright.

Providing a reliable set of APIs to automate your screen-reader a11y workflows in Playwright.

Getting Started

Install @guidepup/playwright to your project:

npm install --save-dev @guidepup/playwright

And get cracking with your first screen-reader tests in Playwright! 🚀

import { voTest as test } from "@guidepup/playwright";
import { expect } from "@playwright/test";

test.describe("Playwright VoiceOver", () => {
  test("I can navigate the Playwright website using VoiceOver", async ({
    page,
    vo,
  }) => {
    // Navigate to Playwright website 🎉
    await page.goto("https://playwright.dev/", {
      waitUntil: "domcontentloaded",
    });

    // Interact with the page 🙌
    await vo.commandInteractWithItem();

    // Move across the navigation menu to the search bar using VoiceOver 🔎
    while (!(await vo.getLastSpokenPhrase())?.startsWith("Search")) {
      await vo.moveNext();
    }

    // Search for Safari 👀
    await page.keyboard.type("Safari");
    await vo.performAction();
    expect(page.url()).toBe("https://playwright.dev/docs/browsers#webkit");
  });
});

Playwright Config

In your playwright.config.ts add the following for the best results with Guidepup for VoiceOver automation. 💥

import { devices, PlaywrightTestConfig } from "@playwright/test";
import { voConfig } from "@guidepup/playwright";

const config: PlaywrightTestConfig = {
  ...voConfig,
  
  // Your custom config ...
};

export default config;

Check out the configuration this adds here. 👀

Resources

Checkout the core @guidepup/guidepup project to learn more about how you can automate your screen-reader workflows using Guidepup.

License

MIT