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

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

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

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

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

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

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

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

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

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

Абонемент
от 10 500 ₽/мес.
Идеальный вариант для постоянного обслуживания и контроля за сайтом с регулярным потоком задач
Депозитный
от 1 500 ₽/час
Идеальный вариант для выполнения разовых работ для сайтов с нерегулярным потоком задач

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

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

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

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

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

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

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

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

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

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

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

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

Наши клиенты
Поддержка русскоязычного сайта бренда
Bridgestone
Компания «Bridgestone» – японская компания-производитель шин, основана в 1931 году, на данный момент, компания владеет 155 заводами и четырьмя техническими центрами в 27 странах мира.
Поддержка и создание сайтов компании
Samsonite
Компания «Самсонайт» – производитель и продавец багажа, предлагающий продукцию, начиная от больших чемоданов и заканчивая небольшими сумками и портфелями для туалетных принадлежностей.
Поддержка официального интернет-магазина
Мосэнергосбыт
АО «Мосэнергосбыт» является крупнейшей энергосбытовой компанией России, предоставляющей свои услуги на рынке энергоснабжения более 80 лет.
Поддержка официального сайта компании
ЮГОРИЯ
«Югория» – универсальная страховая компания, которая успешно работает на российском рынке страхования с 1997 года.
Поддержка сайта итальянского бренда
MEUCCI
Клиентская сеть итальянского бренда мужской одежды, охватывает свыше 100 городов России и СНГ.
Поддержка официального сайта компании
Теремъ
Компания «Теремъ» на рынке с 2010 года и совершила настоящий прорыв в области деревянного домостроения.
Поддержка официального сайта компании
Алтын
Ювелирный холдинг «Алтын» – это сеть гипермаркетов золота в трех странах мира и два собственных завода – в России и Кыргызстане.
Поддержка официального сайта компании
Карибия
Аквапарк «Карибия» – это парк развлечений, который уже заслужил любовь москвичей. Разнообразие водных развлечений здесь не меньшее, чем на высококлассном курорте.
Поддержка официального сайта сети кинотеатров
Mori Cinema
Сеть кинотеатров «MORI CINEMA» – это стабильный уверенно развивающийся бизнес, использующий самые современные технологии индустрии развлечений и последние разработки в области кинопоказа.
Поддержка официального сайта компании
Just for you
JUST FOR YOU – проект по разработке и доставке диетического меню стандарта высокой кухни в Москве.
Поддержка официального сайта компании
Руниверс
АНО «Руниверс» является уникальной электронной факсимильной библиотекой. Проект «РУНИВЕРС» реализуется при поддержке компании Транснефть.
Поддержка и создание 12 официальных сайтов компании
Модус
Одна из крупнейших дилерских автомобильных сетей в России.
Поддержка официального сайта компании
ПСН
Группа ПСН работает на рынке недвижимости с 2000 года и является одной из самых крупных частных компаний в России.
Поддержка официального сайта компании
Палитра
Фабрика «Палитра» на протяжении 15-ти лет является лидером в производстве виниловых обоев в России.
Поддержка официального сайта ассоциации
Глобальная энергия
Ассоциация по развитию международных исследований и проектов в области энергетики «Глобальная энергия».
Поддержка интернет-магазина компании
ЕвроОбувь
Компания «ЕвроОбувь» предлагает обувь и аксессуары лучших европейских производителей, что гарантирует высочайшее качество и надежность продукции.
Поддержка интернет-магазина книжного магазина
МОСКВА
Книжный магазин «МОСКВА» - одно из самых динамично развивающихся книготорговых предприятий в стране.
Поддержка официального сайта фитнес-центра
Марк Аврелий
Фитнес-центр «Марк Аврелий».
Поддержка сайта компании
Парк Лайн
«Парк Лайн» – сеть суточных парковок возле аэропортов Москвы.
Поддержка официального сайта салона
Дом Весты
Салон «Дом Весты» - это лучшие свадебные и вечерние платья из коллекций ведущих мировых брендов.

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

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

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

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

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

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

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

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

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

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

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