@guidepup/playwright

Guidepup Playwright

Screen reader driver for Playwright tests.

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 Guidepup Github page", async ({
    page,
    voiceOver,
  }) => {
    // Navigate to Guidepup GitHub page
    await page.goto("https://github.com/guidepup/guidepup", {
      waitUntil: "domcontentloaded",
    });

    // Wait for page to be ready and interact
    await expect(page.locator('header[role="banner"]')).toBeVisible();
    await voiceOver.interact();

    // Move across the page menu to the Guidepup heading using VoiceOver
    while ((await voiceOver.itemText()) !== "Guidepup heading level 1") {
      await voiceOver.perform(voiceOver.keyboard.commands.findNextHeading);
    }
});

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 in the voConfig.ts file.

Environment Setup

Setup your environment for screen-read automation with @guidepup/setup:

npx @guidepup/setup

If you are using GitHub Actions, check out the dedicated guidepup/setup-action:

- name: Setup Environment
  uses: guidepup/setup-action@0.7.0

Example

Check out this VoiceOver example.

See Also

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

License

MIT