Автоматизация тестирования программы чтения с экрана в macOS с помощью Auto VO

Если вы такой же фанат специальных возможностей, как я, или просто интересуетесь вспомогательными технологиями, вам понравится Auto-VO. Auto-VO — это модуль узла и интерфейс командной строки для автоматизированного тестирования веб-контента с помощью средства чтения с экрана VoiceOver в macOS.

Я создал Auto VO, чтобы разработчики, продакт-менеджеры и специалисты по контролю качества могли быстрее выполнять повторяемые автоматизированные тесты с помощью реальных вспомогательных технологий, не пугаясь необходимости учиться пользоваться программой чтения с экрана.

Пойдем!

Сначала давайте посмотрим на это в действии, а потом я более подробно расскажу о том, как это работает. Вот запуск CLI auto-vo на smashingmagazine.com, чтобы получить весь вывод VoiceOver в виде текста.

 $ auto-vo --url https://smashingmagazine.com --limit 200 > output.txt $ cat output.txt link Jump to all topics link Jump to list of all articles link image Smashing Magazine list 6 items link Articles link Guides 2 of 6 link Books 3 of 6 link Workshops 4 of 6 link Membership 5 of 6 More menu pop up collapsed button 6 of 6 end of list end of navigation ...(truncated)

Похоже на разумную структуру страницы: у нас есть пропущенные навигационные ссылки, хорошо структурированные списки и семантическая навигация. Отличная работа! Однако давайте копнем немного глубже. Какова структура заголовка?

 $ cat output.txt | grep heading heading level 2 link A Complete Guide To Accessibility Tooling heading level 2 link Spinning Up Multiple WordPress Sites Locally With DevKinsta heading level 2 link Smashing Podcast Episode 39 With Addy Osmani: Image Optimization heading level 2 2 items A SMASHING GUIDE TO Accessible Front-End Components heading level 2 2 items A SMASHING GUIDE TO CSS Generators & Tools heading level 2 2 items A SMASHING GUIDE TO Front-End Performance 2021 heading level 4 LATEST POSTS heading level 1 link When CSS Isn't Enough: JavaScript Requirements For Accessible Components heading level 1 link Web Design Done Well: Making Use Of Audio heading level 1 link Useful Front-End Boilerplates And Starter Kits heading level 1 link Three Front-End Auditing Tools I Discovered Recently heading level 1 link Meet :has, A Native CSS Parent Selector (And More) heading level 1 link From AVIF to WebP: A New Smashing Book By Addy Osmani

Хм! Что-то не так с нашей иерархией заголовков. Мы должны увидеть схему с одним заголовком первого уровня и упорядоченной иерархией после него. Вместо этого мы видим некоторую мешанину уровня 1, уровня 2 и ошибочного уровня 4. Это требует внимания, поскольку влияет на удобство навигации пользователей программ чтения с экрана при навигации по странице.

Вывод программы чтения с экрана в виде текста — это здорово, потому что такой анализ становится намного проще.

Некоторая предыстория

VoiceOver — это средство чтения с экрана в macOS. Средства чтения с экрана позволяют людям читать содержимое приложения вслух, а также взаимодействовать с содержимым. Это означает, что люди со слабым зрением или слепые теоретически могут получить доступ к контенту, включая веб-контент. Однако на практике 98% целевых страниц в Интернете имеют очевидные ошибки, которые можно выявить с помощью автоматизированного тестирования и проверки.

Существует множество инструментов для автоматизированного тестирования и проверки, в том числе AccessLint.com для автоматической проверки кода (раскрытие информации: я создал AccessLint) и Axe, обычное средство автоматизации. Эти инструменты важны и полезны, но они являются лишь частью общей картины. Ручное тестирование не менее, а может быть, и более важно, но требует больше времени и может быть пугающим.

Возможно, вы слышали совет «просто включите программу чтения с экрана и слушайте», чтобы получить представление о слепом опыте. Я думаю, что это неправильно. Программы для чтения с экрана — это сложные приложения, на освоение которых могут уйти месяцы или годы, и поначалу они сложны. Случайное использование его для имитации слепого опыта может привести к тому, что вы пожалеете слепых людей или, что еще хуже, попытаетесь «исправить» этот опыт неправильным образом.

Я видел, как люди впадали в панику, когда включали VoiceOver, не зная, как его отключить. Auto-VO управляет жизненным циклом программы чтения с экрана за вас. Он автоматизирует запуск, управление и закрытие VoiceOver, поэтому вам не нужно этого делать. Вместо того, чтобы пытаться слушать и не отставать, выходные данные возвращаются в виде текста, который вы затем можете прочитать, оценить и зафиксировать для дальнейшего использования в качестве ссылки в ошибке или для автоматического создания моментальных снимков.

Применение

Предостережение

Прямо сейчас, из-за необходимости включения AppleScript для VoiceOver, для запуска может потребоваться пользовательская конфигурация компьютеров сборки CI.

Сценарий 1: ОК и приемка

Допустим, у меня (разработчика) есть дизайн с синими аннотациями, где дизайнер добавил описания таких вещей, как доступное имя и роль. После создания функции и просмотра разметки в инструментах разработчика Chrome или Firefox я хочу вывести результаты в текстовый файл, чтобы, когда я отмечаю функцию как завершенную, мой менеджер по программному обеспечению мог сравнить вывод программы чтения с экрана со спецификациями дизайна. . Я могу сделать это с помощью CLI auto-vo и вывести результаты в файл или на терминал. Мы видели пример этого ранее в статье:

 $ auto-vo --url https://smashingmagazine.com --limit 100

Сценарий 2: Разработка через тестирование

И вот я снова в роли разработчика, создаю свою функцию с помощью аннотированного дизайна. Я хочу протестировать контент, чтобы потом не пришлось рефакторить разметку, чтобы она соответствовала дизайну. Я могу сделать это, используя модуль узла auto-vo, импортированный в мою предпочитаемую программу запуска тестов, например Mocha.

 $ npm install --save-dev auto-vo import { run } from 'auto-vo'; import { expect } from 'chai'; describe('loading example.com', async () => { it('returns announcements', async () => { const options = { url: 'https://www.example.com', limit: 10, until: 'Example' }; const announcements = await run(options); expect(announcements).to.include.members(['Example Domain web content']); }).timeout(5000); });

Под капотом

Auto-VO использует комбинацию сценариев оболочки и AppleScript для управления VoiceOver. Копаясь в приложении VoiceOver, я наткнулся на интерфейс командной строки, который поддерживает запуск VoiceOver из командной строки.

 /System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

Затем ряд исполняемых файлов JavaScript управляет инструкциями AppleScript для навигации и захвата объявлений VoiceOver. Например, этот скрипт получает последнюю фразу из объявлений программы чтения с экрана:

 function run() { const voiceOver = Application('VoiceOver'); return voiceOver.lastPhrase.content(); }

В заключение

Я хотел бы узнать о вашем опыте работы с auto-vo и приветствовать ваши комментарии на GitHub. Попробуйте и дайте мне знать, как это работает!