npm install --save-dev @guidepup/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

npm init

@guidepup/playwright 패키지를 종속 항목으로 설치합니다.

npm install @guidepup/playwright

또한 브라우저의 테스트 러너로 Playwright가 필요합니다.

npm install @playwright/test

마지막으로 우리는 Playwright를 사용하여 Safari에 대해 테스트하고 싶으므로 그들의 도구를 사용하여 브라우저를 가져옵니다.

npx playwright install webkit

이제 필요한 모든 종속성이 있습니다! 🚀

구성 터치

새playwright.config.js 파일을 만듭니다.

import { voConfig } from "@guidepup/playwright";

const config: PlaywrightTestConfig = {
  ...voConfig,

  // Your custom config ...
};

export default config;

여기에서는 Guidepup을 사용하기 위한 최소 권장 Playwright 구성을 가져옵니다. 할 수 있습니다check it out in the source code. 이는 작업자 수를 1로 설정하고 Playwright가 "headed"모드를 사용하도록 설정합니다. VoiceOver를 사용할 때 한 번에 하나의 브라우저만 제어할 수 있기 때문입니다(그리고 이상적으로는 볼 수 있습니다!).

이제 첫 번째 테스트를 시작할 준비가 완전히 끝났습니다! 🎉

첫 번째 스크린 리더 테스트 작성

새 파일voiceover.spec.js을 만들고 다음 내용을 복사합니다.

// 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
      );
    }
});

각 부분에서 어떤 일이 일어날지 코드의 주석을 확인하세요 - 꽤 멋지죠? 🙌

출시 전 마지막 점검

스크린 리더를 자동화하려면 몇 가지 OS 수준 설정을 먼저 정렬해야 합니다!

Guidepup environment setup docs에서 자세한 내용을 확인할 수 있지만, 설정을 쉽게 할 수 있도록 설계된 @guidepup/setup 패키지를 사용해 보는 것이 좋습니다!

npx @guidepup/setup

이제 흔들릴 준비가 되었습니다! 🤘

첫 번째 스크린 리더 테스트 실행

여기에는 다른 Playwright 테스트와 마찬가지로 특별한 명령이 필요하지 않습니다! 명령을 실행한 다음 꽉 잡으세요. 테스트가 실행되는 동안에는 기계와 상호 작용하지 않으려고 합니다. 기계가 VoiceOver의 초점을 이동할 수 있기 때문입니다!

npx playwright test

무엇 향후 계획?

자세한 내용을 보려면 읽기, 모듈 및 문서의 전체 로드가 있습니다. 다음 중 일부를 확인하세요.

https://www.guidepup.dev/

https://github.com/guidepup

일부 e2e 스크린 리더 테스트를 시도할 시간입니까?

아래 의견에 귀하의 생각, 질문 및 의견을 알려주십시오!

다음 시간까지 여러분 👋