Кроссбраузерное тестирование сайтов

Все мы, как пользователи интернет, обычно используем один, реже два «любимых» браузера.

Google Chrome или Mozilla, а кому-то больше нравится работать в Opera… Браузеров довольно много. По этому причине необходимо проводить проверку кроссбраузерности сайта, это позволит увидеть возможные ошибки в отображении верстки.

Браузер, говоря простыми словами, это программа, которая позволяет нам увидеть сайт и взаимодействовать с ним: переходить по ссылкам, открывать веб-формы, делать заказы в интернет-магазине и так далее.

Все браузеры учитывают стандарты работы с кодом, принятые в веб (подробнее можно почитать тут https://www.w3.org/), но все таки делают это немного по-разному.

Отсюда и различия в том, как они показывают отдельные элементы интерфейса и работу с ним.

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

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

Проверка верстки и работы сайта в разных браузерах процесс довольно трудоемкий и при этом скучный, требующий внимательности и терпения. В компании «Пиксель Плюс» возможно заказать услугу кроссбраузерного тестирования от 12 000 рублей.

Стоимость услуги

Абонемент
от 25 000 ₽/мес.

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

Подробнее

Депозитный
от 87 000 ₽/мес.

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

Подробнее

Постоплата
от 3 500 ₽/мес.

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

Подробнее

С чего начинается кроссбраузерное тестирование?

Браузеров много и много их версий. Часто версия браузера имеет решающее значение. Например, последнее обновление популярного браузера Google Chrome принесло много проблем владельцам SSL сертификатов, которым этот браузер отказал в доверии.

Как определиться со списком для проверки?

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

Бесплатная система веб-аналитики на русском языке - Яндекс метрика - быстро устанавливается на сайт и позволяет получить информацию о разрешениях экрана, устройствах и, конечно, о браузерах, которыми пользуются посетители сайта.

Берем наиболее популярные, те, что составляют высокий процент всех наших посетителей.

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

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Opera
  • Safari

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

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

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

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

Наши клиенты

Компания «Garmin»
Компания «Garmin»

Крупнейший мировой производитель GPS-навигационной техники с штаб-квартирой в США.

Страховая группа «СОГАЗ»
Страховая группа «СОГАЗ»

Одна из крупнейших российских страховых компаний, отнесена к разряду системообразующих.

Как проверять?

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

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

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

Все готово к проверке.

Если сохранились макеты, которые были утверждены для вёрстки сайта и они соответствуют актуальному его состоянию, то при сравнении смотрим на них.

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

При работе с матрицей покрытия важно фиксировать расхождения относительно эталона, очевидные поломки верстки, ошибки в работе сайта.

По результатам тестирования формируется баг-лист для исправления верстальщиками и программистами.

Дальше потребуется новый этап тестирования - повторная проверка.

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