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

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

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

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

Browsershots

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

Сервис создает скриншот работы веб-сайта в определенных браузерах. Список поддерживаемых браузеров обширен. Можно выбрать разрешение экрана, глубину цвета, есть возможность проверять сайт на наличие ошибок с 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

Отличие 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.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree