GithubHelp home page GithubHelp logo

phytonmk / guidepup-playwright Goto Github PK

View Code? Open in Web Editor NEW

This project forked from guidepup/guidepup-playwright

0.0 0.0 0.0 200 KB

Screen-reader driver for Playwright.

Home Page: https://guidepup.dev

License: MIT License

JavaScript 8.06% TypeScript 91.94%

guidepup-playwright's Introduction

Guidepup Playwright

Screen-reader driver for Playwright.

@guidepup/playwright available on NPM @guidepup/playwright test workflows @guidepup/playwright uses the MIT license

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.

License ๐Ÿฉ

MIT

guidepup-playwright's People

Contributors

cmorten avatar msereniti avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.