Один и тот же сайт разные люди открывают по-разному: кто-то в Chrome на большом мониторе, кто-то в Safari на iPhone, кто-то в старом браузере на дешёвом Android. И выглядит он у всех может по-разному: где-то кнопка на месте, где-то уехала за край, где-то текст налез на картинку. Проверка, что продукт нормально работает везде, — это кроссбраузерное и мобильное тестирование.

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

Почему сайт выглядит по-разному

Причины разного поведения:

  • Разные браузеры (Chrome, Safari, Firefox, Edge) немного по-своему рисуют страницы и поддерживают разные возможности. То, что идеально в Chrome, может съехать в Safari.
  • Разные размеры экрана. Большой монитор, ноутбук, планшет, телефон — ширина разная, и вёрстка должна под неё подстраиваться.
  • Разные устройства и системы. iPhone и Android ведут себя не одинаково: клавиатура, жесты, шрифты, поведение полей.

Способность сайта подстраиваться под размер экрана называют адаптивностью (responsive). На широком экране — три колонки, на телефоне — одна, меню прячется в «гамбургер». Проверка адаптивности — большая часть мобильного тестирования.

Что именно проверять

Типичный чек-лист для разных браузеров и экранов:

  • Вёрстка не разъезжается. Ничего не налезает, не обрезано, не уходит за край, нет горизонтальной прокрутки на телефоне.
  • Всё доступно и нажимается. Кнопки и ссылки не слишком мелкие для пальца, ничего не перекрыто.
  • Функции работают. Формы отправляются, меню открывается, оплата проходит — не только «красиво», но и «работает».
  • Специфика телефона: удобно ли вводить с экранной клавиатуры, работают ли жесты (свайпы), нормально ли ведёт себя при повороте экрана.

Отдельно помните: на телефоне часто медленный интернет. Полезно проверить, как продукт ведёт себя, когда всё грузится долго, — не ломается ли, показывает ли загрузку.

Как проверять: эмуляторы и реальные устройства

Есть два способа, и они дополняют друг друга.

  • Эмуляция в браузере. В DevTools есть режим, который показывает страницу как на телефоне выбранного размера. Это быстро и бесплатно, отлично подходит для проверки адаптивности вёрстки. Но это лишь имитация размера экрана — она не воспроизводит настоящее поведение iPhone или Android.
  • Реальные устройства. Проверка на настоящем телефоне — самая честная: реальная клавиатура, реальный Safari, реальные жесты. Идеально, но держать под рукой десяток устройств невозможно.
  • Облачные фермы устройств. Существуют сервисы (по запросу «device farm», «cross browser testing»), где можно за деньги подключиться к сотням реальных браузеров и устройств удалённо. На старте знать про них достаточно.

Разумный подход новичка: адаптивность и очевидные проблемы ловим эмуляцией в DevTools; ключевые сценарии перепроверяем на паре реальных устройств (обычно один iPhone и один Android).

Как выбрать набор

Проверять все браузеры и телефоны нереально. Набор выбирают по тому, чем реально пользуется ваша аудитория. Обычно у команды есть статистика: какие браузеры и устройства у пользователей. По ней берут самые популярные плюс пару «проблемных» (например, Safari на iPhone — частый источник особенностей). Это тот самый случай, где помогает попарное тестирование: не все сочетания, а покрывающий минимум.

Где это применяется

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

Где спотыкаются начинающие:

  • Проверяют только в своём браузере на своём ноутбуке и считают, что «работает». У пользователя на телефоне может быть иначе.
  • Верят эмуляции как реальному устройству. Режим телефона в DevTools имитирует размер, но не настоящее поведение — ключевое стоит перепроверить вживую.
  • Пытаются охватить всё и тонут. Берите набор по реальной аудитории, а не «все браузеры мира».

Что учить дальше. С инструментами и практикой разобрались. Дальше — как всё это вписано в командную работу: QA в Agile и Scrum.