Как тестировать вёрстку

Как тестировать вёрстку: руководство для QA-инженера

Тестирование вёрстки (UI-тестирование) — это критически важный процесс, который проверяет не только визуальное соответствие макету, но и корректность отображения интерфейса на разных устройствах, браузерах и в различных условиях. Это целый комплекс проверок, выходящий далеко за рамки простого сравнения «похоже или не похоже».

Основные аспекты тестирования вёрстки

1. Визуальное соответствие макету (Pixel-Perfect)

Это базовый этап, который часто выполняется вручную или с помощью автоматизированных инструментов.

• Сравнение со статичными макетами (Figma, Adobe XD, Zeplin): Проверка отступов, размеров шрифтов, цветов, теней, скруглений углов.
• Использование инструментов наложения: Например, расширения браузера, которые позволяют наложить PNG-макет поверх страницы и выявить расхождения.
• Проверка нативных компонентов: Убедиться, что кастомизированные элементы (чекбоксы, радиокнопки, селекты) соответствуют дизайн-системе.

2. Адаптивность и кроссбраузерность (Responsive & Cross-Browser)

• Адаптивность: Проверка корректного отображения и функционирования на разных разрешениях экрана (мобильные устройства, планшеты, десктопы). Используются инструменты:

    *   Встроенные в браузер инструменты разработчика (Device Toolbar в Chrome DevTools).
    *   Сервисы вроде BrowserStack, LambdaTest для тестирования на реальных устройствах.

• Кроссбраузерность: Проверка работы в основных браузерах (Chrome, Firefox, Safari, Edge) и их последних версиях. Важно обращать внимание на:

    *   Отображение шрифтов.
    *   Работу CSS-свойств (например, `grid`, `flexbox`).
    *   Поведение JavaScript.

3. Тестирование доступности (Accessibility / A11y)

Проверка, что интерфейсом могут пользоваться люди с ограниченными возможностями. Это часть тестирования вёрстки.

• Семантическая вёрстка: Правильное использование HTML-тегов (<header>, <nav>, <main>, <button> вместо <div>).
• ARIA-атрибуты: Проверка наличия и корректности атрибутов, улучшающих доступность (например, aria-label, aria-expanded).
• Навигация с клавиатуры: Все интерактивные элементы должны быть доступны через Tab и управляться с клавиатуры.
• Контрастность цветов: Соответствие стандартам WCAG (обычно минимум 4.5:1 для обычного текста). Проверяется инструментами вроде axe DevTools или Lighthouse.

4. Функциональность и взаимодействие (Interactive Elements)

Вёрстка — это не статичная картинка. Нужно проверять:

• Состояния элементов: Ховер (:hover), фокус (:focus), активное состояние (:active), отключенное (:disabled).
• Поведение динамических элементов: Раскрывающиеся меню, слайдеры, модальные окна, табы.
• Работа форм: Сообщения об ошибках, валидация, расположение подсказок (placeholder, label).

Практические методы и инструменты

Ручное тестирование

• Чек-листы: Структурированный список проверок по каждому из указанных выше аспектов.
• Визуальный осмотр в разных условиях: Изменение масштаба страницы, проверка при увеличении/уменьшении шрифта в браузере.

Автоматизированное тестирование

• Регрессионное визуальное тестирование: Инструменты типа Percy, Applitools, Chromatic делают скриншоты страниц и сравнивают их с эталонными, находя даже мельчайшие расхождения.
• Скриншот-тесты в Selenium/Playwright/Cypress: Можно интегрировать с библиотеками, например, jest-image-snapshot.
• Проверка доступности через автоматизацию:

  // Пример с использованием axe-core в Puppeteer
  const puppeteer = require('puppeteer');
  const axeCore = require('axe-core');
  
  (async () => {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto('https://ваш-сайт.ru');
  
      // Внедряем axe-core на страницу
      await page.addScriptTag({ path: require.resolve('axe-core') });
  
      // Запускаем аудит
      const results = await page.evaluate(() => axe.run());
      console.log('A11y violations:', results.violations);
  
      await browser.close();
  })();
  

Пример чек-листа для тестирования конкретного блока

Для проверки кнопки «Отправить» в форме:

1. Визуал: Соответствие макету по цвету, размеру, скруглению, тени, отступам от соседних элементов.
2. Типография: Шрифт, размер, высота строки, цвет текста, выравнивание.
3. Адаптивность: Кнопка корректно меняет размер/расположение на мобильной, планшетной и десктопной версиях.
4. Состояния:

    *   Ховер — меняется цвет/тень.
    *   Фокус — есть контур (outline), виден для навигации с клавиатуры.
    *   Активное состояние (`:active`) при нажатии.
    *   Состояние `:disabled` — серый цвет, курсор `not-allowed`.

1. Доступность:

    *   Элемент является `<button>` или имеет `role="button"`.
    *   Есть текстовое описание (либо внутри тега, либо `aria-label`).
    *   Доступен с клавиатуры (Tab, Enter/Space).

1. Функциональность: При клике/нажатии Enter форма отправляется, появляется индикатор загрузки (если предусмотрен).

Ключевые инструменты в арсенале QA

• Для инспектора: Chrome DevTools, Firefox Developer Tools.
• Для доступности: axe DevTools, Lighthouse, WAVE Evaluation Tool.
• Для визуального сравнения: PixelPerfect, Figma Mirror, PerfectPixel (плагин).
• Для автоматизации скриншотов: Selenium/Playwright + jest-image-snapshot, Percy.
• Для тестирования на множестве устройств: Эмуляторы браузера, BrowserStack, Sauce Labs.

Заключение

Тестирование вёрстки — это системный процесс, требующий внимания к деталям и понимания взаимосвязи между дизайном, кодом и пользовательским опытом. Идеальный подход — комбинация ручных проверок (особенно на этапе приемки нового функционала) и автоматизированных регрессионных тестов, которые не дадут новому коду сломать существующий интерфейс. Хороший QA-инженер, тестирующий вёрстку, выступает в роли защитника визуальной целостности и доступности продукта для всех пользователей.