intermediate

Accessibility и visual regression checks

Комбинируйте semantic queries, automated accessibility checks, manual focus review и screenshot comparison для UI regressions.

Проверки доступности сочетают автоматические правила (axe, eslint-plugin-jsx-a11y) с ручным обходом с клавиатуры и screen reader. Тесты используют семантические запросы, которые падают при отсутствии labels или roles. Визуальная регрессия сравнивает скриншоты — Percy, Chromatic, Playwright snapshots — для незапланированных сдвигов вёрстки и темы.

Автоматический a11y не ловит логику focus order и осмысленный alt; визуальные diff требуют стабильных шрифтов и порогов против шума.

На интервью: что axe не ловит и как убрать шум visual snapshot в CI.

Типовые ошибки: snapshot всей страницы с динамическими timestamp, контраст только в dark mode, ослабление правил вместо исправления UI.

Компромисс — стоимость CI и поддержка baseline против регрессий, которые пользователь заметит сразу.

Чеклист:

  • axe на критичных component/page тестах.
  • Ручной tab через модалки и формы.
  • Стабильные visual baseline (шрифты, анимации off).