Кроссбраузерное тестирование — это проверка того, что сайт правильно выглядит и работает в браузерах ваших посетителей и на тех устройствах, где они ими пользуются. На практике это три движка рендеринга (Blink в Chromium, WebKit в Safari и Gecko в Firefox) на десктопе и на мобильных. Большую часть можно покрыть бесплатно: установленными браузерами, Playwright и мобильным просмотром. Платить за облачные устройства стоит, только когда нужно реальное железо, которого у вас нет.
Какие браузеры тестировать
Отталкивайтесь от своей аналитики, а не от мировой статистики. B2B-дашбордом могут пользоваться в основном в десктопных Chrome и Edge, а интернет-магазином для частных покупателей — в Safari на iPhone. Посмотрите отчёты по браузерам и устройствам за последние три месяца и покройте всё, что набирает больше нескольких процентов сессий.
Если данных пока нет, этот набор покрывает все движки и большую часть реального трафика:
| Браузер | Движок | Почему важен |
|---|---|---|
| Chrome (десктоп и Android) | Blink | Самая большая доля на десктопе и Android |
| Safari (iPhone, iPad, Mac) | WebKit | Все пользователи iPhone и большинство багов, которые «бывают только на мобильных» |
| Edge | Blink | Браузер по умолчанию в Windows; обычно ведёт себя как Chrome |
| Firefox | Gecko | Отдельный движок; ловит допущения, которые на деле оказываются особенностями Chromium |
| Samsung Internet | Blink | Предустановлен на телефонах Samsung, со своим циклом обновлений и тёмной темой |
Больше всего внимания заслуживают два движка: WebKit из-за iPhone и Gecko, потому что это единственный крупный движок, который не принадлежит ни Apple, ни Google.
Что проверять в каждом браузере
Кроссбраузерные баги кучкуются в предсказуемых местах. Пройдите по этому списку на каждой ключевой странице:
- Раскладка. Отступы gap во flexbox и grid,
position: sticky,aspect-ratioи container queries в старых версиях браузеров. - Шрифты. Веб-шрифты загружаются, у запасных шрифтов похожие метрики, во время загрузки нет невидимого текста.
- Формы. Выбор даты и времени, стилизация
select, цвета автозаполнения, сообщения валидации, тип мобильной клавиатуры для каждого поля. - Медиа. Правила автовоспроизведения видео (большинство мобильных браузеров разрешают его только без звука), форматы изображений вроде AVIF, выбор картинки из
srcset. - Прокрутка и единицы viewport.
100vhпротив динамического100dvhна мобильных, scroll snapping, плавная прокрутка, overscroll. - API JavaScript. Всё, что моложе пары лет: проверьте поддержку, прежде чем на это полагаться.
- Взаимодействие. Меню, открывающиеся только по наведению, на сенсорных устройствах; обводка фокуса для пользователей клавиатуры; размеры зон нажатия.
- Тёмная тема и масштаб. Страницы при масштабе 200% и с системной тёмной темой.
Бесплатные инструменты, которые делают большую часть работы
Установите браузеры. Chrome, Edge и Firefox работают на любой десктопной ОС. Safari есть только на macOS, и это главная причина, по которой тестировщикам без Mac нужны дополнительные инструменты.
Проверяйте поддержку до того, как писать код. Baseline помечает веб-функции как «newly available» или «widely available» во всех основных браузерах, а Can I use даёт таблицы поддержки по версиям. Такая проверка заранее предотвращает большую часть кроссбраузерных багов.
Автоматизируйте с Playwright. Playwright запускает один и тот же тестовый скрипт в Chromium, Firefox и WebKit на Windows, macOS и Linux и умеет эмулировать мобильные устройства. Короткий скрипт, который открывает десять самых важных страниц во всех трёх движках и сохраняет скриншоты, поймает большинство регрессий на каждом pull request.
Используйте мобильный просмотр для проверки адаптивности. Проблемы мобильной вёрстки часто принимают за проблемы браузера. Быстро исключите их с помощью режима устройства в DevTools или расширения вроде Mobile View Extension, а уже потом ищите причины в движке. Разница между этими инструментами объяснена в статье мобильный симулятор в виде расширения или DevTools.
Используйте эмуляторы для мобильных движков. Xcode Simulator даёт настоящий Safari на iOS на Mac (инструкция), эмулятор Android Studio даёт настоящий Chrome на Android (инструкция).
Когда имеет смысл платить за сервисы кроссбраузерного тестирования
Облачные сервисы сдают в аренду реальные устройства и множество версий браузеров. За них стоит платить, если:
- у вас нет Mac, а Safari на iPhone нужно проверять регулярно;
- клиенты пользуются старыми версиями браузеров, которые нельзя установить рядом друг с другом;
- по договору с клиентом нужно тестировать на конкретных моделях телефонов;
- автотесты должны запускаться на реальных мобильных устройствах.
Для небольшого сайта обычно хватает месячного тарифа на неделю релиза, а для редких проверок вполне достаточно бесплатных пробных периодов.
Лёгкий регламент кроссбраузерной проверки
- Во время разработки: проверяйте Baseline перед использованием новой функции и смотрите страницу в мобильном просмотре по ходу работы.
- На каждом pull request: снимайте скриншоты через Playwright в Chromium, Firefox и WebKit.
- Перед релизом: пройдите ключевые сценарии в Safari (на Mac или в симуляторе), Firefox и Chrome на Android.
- После релиза: следите за мониторингом ошибок и аналитикой с группировкой ошибок по браузерам.
Мобильная часть проверки перед релизом подробно описана в чек-листе тестирования мобильной версии сайта.
Частые вопросы
Как бесплатно проверить сайт в разных браузерах?
Установите Chrome, Edge и Firefox, запускайте WebKit через Playwright на любой ОС, а размеры телефонов проверяйте в DevTools или расширением для мобильного просмотра. На Mac Xcode Simulator добавит настоящий Safari на iOS.
Нужно ли тестировать в Edge, если уже проверили в Chrome?
Edge работает на том же движке, что и Chrome, поэтому различия редки. Достаточно беглой проверки, если только ваша аудитория не пользуется функциями, специфичными для Edge, или корпоративными политиками.
Какая сейчас самая частая причина кроссбраузерных багов?
Использование функции CSS или JavaScript до того, как она поддерживается во всех браузерах ваших пользователей. Проверка статуса Baseline перед внедрением функции предотвращает большинство таких багов.