Как проверить верстку сайта в браузере

Как проверить верстку сайта в браузере: практическое руководство QA-инженера

Проверка верстки — это не просто «посмотрел, красиво или нет». Это систематический процесс валидации соответствия веб-страницы макетам (обычно из Figma, Adobe XD или Sketch), техническим требованиям и принципам адаптивного веб-дизайна. Я подхожу к этому как к многоуровневой проверке.

Инструменты и подходы для ручной проверки

Браузерные DevTools (инструменты разработчика) — это основной арсенал. Открываются через F12 или Ctrl+Shift+I (Cmd+Option+I на Mac).

• Инспектор элементов (Elements/Inspector): Позволяет «протыкать» любой элемент на странице, увидеть его HTML-разметку, CSS-стили, вычислинные значения, модель box model (отступы, границы, поля).

  <!-- Например, инспектор покажет, какой CSS применяется к этому div -->
  <div class="card" data-testid="product-card">
    <img src="product.jpg" alt="Product image">
  </div>
  

  /* И соответствующие стили, включая медиа-запросы */
  .card {
    width: 300px;
    padding: 20px;
  }
  @media (max-width: 768px) {
    .card {
      width: 100%;
    }
  }
  

• Адаптивный режим (Responsive Design Mode): Ключевой инструмент. Позволяет:

    *   Задать конкретные разрешения (мобильные, планшеты, десктоп).
    *   Эмулировать различные плотности пикселей (DPR), типы устройств и даже условия медленной сети (`Network throttling`).
    *   Проверить работу **медиа-запросов** (`@media`). Нужно не просто смотреть на несколько размеров, а плавно менять ширину окна, наблюдая за «точками перелома» верстки.

• Проверка доступности (Accessibility): Во вкладке Elements в панели DevTools (Chrome) есть секция Accessibility. Она показывает семантическую структуру (ARIA-атрибуты, роли, имя элемента), что критично для пользователей скринридеров. Проверяем:

    *   Контрастность текста (можно проверить в `Styles` по цветам).
    *   Корректность альтернативных текстов для изображений (`alt`).
    *   Логический порядок фокуса на элементах (табы).

Кросс-браузерное и кроссплатформенное тестирование

Верстка должна работать не только в Chrome.

• Основные браузеры: Последние версии Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge.
• Методика: Использую облачные сервисы (BrowserStack, Sauce Labs, LambdaTest), которые дают доступ к реальным браузерам на разных ОС (Windows, macOS, iOS, Android). Эмуляция в DevTools — хороша для первичной проверки, но финальный тест должен проходить на реальных девайсах или их симуляторах.

Критерии и типовые проверки

Формирую чек-лист для системной проверки:

• Соответствие макету (Pixel Perfect):

    *   Использую расширения (PerfectPixel, PixelParallel) для наложения PNG-макета на страницу.
    *   Проверяю отступы, размеры шрифтов, межстрочные интервалы (`line-height`), цвета. Важно учитывать, что в вебе понятие «пиксель-перфект» относительно из-за особенностей рендеринга в разных браузерах.

• Адаптивность и отзывчивость:

    *   Контрольные точки: 320px (малые мобильные), 375-425px (средние), 768px (планшеты), 1024-1280px (ноутбуки), 1440px+ (десктоп).
    *   Элементы не должны «наезжать» друг на друга, горизонтальные скроллбары не должны появляться без необходимости.
    *   Проверка поведения flex/grid-контейнеров при изменении размеров.

• Типографика и читаемость:

    *   Шрифты корректно загружаются (нет fallback на стандартные).
    *   Нет «скалывания» или переполнения текста в контейнерах.
    *   Переносы длинных слов (`overflow-wrap`, `hyphens`).

• Графика и медиа:

    *   Изображения респонсивны (`max-width: 100%`), не искажены.
    *   Правильное использование форматов (WebP с фолбэком).
    *   Сохранение пропорций (`aspect-ratio`).

• Интерактивные состояния:

    *   Визуальная обратная связь при `:hover`, `:focus`, `:active`.
    *   Состояния кнопок, полей ввода, ссылок.

• Валидность верстки: Быстрая проверка через сервис W3C Validator на предмет ошибок HTML/CSS.

Автоматизация визуальных проверок

Для регрессионного тестирования верстки на больших проектах применяю инструменты визуального регрессионного тестирования:

• Percy, Chromatic, Applitools: Делают снимки страниц (скриншоты) в разных разрешениях и сравнивают их с эталонными (baseline) после каждого изменения кода. Позволяют отлавливать незапланированные визуальные изменения.

Проверка верстки — это сочетание дотошного ручного анализа с помощью DevTools, строгого следования чек-листу, покрытия разнообразного окружения и, где это оправданно, внедрения автоматизации для контроля визуальной целостности. Ключевая цель — обеспечить одинаково предсказуемый, доступный и визуально корректный пользовательский опыт на любом устройстве и в любом современном браузере.