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,
voiceOver,
}) => {
// Navigate to Playwright website ๐
await page.goto("https://playwright.dev/", {
waitUntil: "domcontentloaded",
});
// Interact with the page ๐
await voiceOver.interact();
// Move across the navigation menu to the search bar using VoiceOver ๐
while (!(await voiceOver.lastSpokenPhrase())?.startsWith("Search")) {
await voiceOver.press("Tab");
}
await voiceOver.act();
// Search for Safari ๐
await voiceOver.type("Safari");
await voiceOver.press("ArrowDown");
await voiceOver.press("ArrowUp");
await voiceOver.press("Enter");
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,
use: {
...voConfig.use,
},
// 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/[email protected]
See Also ๐ถ
Checkout the core @guidepup/guidepup
project to learn more about how you can automate your screen-reader workflows
using Guidepup.