QA-чеклист проверки вёрстки

Гайд QA по проверке интерфейса и вёрстки: интерактив, адаптив, навигация, регресс и правила заведения замечаний.

QA чеклист/гайд по проверке интерфейса

Интерактив и доступность

• Проверить, что все интерактивные элементы (аккордеоны и т.д.) работают корректно.
• Проверить корректность состояний: hover / active / focus / disabled.
• Убедиться, что инпуты работают.
• Проверить tab-навигацию: порядок логичный, фокус не «теряется», переходы ожидаемые.

Устойчивость на разных экранах и адаптив

• Проверка на основных размерах mobile / tablet / desktop
• Проверка при увеличении масштаба страницы (≈125%).
• Убедиться, что:
  • ничего не наезжает друг на друга и не пропадает.
  • нет горизонтального скролла.
  • sticky/header/footer не перекрывают контент.
• Проверить поведение при контент-стрессе:
  • длинный текст
  • пустые значения
  • большие числа
  • переносы

Убедиться, что верстка не ломается.

Навигация / меню

• На десктопных разрешениях меню отображается полным горизонтальным списком, без сворачивания в sandwich/burger.
• Sandwich/burger используется только на мобильных и планшетных разрешениях, если это предусмотрено дизайном.
• При стандартных десктопных размерах экрана пункты меню не обрезаются и не уезжают в overflow.

Визуальная проверка (качество верстки)

• Проверить, что сетка и выравнивания не кривые.
• Убедиться, что нет “грязи”.
• Проверить типографику на логичность:
  • размеры/веса
  • заголовки выглядят как заголовки
• Проверить, что контраст читаемый.
• Убедиться, что нет критических отклонений от макета.

Регресс

• Проверить, не сломаны ли страницы/компоненты на проде (можно сверять через девтулз).
• Проверить основные браузеры: mobile Chrome, desktop Chrome, mobile Firefox, mobile Safari

Как писать QA-замечания

Фиксировать фактическое поведение:

• что отображается или работает не так
• при каких условиях (экран, браузер)

Не заводим как баги

• до 2px считаем погрешностью в верстке, только если это визуально не заметно, например выравнивание или привязка к другим элементам.
• Если макет конфликтует с правилами проекта или UX-логикой (например, шрифта нет в проекте или решение из макета ломает sticky-footer).

🔗 Связанные заметки

• Шаблоны URL страниц для вёрстки
• Trello — колонки, правила и автоматизации
• Шаблон карточки задачи (Bug · Feature · QA)

---

Источник: карточка Trello #13 · открыть в Trello