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

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

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 лет.
Поддержка сайта итальянского бренда
MEUCCI
Клиентская сеть итальянского бренда мужской одежды, охватывает свыше 100 городов России и СНГ.
Поддержка официального сайта компании
Теремъ
Компания «Теремъ» на рынке с 2010 года и совершила настоящий прорыв в области деревянного домостроения.
Поддержка официального сайта компании
Алтын
Ювелирный холдинг «Алтын» – это сеть гипермаркетов золота в трех странах мира и два собственных завода – в России и Кыргызстане.
Поддержка официального сайта компании
Карибия
Аквапарк «Карибия» – это парк развлечений, который уже заслужил любовь москвичей. Разнообразие водных развлечений здесь не меньшее, чем на высококлассном курорте.
Поддержка официального сайта сети кинотеатров
Mori Cinema
Сеть кинотеатров «MORI CINEMA» – это стабильный уверенно развивающийся бизнес, использующий самые современные технологии индустрии развлечений и последние разработки в области кинопоказа.
Поддержка официального сайта компании
Just for you
JUST FOR YOU – проект по разработке и доставке диетического меню стандарта высокой кухни в Москве.
Поддержка официального сайта компании
Руниверс
АНО «Руниверс» является уникальной электронной факсимильной библиотекой. Проект «РУНИВЕРС» реализуется при поддержке компании Транснефть.
Поддержка и создание 12 официальных сайтов компании
Модус
Одна из крупнейших дилерских автомобильных сетей в России.
Поддержка официального сайта компании
ПСН
Группа ПСН работает на рынке недвижимости с 2000 года и является одной из самых крупных частных компаний в России.
Поддержка официального сайта компании
Палитра
Фабрика «Палитра» на протяжении 15-ти лет является лидером в производстве виниловых обоев в России.
Поддержка официального сайта
ОСНОВИТ
Одна из лидирующих компаний на рынке сухих строительных смесей на территории России.
Поддержка двух официальных Российских сайтов компании
Garmin
Крупнейший мировой производитель GPS-навигационной техники с штаб-квартирой в США.
Поддержка официального корпоративного сайта
СОГАЗ-ЖИЗНЬ
Дочерняя компания одной из крупнейших на российском рынке страховых групп «СОГАЗ»
Поддержка и создание официального сайта
АРТИС
Ведущий поставщик корпусной мебели в России, более 15 лет на рынке.
Поддержка официального сайта компании
Sagitta
Один из крупнейших в России брендов по производству меховых и кожаных изделий.
Поддержка и создание официального сайта
ТАМАК
Одна из ведущих российских компаний в отрасли строительства деревянных домов, свыше 30 лет на рынке.
Создание и онлайн поддержка официального сайта
Окна Роста
20 лет на оконном рынке. Входит в число лучших оконных компаний России.

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

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

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

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

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

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

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

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

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

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

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