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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наши клиенты
Поддержка русскоязычного сайта бренда
Bridgestone
Компания «Bridgestone» – японская компания-производитель шин, основана в 1931 году, на данный момент, компания владеет 155 заводами и четырьмя техническими центрами в 27 странах мира.
Поддержка и создание сайта
Samsonite
Компания «Самсонайт» – производитель и продавец багажа, предлагающий продукцию, начиная от больших чемоданов и заканчивая небольшими сумками и портфелями для туалетных принадлежностей.
Поддержка официального интернет-магазина
Мосэнергосбыт
АО «Мосэнергосбыт» является крупнейшей энергосбытовой компанией России, предоставляющей свои услуги на рынке энергоснабжения более 80 лет.
Поддержка официального сайта
ТЕХНОНИКОЛЬ
Корпорация ТЕХНОНИКОЛЬ - ведущий международный производитель надежных и эффективных строительных материалов и систем.
Поддержка официального сайта
ЮГОРИЯ
«Югория» – универсальная страховая компания, которая успешно работает на российском рынке страхования с 1997 года.
Поддержка официального сайта
Алтын
Ювелирный холдинг «Алтын» – это сеть гипермаркетов золота в трех странах мира и два собственных завода – в России и Кыргызстане.
Поддержка официального сайта
Карибия
Аквапарк «Карибия» – это парк развлечений, который уже заслужил любовь москвичей. Разнообразие водных развлечений здесь не меньшее, чем на высококлассном курорте.
Поддержка официального сайта
Теремъ
Компания «Теремъ» на рынке с 2010 года и совершила настоящий прорыв в области деревянного домостроения.
Поддержка и создание официального сайта
Линзмастер
Крупнейшая в России сеть салонов оптики, на рынке с 1998 года
Поддержка и создание официального сайта
Барьер
Крупнейший производитель бытовых фильтров для воды в России.
Выполнение юзабилити-аудита сайта компании.
Персона
Имидж-лаборатории «Персона» - концептуальный бренд и крупнейшая сеть российской индустрии красоты.
Поддержка официального сайта
«АТОЛ»
Компания АТОЛ - IT-лидер в области автоматизации ритейла и сферы услуг. По данным авторитетного аналитического агентства «Cnews Analytics», в 2017 г. компания заняла 1 место рейтинга «Крупнейшие поставщики ИТ в рознице».
Поддержка официального сайта
Sagitta
Один из крупнейших в России брендов по производству меховых и кожаных изделий.
Поддержка сайта итальянского бренда
MEUCCI
Клиентская сеть итальянского бренда мужской одежды, охватывает свыше 100 городов России и СНГ.
Поддержка двух официальных Российских сайтов компании
Garmin
Крупнейший мировой производитель GPS-навигационной техники с штаб-квартирой в США.
Поддержка официального корпоративного сайта
СОГАЗ-ЖИЗНЬ
Дочерняя компания одной из крупнейших на российском рынке страховых групп «СОГАЗ»
Поддержка и создание официального сайта
АРТИС
Ведущий поставщик корпусной мебели в России, более 15 лет на рынке.
Поддержка и создание официального сайта
ТАМАК
Одна из ведущих российских компаний в отрасли строительства деревянных домов, свыше 30 лет на рынке.
Поддержка официального сайта
«Константин Чайкин»
Мануфактура «Константин Чайкин» является единственной часовой компанией, которая представляет Россию на главной международной выставке часов Baselworld в швейцарском Базеле.
Создание и онлайн поддержка официального сайта
Окна Роста
20 лет на оконном рынке. Входит в число лучших оконных компаний России.

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

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

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

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

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

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

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

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

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

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

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

Заказать