Как протестировать соответствие веб-интерфейса дизайн-макетам?

Тестирование дизайна (UI-тестирование) — это проверка визуального соответствия реализации утвержденным макетам (Figma, Adobe XD, Sketch) и стандартам доступности.

Процесс и инструменты:

1. Пиксель-перфект проверка:

   • Наложение макета поверх реализованной страницы с помощью плагинов (PerfectPixel, Pixel Parallel) или режима наложения в Chrome DevTools.
   • Проверка точности отступов, размеров, выравнивания и пропорций.

2. Визуальная проверка атрибутов:

   • Цвета: Сверка HEX/RGB кодов с помощью пипетки (EyeDropper) в браузере или инструментах разработчика.

     /* Дизайн-макет: #2E7D32 */
     .primary-button {
     background-color: #2E7D32; /* Проверяем это значение */
     }

   • Шрифты: Проверка семейства шрифтов, размера (font-size), толщины (font-weight), межстрочного интервала (line-height).
   • Тени, скругления, границы: Сверка значений box-shadow, border-radius.

3. Проверка состояний элементов:

   • Hover, active, focus, disabled состояния для кнопок, ссылок и полей ввода.
   • Состояния валидации форм (success, error).

4. Кросс-браузерная и кроссплатформенная консистентность:

   • Проверка идентичности отображения в Chrome, Firefox, Safari, Edge.
   • Учет особенностей рендеринга на Windows vs macOS.

5. Доступность (Accessibility - A11y):

   • Проверка контрастности текста и фона (инструменты: Lighthouse, axe DevTools).
   • Наличие и осмысленность атрибутов alt у изображений.
   • Корректная семантическая разметка (заголовки h1-h6, списки, landmarks).
   • Управление с клавиатуры (порядок фокуса tabindex).