За год, прошедший после моего последнего поста A11y Testing: Automating ScreenReaders на тему автоматизации чтения с экрана, мы сейчас находимся в лучшем положении благодаря прогрессу, достигнутому в стандартах и ​​инструментах.

Приятно видеть, что Группа сообщества W3C ARIA-AT сформирована с миссией улучшить взаимодействие программ чтения с экрана путем создания набора спецификаций, стандартов тестирования и автоматизации тестирования, чтобы довести экосистему программ чтения с экрана до первоклассного инструментария.

«Обеспечение совместимости AT — это масштабная постоянная работа, требующая сотрудничества и поддержки в масштабах всей отрасли. Группа сообщества W3C ARIA-AT сосредоточилась на стабильном и зрелом наборе тестов для пяти программ чтения с экрана к концу 2023 года. В будущем мы планируем протестировать дополнительные программы чтения с экрана и другие виды вспомогательных технологий с более широким набором веб-дизайна. шаблоны и тестовый материал».

Источник: https://aria-at.w3.org/

Пока сообщество разработчиков стандартов медленно работает над достижением своей долгосрочной цели, я рад поделиться некоторыми инструментами автоматизации чтения с экрана, которые вы можете использовать сегодня! 🚀

Путеводитель для драматурга

В этом руководстве мы собираемся использовать пакет @guidepup/playwright для написания e2e-тестов для проверки доступности страниц для людей, использующих программу чтения с экрана VoiceOver для MacOS.

Пакет предоставляет надежный набор API-интерфейсов для автоматизации рабочих процессов чтения с экрана при использовании Playwright. Это достигается путем предоставления как конфигурации Playwright, так и пользовательского экземпляра Playwright test, который предоставляет объект voiceOver для управления VoiceOver.

Настройка

Создадим новый проект:

npm init

Установите пакет @guidepup/playwright как зависимость:

npm install @guidepup/playwright

Нам также понадобится Playwright в качестве средства запуска тестов для нашего браузера:

npm install @playwright/test

Наконец, мы хотим протестировать Safari с помощью Playwright, поэтому давайте воспользуемся их инструментом, чтобы получить доступ к браузеру:

npx playwright install webkit

Теперь у нас есть все необходимые зависимости! 🚀

Прикосновение к конфигурации

Создайте новый файл playwright.config.js:

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

const config: PlaywrightTestConfig = {
  ...voConfig,

  // Your custom config ...
};

export default config;

Здесь мы подтягиваем минимальный рекомендуемый конфиг Playwright для использования Guidepup — вы можете проверить его в исходном коде. Это устанавливает количество рабочих на 1 и задает для Playwright режим "заголовка", потому что, когда мы используем 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
      );
    }
});

Посмотрите комментарии в коде, чтобы узнать, что будет происходить в каждой части — довольно круто, да? 🙌

Последние проверки перед запуском

Чтобы автоматизировать программы чтения с экрана, сначала необходимо отсортировать несколько настроек уровня ОС!

Вы можете обратиться к Документам по настройке среды Guidepup для получения более подробной информации, но я рекомендую попробовать пакет @guidepup/setup, который предназначен для того, чтобы вы не тратили время на настройку!

npx @guidepup/setup

Теперь вы готовы к року! 🤘

Запуск вашего первого теста чтения с экрана

Никаких специальных команд здесь не требуется, как и в любом другом тесте Драматурга! Запустите команду, затем держите крепко — мы не хотим взаимодействовать с машиной во время выполнения теста, поскольку это может сместить фокус VoiceOver!

npx playwright test

Что дальше?

Чтобы узнать больше, существует множество материалов для чтения, модулей и документов — ознакомьтесь с некоторыми из них:

Пришло время попробовать некоторые тесты чтения с экрана e2e?

Дайте мне знать ваши мысли, вопросы и мнения в комментариях!

До следующего раза, ребята 👋

Первоначально опубликовано на https://dev.to 16 октября 2022 г.