Кросс-браузерное тестирование - это проверка того, что ваш сайт работает в браузерах, которыми ваши посетители пользуются на самом деле, а не в том, что стоит у вас на столе. Определение неброское и исчерпывающее, после чего почти каждая статья на эту тему выдаёт вам таблицу из тридцати сочетаний браузера и версии, и вот здесь дело начинает идти не туда.

Начните лучше с движков. Их три, и они важны: Blink - это Chrome, Edge, Opera, Brave и почти всё остальное; WebKit - это Safari везде и любой браузер на iOS, какое бы имя на нём ни стояло; и Gecko - это Firefox. Расхождение Chrome и Edge в вёрстке - редкость, потому что это один и тот же движок рендеринга в разной оболочке. Расхождение Chrome и Safari - обычное дело.

Тестировать тридцать браузеров - это по большей части тестировать Blink тридцать раз.

Что различается сегодня на самом деле

Эпоха вендорных префиксов закончилась, и оставшиеся различия другого рода. Четыре категории покрывают почти все из них.

  • Кодеки и медиа. Самая дорогая категория, потому что здесь ломается всё целиком, а не внешний вид. Видео, которое браузер не может декодировать, - это не видео похуже; это сообщение об ошибке.
  • API, которые один движок не выпустил. Ответ - проверка поддержки возможностей, а отказ выглядит как функция, которая молча ничего не делает, а не как страница, которая выглядит неправильно.
  • Краевые случаи вёрстки. Их меньше, чем раньше, но оставшиеся обычно лежат в свежих частях спецификации - ровно там, куда тянутся за новым.
  • Ритм выпуска. Движок Safari обновляется вместе с операционной системой, так что “последний Safari” - это утверждение о том, насколько недавно кто-то обновил свой Mac или телефон.

Категории стоит назвать, потому что они требуют разных ответов. Кодекам нужен запасной вариант, отданный вместе со страницей. Отсутствующим API нужна проверка поддержки. Вёрстке нужно, чтобы на неё посмотрели. Ритму нужна ваша аналитика.

Разобранный пример, и он наш собственный

Наше расширение записывает видео в VP9 внутри контейнера WebM. У Safari нет декодера VP9. Страница с общей ссылкой отдавала браузеру единственный источник, построенный по типу самого сохранённого файла, а HTML-элемент video, которому дали один источник и который он не может воспроизвести, не ухудшает качество - он отказывает.

Так что какое-то время ссылка, отправленная кому-то на Mac, показывала человеку слово Error. Всё обещание продукта - это ссылка, которую может открыть другой человек, и для одного движка это обещание было нарушено.

Три вещи в том, как это осталось незамеченным, типичны для этой категории, и поэтому их стоит записать, а не молча починить.

Что у нас было
Автоматические тесты, все зелёные, все запускались в Chrome. Никто не записал ошибку, потому что с точки зрения сервера ничего не сломалось - файл был отдан, а браузер не смог им воспользоваться
Что бы это поймало
Открыть одну общую запись в Safari, один раз. Никаких инструментов не нужно, и никакому набору тестов не пришлось бы существовать

Узнал об этом получатель. Тот, кто отправил ссылку, не узнал никогда, потому что ничто не сообщает вам, что страница, которой вы поделились, не заработала у человека, с которым вы ею поделились. Это и есть определяющее свойство отказов на границе движков: оттуда, где вы стоите, они невидимы.

Починка состояла в том, чтобы кодировать копию в H.264 рядом с каждой загрузкой и предлагать оба источника, а затем записывать сразу в MP4 там, где браузер это позволяет.

С чего начать, и это не матрица

Ваш список определяют два источника, и ни один из них не догадка.

Ваша аналитика. Не мировая доля рынка. Браузеры, которыми пользуются ваши посетители, в ваших странах, на ваших страницах. У B2B-инструмента в Германии и у потребительского сайта в Бразилии ответы разные, и оба отличаются от общемировых цифр, которые цитирует каждая обзорная статья.

Ваш сбор ошибок. Ошибки, сгруппированные по браузерам, скажут вам, где уже что-то ломается, а это лучшая расстановка приоритетов, чем любая догадка о том, где сломаться может.

Отсюда рабочая форма: смоук-тест на всех трёх движках, глубокое тестирование - на двух основных. Смоук-тест здесь - та же идея, что и везде: грузится ли страница, может ли кто-то войти, проходит ли до конца тот единственный сценарий, который важен, - и проделать это в Safari и Firefox ловит всю категорию кодеков и отсутствующих API за считанные минуты.

Проговорите матрицу вслух в своём плане тестирования, включая то, что осталось за рамками. “Мы не тестируем Firefox на Android” - это решение, когда оно записано, и случайность, когда нет.

Session Replay

Бесплатное расширение для Chrome. Один клик на странице, которая ведёт себя не так, захватывает скриншот, консоль и сетевой журнал и отдаёт вам ссылку, которую можно вставить в задачу.

Установить расширение

Что инструменты покрывают, а что нет

Коммерческие сервисы сдают вам в аренду машины с браузерами, и это решает настоящую проблему: вы не можете запустить Safari на Linux и не можете держать все версии iOS у себя на столе. За это стоит платить, когда это нужно.

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

Автоматизация любого рода к тому же плохо справляется с отказом, который здесь важнее всего. Видео, которое не воспроизводится, шрифт, который не загружается, поле даты, которое на одном движке отрисовано как текстовое поле, - всё это проходит любую проверку DOM, потому что с DOM всё в порядке. Не в порядке рендеринг.

Сообщения - это вторая половина

Какой бы хорошей ни была матрица, какой-то движок, какая-то версия, какое-то устройство, которое вы не тестировали, выдаст ошибку живому человеку. Вопрос в том, узнаете ли вы об этом.

Это и есть довод в пользу того, чтобы сообщать было легко оттуда, где человек находится, и чтобы сообщение несло браузер и версию, не требуя от отправителя их знать. “На моём телефоне не работает” стоит дня. “Safari 26.1 на iOS, на записи область видео пустая, консоль говорит, что источник не поддерживается” стоит половины дня, и разница целиком в том, что нёс с собой отчёт, а не в том, что знал отправитель.

В чём и состоит честная граница этой статьи: кросс-браузерное тестирование сужает разрыв, а сообщения, приходящие из браузеров, которые вы не покрыли, - это то, как вы узнаёте, где разрыв остался. Одно не заменяет другого, и команда, делающая только что-то одно, видит половину картины.