С чем сравнивают правильность отображения верстки

Критерии оценки правильности отображения верстки

В тестировании верстки (также известном как GUI Testing или Visual Regression Testing) мы сравниваем фактическое отображение интерфейса с эталоном или набором четко определенных критериев. Это не просто субъективная оценка "смотрится похоже", а системный процесс, основанный на сравнении с несколькими ключевыми точками отсчета.

1. Сравнение с утвержденным дизайн-макетом (Эталонный дизайн)

Это первичный и самый важный критерий. Верстка должна максимально точно соответствовать макетам, созданным дизайнером в инструментах типа Figma, Adobe XD или Sketch.

• Точное соответствие: Проверяются размеры, расположение, отступы (margin, padding), пропорции всех элементов (кнопок, полей ввода, изображений).
• Цветовая палитра: Сравнение точности цветов (hex, rgb), градиентов и теней. Часто используются инструменты для "захвата" пикселей и сравнения с эталонными значениями.
• Шрифты и типографика: Правильное использование указанных шрифтов (font-family), их размера (font-size), веса (font-weight), межстрочного интервала (line-height).

/* Пример: эталонные стили из макета должны быть реализованы в CSS */
.button-primary {
    background-color: #4A6FA5; /* Эталонный цвет из Figma */
    font-family: 'Roboto', sans-serif; /* Эталонный шрифт */
    padding: 12px 24px; /* Эталонные отступы */
    border-radius: 8px; /* Эталонный радиус скругления */
}

2. Сравнение с кросс-браузерными и кросс-платформенными ожиданиями (Консистентность)

Верстка должна работать и выглядеть консистентно (одинаково или с допустимыми отклонениями) на различных комбинациях:

• Браузеры: Chrome, Firefox, Safari, Edge.
• Операционные системы: Windows, macOS, Linux, мобильные ОС.
• Разрешения и устройства: Desktop, tablet, mobile (с учетом адаптивности).

Эталоном здесь служит поведение и отображение в основном (базовом) браузере, обычно Chrome или Firefox на десктопе. Мы сравниваем, чтобы в других окружениях не возникало критических отклонений:

• Неправильное позиционирование элементов.
• "Поломанные" или неработающие шрифты.
• Разные отображения CSS-правил (например, flexbox или grid).

3. Сравнение с техническими требованиями и стандартами

Это сравнение с "идеальной" или предписанной реализацией.

• Семантическая корректность: HTML должен быть структурирован согласно стандартам (правильное использование <header>, <main>, <button> вместо <div>), что влияет на доступность и SEO.
• Адаптивность и Responsive Design: На каждом контрольном размере экрана (брейкпоинте) верстка должна соответствовать макету, предназначенному именно для этого размера. Мы сравниваем реальное отображение на вьюпортах 320px, 768px, 1024px и т.д. с тем, что предусмотрено дизайном для этих случаев.
• Стандарты доступности (WCAG): Отображение должно обеспечивать доступность для пользователей с ограничениями. Например, правильные соотношения цвета текста и фона (color contrast), визуальные фокусы для элементов при навигации с клавиатуры.

4. Сравнение с предыдущим состоянием (Регрессионное тестирование)

В современных процессах используются инструменты визуального регрессионного тестирования (например, Percy, Applitools, Screenshot testing в Storybook). Здесь мы автоматически сравниваем текущую верстку (скриншот или snapshot) с эталонным скриншотом из предыдущей успешной версии.

// Пример концепции скриншот-теста в Jest + Puppeteer
test('Header layout should not change unintentionally', async () {
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const screenshot = await page.screenshot();
  
  // Сравнение с сохраненным эталонным изображением из прошлого коммита
  expect(screenshot).toMatchImageSnapshot();
});

Если сравнение выявляет различия (диффы), мы анализируем: это ожидаемое изменение (по задаче) или непреднамеренный регрессионный баг (например, из-за обновления CSS библиотеки).

5. Сравнение с поведением динамических элементов (Функциональная корректность)

Правильность верстки также оценивается в динамике, в сравнении с ожидаемым поведением:

• Интерактивные состояния: Как элемент выглядит в состояниях hover, focus, active, disabled? Эти состояния часто описаны в дизайн**-системе**.
• Анимации и переходы: Их продолжительность, плавность и траектория должны соответствовать макетам или техническому заданию.
• Загрузка данных: Отображение скелетонов (skeleton screens), спиннеров, состояния ошибки или пустого списка.

Процесс и инструменты сравнения

На практике QA Engineer использует комбинацию методов:

• Визуальный мануальный обзор на разных устройствах.
• Автоматизированные скриншот-тесты для захвата регрессий.
• Инструменты измерения (например, пипетки для цвета, rulers для размеров в браузере).
• Специализированные сервисы для кросс-браузерного тестирования (BrowserStack, Sauce Labs).
• Проверка через DevTools на соответствие CSS-свойств.

Ключевой вывод: Правильность верстки оценивается не по одному субъективному мнению, а путем системного сравнения с несколькими эталонами: статическими макетами дизайнера, функциональными требованиями, предыдущими стабильными версиями продукта и стандартами консистентности на разных платформах. Цель — обеспечить не только визуальную идентичность, но и функциональную, доступную и стабильную реализацию интерфейса для всех пользователей.