Лучшие инструменты для тестирования совместимости с различными браузерами

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

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

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

Давайте рассмотрим этот перечень.

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

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

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

Ghostlab доступен как под Windows, так и под Mac OS X, инструмент не требует установки, так как может мгновенно подключиться к любому клиенту с поддержкой JavaScript. С помощью сервера Ghostlab вы сможете синхронизировать страницы со своей локальной папкой, локальным сервером Apache или любым сервером в Сети с функцией автоматической перезагрузки для отслеживания изменений в файлах.

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

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

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

BrowserStack является облачным ресурсом, это означает, что для приложения не требуется установка, оно уже включает в себя предустановленные инструменты для разработчиков (в том числе Firebug Lite, Microsoft Script Debugger и многие другие), которые могут использоваться для быстрого тестирования кроссбраузерности и отладки.

Browserling поддерживает тестирование ресурса на совместимость с Internet Explorer, Firefox, Chrome, Opera и Safari (вплоть до версии 5.1). Разработчики могут загрузить свой сайт и сразу увидеть, как он будет выглядеть в определенной версии браузера.

Browserling не использует симуляторы. Вместо этого приложение запускает выбранный браузер на виртуальной машине. Благодаря этому можно получить очень точные результаты. Приложение создано на основе HTML 5.0, поэтому запускается прямо в браузере, и работает на любой системе. Результаты тестирования могут быть сохранены в виде скриншотов или видео.

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

[IMG=http://codegeekz.com/wp-content/uploads/net-renderer.jpeg]

IE Netrenderer позволяет проверить, как сайт выглядит в различных версиях IE, а также как он выводится для высокоскоростного дата центра, расположенного в Германии. Просто введите URL-адрес сайта в соответствующее поле и получите результат. IE Netrenderer способен параллельно, в режиме реального времени обрабатывать большое количество запросов, так что это невероятно быстрый сервис.

Уникальный режим смешанного наложения и определения различий помогает определить даже самые незначительные несоответствия при выводе страниц в разных версиях Internet Explorer.

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

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

Multi Browser Viewer является популярным программным обеспечением для тестирования кроссбраузерности на стороне клиента. MultiBrowserViewer также предлагает пользователям различные инструменты разработки, такие как проверка HTML, автоматические исправления и проверка синтаксиса. Продукт доступен на пяти языках и является одной из немногих подобных программ, которые могут работать в автономном режиме.

TestingBot обеспечивает простое тестирование на совместимость с браузерами с помощью Selenium, вручную либо в автоматическом режиме. Программа поддерживает более 100 версий браузеров и операционных систем. Ручное тестирование позволяет вам с помощью облачного сервиса проверить совместимость сайта с любым браузером.

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

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

Рабочая среда контейнеров Spoon обеспечивается с помощью Spoon Virtual Machine или SVM, а также быстро разворачиваемых API ядра операционной системы, включающих файловую систему, реестр, процессы и подсистемы разделов. Приложения, исполняемые в контейнере, взаимодействуют с виртуальной файловой системой, реестром и средой процессов, предоставляемой SVM, а не с локальной машиной.

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

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

Данная публикация представляет собой перевод статьи «Best Cross Browser Testing Tools» , подготовленной дружной командой проекта Интернет-технологии.ру

тестируем сайты в разных браузерах

В одном из постов Хабра я увидел описание какого-то веб-проект с десятком-другим его скриншотов в разных браузерах и OS. Меня сразу же заинтересовал инструмент, делающий такие интересные подборки. Ссылка в статье привела на CrossBrowserTesting. Сервис позволяет производить около 1000 разных комбинаций при анализе сайта, используя разные операционные системы, разные браузеры и установленные в них плагины.

С его помощью вы можете посмотреть: как выглядит сайт на Mac OSX 10.9 в Opera 11.50 или, например, что будет в Ubuntu 8.10 на Firefox 3.0.6; узнать как поведет себя веб-проект на Windows 7 64-Bit и Google Chrome 30; проверить работу ссылки на номер телефона в мобильных устройствах.

Комбинаций действительно много. Из ОС тут представлены Mac, Windows, Ubuntu + мобильные iPhone, iPad, Android, Windows Phone, Blackberry. Вариантов браузеров куда больше, можно выбирать даже не особо популярные.

Конечно, подстраиваться под все версии всех браузеров всех времен и народов — это нереально. Но достаточно часто возникает ситуация с разными ОС, когда клиент пишет вам мол у меня 64-битная Windows 7 и там вот такой глюк. А что делать, если у вас Mac? — просить знакомых проверить как отображается сайт на их компьютере? Хлопотно это весьма, да и не профессионально. Также можно попробовать простые сервисы отладки под Internet Explorer, но как быть с другими браузерами? В таком случае CrossBrowserTesting однозначно выручит. Возможности сервиса поражают.

Что же умеет делать CrossBrowserTesting?

1. Тестирование в реальном времени

Вы можете использовать браузеры сервиса дабы оценить функциональность своих сайтов — проверить как работают AJAX, HTML формы, Javascript и Flash. Не нужно ставить дополнительный софт на свой компьютер, достаточно просто подключиться к сервису (где браузеров установлено около 130 штук).

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

2. Автоматические скриншоты

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

3. Сравнение слоев

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

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

4. Скриншоты и видео глюков

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

5. Использование отладочных инструментов

Для Firefox и некоторых других браузеров имеются специальные отладочные плагины для разработчиков, например тот же Firebug или IEDeveloperTools. Хотите Firebug на Mac 10.7? — нет проблем.

6. Просмотр сетевого трафика

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

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

7. Остальные функции

Выше я упомянул лишь наиболее значительные функции сервиса CrossBrowserTesting. Но это еще не все!

CrossBrowserTesting позволяет:

• Проводить тестирование файлов на локальном компьютере — вы можете оценить свой сайт до загрузки его на ФТП и официального запуска.
• Работать с мобильные платформами (iPhones, iPads, Android, Blackberry) — самым быстрорастущим сегментом для браузеров.
• Делать скриншоты веб-страниц, для доступа к которым нужен логин.
• Использовать API.
• Изменить настройки браузеров при тестировании (cookie, javascript) и т.п. Для ОС можете установить нужную версию Flash, например.
• Получить отличную тех.поддержку.

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

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

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

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

” Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями “. (Википедия)

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

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно 65 браузеров). Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе – русский и украинский.)

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

Adobe BrowserLab – бесплатный онлайн сервис от Adobe CS. Чтобы добраться до этого сервиса нужно иметь аккаунт Adobe ID на сайте Adobe.com. Потом все достаточно просто – выбираете нужные браузеры, операционные системы и получаете скриншоты. Если вы пользуетесь для веб-разработки Adobe Dreamweaver, то Adobe BrowseLabинтегрируется с Adobe Dreamweaver начиная с версии CS4. IE NetRenderer – бесплатный онлайн-сервис только для браузера Internet Explorer,который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6,5.5.

Тут все просто: вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

IETester – это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP. BrowserСam – очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных “фишек” данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний. Цены стартуют от 19,95 у.е. в день в зависимости от функционала.

CrossBrowserTesting – также очень функциональный платный сервис, где вы можете проверить за несколько минут сайт в разных браузерах, в разных операционных системах, на разных устройствах (поддерживается более 100 вариантов проверок, в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю. Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

Litmus — онлайн-сервис, который предоставляет возможность тестирования сайта на разных браузерах. Кроме предоставления скриншотов, заодно проверяет валидность html и css кода. Особенность его в том, что он в основном ориентирован на тестирование е-мейлов в разных браузерах и на разных устройствах. Есть возможность протестировать е-мейл в 30 разных почтовых клиентах и другие важные функции, такие как аналитика для е-мейлов.

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

CloudTesting – платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц.

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможностьбесплатно тестировать выбранный пакет (триальная версия) 14 дней.

Multi-Browser Viewer – платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступнабесплатная триал-версия программы (14 дней).

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

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, естьбесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium)

Spoon – это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari, Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft. Browsera – это онлайн-сервис, который обеспечивает автоматизацию тестирования кроссбраузерности. Он автоматически определяет различия в отображении страниц браузерами, тем самым упрощая процесс тестирования.

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

Тестирование дизайна сайта — Online сервисы

— Дизайн сайта (мб. и сайт полностью) готов. Что дальше? А дальше прежде чем выпускать проект в свет, необходимо протестировать наш сайт на функциональность дизайна, возможные ошибки, работоспособность в различных браузерах, а также скорость загрузки нашего проета. В этом нам поможет подборка Online сервисов для тестирования:

Проверка скорости загрузки сайта:
https://developers.google.com/speed/pagespeed/insights — Популярный сервис от Google
http://tools.pingdom.com/fpt/ — График загрузки каждого элемента страницы, возможность провести тест из разных точек земного шара, рекомендации по ускорению скорости работы сайта.
http://whichloadsfaster.com/ — Можно сравнить скорость своего сайта с конкурентами.
http://www.webpagetest.org/ — Неплохой сервис для опытных вебмастеров.
http://www.websiteoptimization.com/services/analyze/ — Древнй сервис тестирования загрузки сайта. (2003г.)
http://www.showslow.com/ — Сервис с открытым исходным кодом.
http://site-perf.com/ — Проверки качества сети между сервером проверки и сайтом с помощью отправки некоторых видов пакетов.
http://loadimpact.com/ — Неплохой сервис проверки отказоустойчивости вашего сайта.
http://www.octagate.com/service/SiteTimer/ — Простой сервис проверки, где что тормозит загрузку сайта.
http://www.neustar.biz/enterprise/web-performance — График загрузки сайта, трассирует сеть до хостинга.
http://gtmetrix.com/ — оценка производительности и разных технических моментов.

Тестирования адаптивности дизайна сайта:
http://www.mobilephoneemulator.com/ — Достойный эмулятор iPhone
http://www.responsivedesigntest.net/
https://quirktools.com/screenfly/ — Проверка расширений Iphone, Android и др. устройств.
http://dfcb.github.com/Responsivator/ — онлайн-сервис для быстрой проверки функционала шаблона сайта на экранах различного разрешения.
http://bradfrostweb.com/demo/ish/ — Сервис предоставляет возможность автоматического переключения между разными размерами (режим Disco).
http://quirktools.com/screenfly/ — как будет выглядеть шаблон сайта на экранах различных устройств.
http://viewlike.us/ — Тест адаптивности по моделям устройств.

Тестирования сайта в разных браузерах:
http://browsershots.org/ — Скриншотит ваш сайт в 65 браузеров.
https://browserlab.adobe.com/en-us/index.html — Бесплатный онлайн сервис от Adobe CS
http://netrenderer.com/ — Онлайн-сервис только для браузера Internet Explorer версий: 9, 8, 7, 6, 5.5.
http://www.browsercam.com/ — Тестирование любым браузером и любой платформой. (платный)
http://spoon.net/browsers/ — Firefox, Chrome, Opera и Safari — IE (отключина).

Валидаторы [Проверка на ошибки]
http://wave.webaim.org/ — Онлайн-инструмент оценки доступности и юзабилити сайта
http://jigsaw.w3.org/css-validator/ — Известный онлайн-сервис проверки валидности CSS
http://www.onlinewebcheck.com/ — Подробно описывает в чем ошибка и как ее исправить
http://validator.w3.org/ — Этот валидатор проверяет HTML, XHTML, SMIL, MathML, и т.д.
— http://validator.w3.org/feed/ — Валидатор для Atom/RSS лент.
— http://validator.w3.org/checklink — Валидатор “битых” линков.
— http://validator.w3.org/mobile/ — Валидатор для мобильных устройств.

Безопасность:
http://www.yougetsignal.com/tools/open-ports/ — Сервис для проверки открытых портов на любом хостинге, по IP.

Прочее:
http://pr-cy.ru — популярный SEO инструмент
http://www.cys.ru/ — Интернет сервис автоматической оценки качества сайта.
http://www.graffity.biz/products/link_checker/ — Проверка ссылок на ошибку 404
http://www.copyscape.com/ — Знаменитый сервис проверки сайта на плагиат.
http://host-tracker.com/ — Сайт проверки доступности.
http://internetsupervision.com/scripts/urlcheck/check.aspx — Проверка расположения

Комплексное тестирование:
http://webdevchecklist.ru/ — Проверь перед выкладкой!

Бонус:
Page Speed для гугл
http://www.my-debugbar.com/wiki/IETester/HomePage — бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP

P.S: Напоследок скажу простую истину: лучший тест для сайта — это Ваши пользователи, настраивайте удобную обратную связь и спрашивайте! спрашивайте! спрашивайте!!! (Не путать с флудом на форумах на тему «как вам мой сайт?»), Узнавайте именно у Вашей целевой аудитории, им же пользоваться вашим сайтом. Удачи!

*Не используйте ветку для набора постов — благодарю.*​