Тестирование адаптивного дизайна

Что такое адаптивный дизайн #

Адаптивный дизайн означает, что веб-приложение подстраивает свой макет и контент для корректной работы на любом размере экрана — от мобильного телефона с экраном 320px до ультраширокого монитора 2560px. Вместо создания отдельных мобильной и десктопной версий, единая кодовая база адаптируется с помощью CSS media queries.

Для QA-инженеров адаптивное тестирование — это проверка того, что эта адаптация работает корректно при каждом размере, а не только на тех, которые имел в виду дизайнер.

Распространённые breakpoints #

Большинство дизайн-систем используют стандартные breakpoints на основе типичных ширин устройств:

Это ориентиры, а не правила. Breakpoints вашего приложения зависят от используемой дизайн-системы. Уточните у команды дизайна или изучите CSS на предмет фактических значений @media query.

Методология тестирования #

Тест изменения размера #

Наиболее эффективная техника адаптивного тестирования проста: медленно изменяйте размер браузера от самого широкого к самому узкому, наблюдая за страницей.

1. Откройте страницу в десктопном браузере
2. Возьмитесь за правый край окна браузера
3. Медленно тяните влево, уменьшая ширину
4. Следите за любыми из этих проблем:
   • Контент выходит за пределы контейнера (появляется горизонтальная полоса прокрутки)
   • Текст перекрывает другой текст или изображения
   • Навигация ломается или становится недоступной
   • Изображения растягиваются, сжимаются или исчезают
   • Кнопки становятся слишком маленькими для нажатия
   • Появляется пустое пространство, которого не должно быть
   • Элементы прыгают или перестраиваются неуклюже

Эта техника ловит баги между breakpoints, которые тестирование на фиксированной ширине пропускает. Макет может выглядеть идеально на 768px и 375px, но ломаться на 500px.

Эмуляция устройств в DevTools #

Режим устройств Chrome DevTools (Ctrl+Shift+M) предлагает точный контроль viewport:

• Предустановленные устройства: Выбирайте из профилей iPhone, Pixel, iPad и других
• Произвольные размеры: Вводите точные значения ширины и высоты
• Адаптивный режим: Перетаскивайте ручки для свободного изменения размера с отображением точных размеров
• Device pixel ratio: Имитация дисплеев с высокой плотностью пикселей (Retina)
• Имитация touch: Тестирование сенсорных взаимодействий без физического устройства

Ключевые размеры viewport для тестирования #

Как минимум, тестируйте эти ширины:

• 320px: Наименьшая поддерживаемая мобильная ширина
• 375px: Наиболее распространённая мобильная ширина
• 768px: Breakpoint планшета — здесь происходят основные изменения макета
• 1024px: Ноутбук/планшет горизонтально
• 1440px: Стандартный десктоп

Также тестируйте на ширинах чуть ниже и выше каждого breakpoint (767px и 769px, например), чтобы убедиться в плавности переходов.

Типичные адаптивные баги #

Переполнение контента #

Самый частый адаптивный баг. Контент выходит за пределы контейнера, создавая горизонтальную полосу прокрутки на мобильных.

Частые причины:

• Элементы с фиксированной шириной (напр., width: 600px), которые не уменьшаются
• Длинные URL или неразрывные слова, которые не переносятся
• Изображения без max-width: 100%
• Таблицы шире viewport

Как обнаружить: Прокрутите горизонтально в мобильном виде. Если можете прокрутить вправо — что-то переполняется.

Размер touch-целей #

Мобильные пользователи нажимают пальцами, а не курсором мыши. Кнопки и ссылки должны быть достаточно большими для точного нажатия.

Рекомендация Google: Touch-цели должны быть минимум 48x48 CSS-пикселей с отступом 8px между целями.

Типичные нарушения:

• Ссылки навигации слишком близко друг к другу
• Маленькие чекбоксы или радиокнопки без увеличенной зоны нажатия
• Ссылки в подвале сжаты вместе
• Кнопки закрытия модальных окон слишком маленькие

Сворачивание навигации #

Десктопная навигация со множеством пунктов обычно сворачивается в меню-гамбургер на мобильных. Проверьте:

• Появляется ли меню-гамбургер на нужном breakpoint?
• Все ли пункты меню отображаются при открытии?
• Закрывается ли меню при нажатии вне его?
• Закрывается ли меню при выборе пункта?
• Можно ли навигировать клавиатурой при открытом меню-гамбургере?

Проблемы типографики #

Текст, отлично выглядящий на десктопе, может стать нечитаемым на мобильных:

• Размеры шрифта слишком маленькие для мобильного чтения (минимум 16px для основного текста)
• Длина строк слишком большая на широких экранах (оптимально: 45-75 символов на строку)
• Текст заголовков слишком крупный для мобильных, вызывающий проблемы с переносом
• Межбуквенный или межсловный интервал ломается на узких экранах

Продвинутое адаптивное тестирование #

Тестирование ориентации #

Мобильные устройства можно поворачивать между вертикальной и горизонтальной ориентацией. Это кардинально меняет размеры viewport (напр., 375x812 вертикально vs. 812x375 горизонтально).

Проверьте:

• Адаптацию макета при смене ориентации
• Контент, скрытый в вертикальной ориентации, появляющийся в горизонтальной (или наоборот)
• Сохранение данных форм при смене ориентации (пользователи не должны терять набранные данные)
• Корректное изменение размера модальных диалогов
• Правильную адаптацию элементов с фиксированной позицией (header, footer)

В DevTools переключайте ориентацию иконкой поворота в режиме устройства.

Тестирование адаптивных изображений #

Изображения должны адаптироваться к разным размерам экрана как для визуального качества, так и для производительности:

• Атрибут srcset: Загружает ли браузер изображения подходящего размера? Мобильное устройство не должно скачивать изображение шириной 4000px.
• Арт-дирекция: Некоторые дизайны показывают разные кадрировки изображений при разных размерах. Элемент <picture> обрабатывает это — проверьте, что правильная кадрировка отображается на каждом breakpoint.
• Ленивая загрузка: Изображения ниже видимой области должны загружаться только при прокрутке до них. Проверяйте, наблюдая за вкладкой Network при прокрутке.

Упражнение: Адаптивный аудит #

Выберите веб-приложение и проведите полный адаптивный аудит:

1. Начните с 1920px ширины. Задокументируйте макет: сколько колонок? Где навигация?
2. Медленно уменьшите до 1440px. Отметьте изменения.
3. Продолжите до 1024px. Макет должен значительно измениться. Навигация сворачивается?
4. Продолжите до 768px. Планшетный макет. Проверьте, что весь контент доступен.
5. Продолжите до 375px. Мобильный макет. Проверьте:
   • Можете ли вы комфортно читать весь текст?
   • Достаточно ли велики touch-цели?
   • Переполняется ли какой-либо контент?
   • Доступна ли навигация?
6. Перейдите к 320px. Наименьшая распространённая ширина. Что-нибудь ломается?
7. Протестируйте горизонтальную ориентацию при высоте 375px, ширине 812px.

Создайте баг-репорт для каждой найденной проблемы:

Чеклист адаптивного тестирования #

Используйте этот чеклист для каждой сессии адаптивного тестирования:

Макет:

• Нет горизонтальной прокрутки ни на какой ширине
• Сетка/колоночный макет адаптируется на каждом breakpoint
• Боковая панель сворачивается или перемещается под основной контент на мобильных
• Подвал выстраивается вертикально на мобильных

Навигация:

• Десктопная навигация видна на широких экранах
• Меню-гамбургер появляется на правильном breakpoint
• Все пункты меню доступны в мобильном меню
• Меню закрывается корректно

Типографика:

• Основной текст читаем без увеличения (16px+)
• Заголовки не переполняются на мобильных
• Длина строки разумна на всех размерах экрана

Медиа:

• Изображения масштабируются без искажений
• Видео адаптивны (не фиксированной ширины)
• Встроенный контент (карты, iframe) адаптируется

Формы:

• Поля ввода на полную ширину на мобильных
• Метки видимы и связаны с полями ввода
• Клавиатура не закрывает поля ввода
• Кнопка отправки легко нажимается

Взаимодействие:

• Touch-цели минимум 48x48px
• Достаточные отступы между интерактивными элементами
• Для hover-взаимодействий есть touch-альтернативы

Ключевые выводы #

• Адаптивный дизайн подстраивает макет под любой размер экрана с помощью CSS breakpoints
• Тест изменения размера (медленное сужение браузера) ловит баги между breakpoints
• Тестируйте на стандартных ширинах (320, 375, 768, 1024, 1440) плюс пользовательских ширинах около breakpoints
• Переполнение контента — самый частый адаптивный баг, всегда проверяйте горизонтальную прокрутку
• Touch-цели должны быть минимум 48x48px для мобильного удобства
• Тестируйте и вертикальную, и горизонтальную ориентацию на мобильных
• Используйте систематический чеклист, покрывающий макет, навигацию, типографику, медиа, формы и взаимодействия