Как тестировать кроссбраузерность сайта: лучшие сервисы для проверки

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

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

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

Для того чтобы провести тестирование, обращаются в локальное приложение или онлайн сервер. Ниже приведены наиболее популярные и востребованные серверы.

Browsershots

Основное направление этого сервера заключается в создании скриншотов от сайтов, которые поступают из разных ресурсов. Если пользоваться бесплатной версией, то когда подходит ваша очередь, то на странице сервера появляются изображения (в том порядке, как освобождается ресурс). Это медленный процесс, поэтому он занимает много времени. Есть возможность платной подписки, но это обойдется порядка 30 долларов каждый месяц. Самостоятельно можно выбирать размер и цвет экрана.

Browserling

Сервер позволяет работать с сайтом, который тестируется в окошке. И важно, что оно не эмулируется, а передается с браузера, который установлен на одной виртуальной машине сервиса. Перед кроссбраузерностью выбирают один браузер из предложенных пяти версий и один вариант из Виндовс или Андроид. Изображение экрана и сохранение изображений можно менять. Использование такого тестирования возможно только за деньги. Бесплатный вариант есть, но тестирование будет только 3 минуты с определенной операционной системой и разрешением экрана.

CrossBrowserTesting

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

Тестирование кроссбраузерности может быть выполнено несколькими вариантами, рассмотрим их:

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

IE NetRenderer

Тестирование проводится онлайн и бесплатно, но такой услугой могут воспользоваться, только если установлен браузер Internet Explorer.

IE Tester

Кроссбраузерность тестируется бесплатно. Работа выбранной версии браузера эмулирует и позволяет спокойно работать с интернет серфингом.

MultiBrowser

Приложение для тестирования платное. Используется для адаптации сайтов. Получило свою известность за счет того, что может поддерживать версии IE, Safari 5.1, любую сборку Chrome, Firefox, а также может работать на мобильном телефоне с любым разрешением экрана.

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

Litmus

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

Browserstack

Тестирование на этом сервисе платное. Поддерживает разные версии и семь самых известных браузеров, работает с мобильными устройствами. Работать с этой программой просто.

Browser Sandbox

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

Equafy

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

Browsera

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

Sauce Labs

Кроссбраузерность проверяется онлайн. За месяц в платной версии придется заплатить 19 долларов. Большое количество браузеров, которые поддерживает сервер, а также поддерживается на разных устройствах.

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

Похожее

7 инстурментов для тестирования кроссбразуерности сайта в 2016

От автора: несмотря на появление адаптивного дизайна и постоянно увеличивающуюся поддержку стандартов, проблема кроссбраузерности не ушла в прошлое. Тестировать свой сайт вручную на работу во всех существующих браузерах и операционных системах не просто невозможно, это невыполнимо. И тут нам на помощь приходят инструменты по тестированию кроссбраузерности сайта!

Ниже я составил список из 7 на мой взгляд выдающихся инструментов для тестирования кроссбарузерности, как платные, так и бесплатные.

Browsershots

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Сервис создает скриншот работы веб-сайта в определенных браузерах. Список поддерживаемых браузеров обширен. Можно выбрать разрешение экрана, глубину цвета, есть возможность проверять сайт на наличие ошибок с JS (и определение версии JS), Java и Flash.

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

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

Browser Sandbox

Browser Sandbox – еще один сервис для тестирования кроссбраузерности с большим списком поддерживаемых браузеров. Существенный минус заключается в том, что данный сервис доступен только пользователям Windows. Пользователям Linux и Mac OS не повезло, однако разработчики обещают версию для Mac в скором будущем.

К плюсам можно отнести большой список поддерживаемых браузеров, среди которых IE, Firefox, Chrome, Chromium Canary, Firefox Mobile, Safari, Opera и Firefox Nightly. В бесплатной версии сервиса можно делать тесты только в последних версиях браузеров.

За доступ к старым версиях браузеров придется заплатить. К счастью тарифы дешевые и начинаются от $4.95 в месяц.

IE Testers

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

Netrenderer

В Net Renderer можно проводить тесты в версиях IE от 5.5 до 11. Быстрый и простой инструмент, но функционал оставляет желать лучшего.

Microsoft Edge

Microsoft Edge – целая платформа, выходящая далеко за пределы тестов для IE. Собственно говоря, браузер позволяет создавать скриншоты работы сайта в других браузерах и из-под различных мобильных устройств. Причина, по которой я вынес данный браузер в группу тестировщиков IE, в том, что в браузере есть виртуальные машины для различных версий IE, а также в браузере есть Azure Remote App, с помощью которого можно удаленно проводить тесты в IE.

My Debugbar

И последний сервис для теста IE — My DebugBar, также известный как IETester. В отличие от Net Renderer, My Debugbar – десктопное приложение весом 60Мб. Его необходимо загрузить, и работает программа только в Windows.

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

Webshot by Mobile Ready

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

На момент написания статьи сайт Webshot не работал, по крайне мере у меня. При попытке зарегистрироваться я получал ошибку Internal Server Error. Пару недель назад я писал разработчикам данного сервиса о возникшей проблеме, ответа до сих пор нет, да и в будущем не ожидается.

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

Browsera

Платные сервисы начинаются с Browsera. Крайне полезное приложение, и вы точно знаете, за что вы платите деньги. С его помощью можно тестировать макеты, JS, динамические страницы, страницы с паролем и т.д.

Установка не нужна. Данный сервис можно бесплатно опробовать в течение 30-ти дней. В бесплатном аккаунте почти нет функций, а платные тарифы идут от $39 до $99.

CrossBrowserTesting

В этом сервисе мне больше всего нравится то, что он использует настоящие устройства для запуска браузеров. Эмуляторы вполне справляются со своей работой, но нет ничего лучше, чем запустить сайт на реальном устройстве. Список возможностей довольно впечатляющий, и CrossBrowserTesting точно стоит своих денег. Я думаю, что список поддерживаемых браузеров и ОС самый большой в сети – 900 браузеров в более чем 40 операционных системах, в том числе iOS, Android, Windows, Mac и т.д.

Мне также понравилась функция теста в реальном времени. С ее помощью можно тестировать веб-страницы на реальном оборудовании. Тестировать можно AJAX, HTML формы, JavaScript, Flash. Среди других возможностей – локальные тесты, Selenium тесты (пишет автоматизированные скрипты), а также сравнение скриншотов. Минимальный тариф стоит $29 в месяц, но можно взять семидневный триал.

BrowserStack

BrowserStack – еще один крупный игрок в индустрии. Отлично подходит для теста мобильных устройств (настоящие устройства), однако также имеется 700+ десктопных браузеров.

С помощью данного сервиса также можно проводить локальные тесты, делать быстрые скриншоты с разрешениями от 800×600 до 2048×1536. Так же как и у CrossBrowserTesting, тарифы начинаются от $29 в месяц, но BrowserStack также предлагает ограниченные предложения за $12.50 в месяц для фрилансеров. Также для проектов с открытым исходным кодом у них есть бесплатные сервисы.

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

Заключение

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

Лично я долгое время работаю с BrowserShots, и меня не смущает ограниченный функционал. Недавно я проектировал простой шаблонный HTML сайт для друга. Шаблон был простой, и мне очень нравился его код.

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

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

Но если бы у него не было под рукой еще одного ПК с рабочим IE, было бы сложно убедить его, что проблема в его браузере, а не в моем коде.

Вот именно для таких случаев, когда нужно быстро набросать примерный проект, вам подойдут BrowserShots или другие IE тестировщики. Ну и естественно, если вам нужны более надежные гарантии, то тут вам не помогут бесплатные решения. Вот почему трудно выделить какой-то один сервис и назвать его лучшим – все зависит от конкретного случая.

Автор: Ada Ivanoff

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Что такое кроссбраузерность сайта и как ее проверить / webentrance.ru

Кроссбраузерность сайта характеризует одинаковое и правильное его отображение в разных браузерах.

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

К примеру, в Google Chrome сайт отображается хорошо, а в Оpеra могут появляться какие-то ошибки, которые никак не смогут понравиться посетителям.

Может съехать заголовок, что-то показывает криво, либо вообще не открывается или картинка отобразится не должным образом.

Если отображение сайта будет кривое, то посетитель сразу его покинет. В результате пострадают поведенческие факторы и трафик понизится.

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

Определяем браузеры посетителей

Сначала необходимо определить, какие браузеры используют посетители сайта. Узнать это можно в статистике Google Analytics.

Итак, заходим в раздел Аудитория — Технологии — Браузер и ОС.

Получаем список всех браузеров, которыми пользовались люди при посещении сайта.

Список с различными браузерами может быть достаточно большой. В данном случае их 15. И все анализировать, смысла нет.

Достаточно проверить те из них, которыми пользовались наибольшее количество посетителей.

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

Чтобы просмотреть версии, нужно просто в списке нажать на любой из них. Таким же образом анализируем только самые новые версии браузеров.

Имеется возможность в Google Analytics посмотреть такой существенный параметр, каким является показатель отказов.

Стоит сосредоточить внимание именно на те браузеры и их версии, у которых этот показатель наибольший.

Для проверки есть не мало сервисов, как бесплатных, которых немного и они с ограниченными возможностями и есть платные сервисы.

Расценки платных сервисов достаточно высокие, от 20 до 100 долларов. Для верстальщика профессионала такие сервисы подойдут потому что затраты оправдаются.

Если же нужно проверить свой сайт только раз, то такие затраты пожалуй будут лишними.

Проверяем кроссбраузерность сайта

Чтобы попасть на один из неплохих бесплатных сервисов, набираем в адресной строке следующий адрес – browsershots.org.

На сервисе производится проверка, как отображается сайт в распространенных браузерах Google Crome, Mozilla Firefox, Opera и другие различных версий.

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

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

Можно поставить даже все галочки. Внизу выбираем размер экрана, глубину цвета и другие вещи.

Далее в поисковой строке прописываем свой ресурс и нажимаем кнопку Отправить.

Проверка идет довольно долго, в данном случае обещают сделать за 14 минут, но результат получаем значительно быстрее. Проверка проведена в 188 браузерах и их версиях.

По окончании работы нажимаем на кнопку Посмотреть результат и сервис выдает скриншоты, которые можно затем подробно рассмотреть и при желании скачать на свой компьютер в виде zip-архива.

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

Можно заметить, например, что в старых версиях некоторых браузеров отображение страниц может быть некорректным.

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

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

Другие записи по теме:

Проверка сайта на кроссбраузерность.

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

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

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

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

Что, естественно, сказывается на внешнем облике страниц.

И как следствие, ваш сайт может выглядеть по-разному, это будет зависеть от браузера, которым пользуется человек, посещающий ваш сайт. Например, в Mozilla Firefox все может выглядеть как надо, красиво и ровно, а если откроешь IE, то блоки сайта съезжают один на другой, а фоны вообще куда-то подевались…

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

Ни в коем случае не пренебрегайте этим этапом в создании сайта!

Эту проверку следует проводить ориентируясь, по крайней мере, на пятерку самых распространенных браузеров — это Mozilla Firefox, Safari, Internet Explorer, Opera и Google Chrome. Причем, каждый из этих браузеров имеет множество версий.

А версии Internet Explorer вообще настолько отличаются друг от друга, что интерпретируют html теги совершенно по-разному, поэтому для них нужно проводить отдельное тестирование. Для браузера Internet Explorer существует даже специальная программа

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

На что нужно обращать внимание в процессе проверки своего сайта на кроссбраузерность?

Недостаточно просто просмотреть на сайт в разных браузерах.

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

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

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

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

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

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

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

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

А потому, делайте определенные выводы и если есть вопросы — задавайте их в комментариях.

Успехов вам, дорогие читатели!

Автор статьи: Елена Лощилова.

Как проверить кроссбраузерность? проверка сайта в разных браузерах

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

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

Сервисы для проверки сайта в разных браузерах

1. Browsershots.org
Это самый удобный сервис для массовой проверки отображения сайта в браузерах. Чтобы воспользоваться им, выбираете несколько видов браузеров, и приступаете к проверке:

Мы проверили наш блог по нескольким платформам и никаких проблем выявлено не было.

Вот так выглядит результат работы:

Помимо этого, в боковой части отображаются дополнительные параметры созданного скриншота, например, расширение экрана. Через этот сервис очень удобно проводить проверку, но в нем нет Internet Explorer.

2. Netrenderer.com
Данный сервис как раз предназначен для проверки кроссбраузерности в Internet Explorer. Если в статистике вашего сайта вы заметили, что количество отказов посетителей одного из браузеров почти 100%, то в первую очередь нужно проверять кроссбраузерность.

Указываете, в какой версии браузера вы хотите выполнить проверку, а также адрес сайта, нажимаете «Render» и через пару секунд получаете скриншот. Как видите, в данном случае наш блог тоже корректно отображается.

Почему сайт по-разному отображаются в браузерах?

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

Вам также будет интересно:
— Как определить стоимость сайта?
— Как больше зарабатывать на блоге?
— Как выйти на лидирующие позиции выдачи?