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

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

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

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

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

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

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

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

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

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

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

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

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

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