За год, прошедший после моего последнего поста 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 г.