Один и тот же сайт разные люди открывают по-разному: кто-то в Chrome на большом мониторе, кто-то в Safari на iPhone, кто-то в старом браузере на дешёвом Android. И выглядеть он у всех может по-разному: где-то кнопка на месте, где-то уехала за край, где-то текст налез на картинку. Проверка, что продукт нормально работает везде, — это кроссбраузерное и мобильное тестирование.
Проверить абсолютно все сочетания браузеров и устройств невозможно — их бесконечно много. Поэтому здесь особенно важно выбирать разумный набор, а не гнаться за всем подряд.
Одна и та же страница на трёх ширинах. Вёрстка переключается не плавно, а на заданной ширине: ниже 768 пикселей три колонки схлопываются в одну, а меню уезжает в «гамбургер». Перестраивается при этом только то, что умеет: таблица с жёсткой шириной 720 пикселей остаётся прежней и уходит за правый край. Отсюда и горизонтальная прокрутка на телефоне — первое, что ищут при проверке адаптивности.
Почему сайт выглядит по-разному
Причины разного поведения:
- Разные браузеры (Chrome, Safari, Firefox, Edge) немного по-своему рисуют страницы и поддерживают разные возможности. То, что идеально в Chrome, может съехать в Safari.
- Разные размеры экрана. Большой монитор, ноутбук, планшет, телефон — ширина разная, и вёрстка под неё подстраивается. Переключается она не плавно, а на заданных ширинах (часто это 768 и 1200 пикселей), поэтому смотреть стоит по обе стороны от такой границы — это те же граничные значения.
- Разные устройства и системы. iPhone и Android ведут себя не одинаково: клавиатура, жесты, шрифты, поведение полей.
Способность сайта подстраиваться под размер экрана называют адаптивностью (responsive), и её проверка — большая часть мобильного тестирования.
Что именно проверять
Чек-лист для разных браузеров и экранов:
- Вёрстка не разъезжается. Ничего не налезает, не обрезано, не уходит за край, нет горизонтальной прокрутки на телефоне.
- Всё доступно и нажимается. Кнопки и ссылки не слишком мелкие для пальца (ориентир — сторона примерно в 44 точки), ничего не перекрыто.
- Функции работают. Формы отправляются, меню открывается, оплата проходит — не только «красиво», но и «работает».
- Специфика телефона: удобно ли вводить с экранной клавиатуры, работают ли жесты (свайпы), нормально ли ведёт себя при повороте экрана.
На телефоне ещё и медленный интернет — обычное дело: стоит посмотреть, не ломается ли продукт, пока всё грузится, и показывает ли он загрузку.
Как проверять: эмуляторы и реальные устройства
Способы дополняют друг друга, а не заменяют.
- Эмуляция в браузере. В DevTools есть режим, который показывает страницу как на телефоне выбранного размера. Это быстро и бесплатно, отлично подходит для проверки адаптивности вёрстки. Но это лишь имитация размера экрана — она не воспроизводит настоящее поведение iPhone или Android.
- Реальные устройства. Проверка на настоящем телефоне — самая честная: реальная клавиатура, реальный Safari, реальные жесты. Идеально, но держать под рукой десяток устройств невозможно.
- Облачные фермы устройств. Сервисы (по запросу «device farm»), где за деньги подключаешься к сотням реальных браузеров и устройств удалённо. Знать про них достаточно.
Разумный порядок: адаптивность и очевидные проблемы ловим эмуляцией в DevTools; ключевые сценарии перепроверяем на паре реальных устройств (обычно один iPhone и один Android).
Как выбрать набор
Набор выбирают по тому, чем реально пользуется ваша аудитория. Обычно у команды есть статистика: какие браузеры и устройства у пользователей. По ней берут самые популярные плюс пару «проблемных» (например, Safari на iPhone — частый источник особенностей). Здесь и помогает попарное тестирование: не все сочетания, а покрывающий минимум.
Где это применяется
Важные сценарии прогоняют хотя бы на нескольких браузерах и на телефоне: автотесты обычно ходят одним браузером, так что эта часть работы остаётся за ручной проверкой.
Где спотыкаются начинающие:
- Проверяют только в своём браузере на своём ноутбуке и считают, что «работает». У пользователя на телефоне может быть иначе.
- Верят эмуляции как реальному устройству. Режим телефона в DevTools имитирует размер, но не настоящее поведение — ключевое стоит перепроверить вживую.
- Пытаются охватить всё и тонут. Берите набор по реальной аудитории, а не «все браузеры мира».
Коротко
- Разница берётся из трёх мест: браузер по-своему рисует страницу, экран другой ширины, система телефона ведёт себя иначе.
- Вёрстка переключается на заданных ширинах: смотрят по обе стороны границы, а не только 1280 и 390.
- Горизонтальная прокрутка на телефоне — признак блока, который не умеет сжиматься: таблицы или картинки.
- Эмуляция в DevTools честна только про размер экрана: клавиатуру, жесты и настоящий Safari она не воспроизводит.
- Набор берут из статистики аудитории плюс пара «проблемных» устройств, а сочетания сокращают попарным подбором.
Что почитать дальше
- DevTools браузера для тестировщика — где включается режим телефона и как замедлить сеть.
- Техники тест-дизайна — граничные значения: почему смотрят 767 и 768, а не середину диапазона.
- Таблицы решений и попарное тестирование — как из сотен сочетаний браузеров и устройств получить короткий набор.
- QA в Agile и Scrum — как эти проверки встраиваются в работу команды.