Для кросс-браузерного тестирования можно использовать три подхода.
1) Если у вас есть все устройства, на которых вы хотите проверить свой сайт, то достаточно просто взять эти устройства и проверить. Возможно, воспользовавшись ПО для оптимизации этого процесса.
2) Если устройств нету, но необходимо проверить на достаточно ограниченном количестве браузеров и устройств, то можно поднять эмуляторы и просто последовательно пройтись по сайту на всех доступных браузерах.
3) Если нет устройств и хочется хорошего качества, то стоит поискать в интернете сервисы, которые могут предоставить реальные устройства с требуемыми браузерами в рездельное пользование.
Обо всех этих трех способах я и хотел сегодня вам поведать.
Итак:
1) ПО для управления тестами на реальных устройствах.
Если желаемые мобильные устройства у вас имеются в наличии, то существует пара инструментов для централизованного управления и отладки:
http://html.adobe.com/edge/inspect/
и
http://vanamco.com/ghostlab/
К сожалению, в моих условиях с устройствами беда и наличных устройств много меньше чем устройств, на которых необходимо обеспечить работоспособность нашего продукта, потому я не могу рассказать об упомянутых системах ничего кроме ссылок на их сайты.
2) Эмуляция
Тут и широко известный dosbox и чуть менее известные эмуляторы для мобильных:
Для эмуляции Андроид можно воспользоваться официальным эмулятором здесь:
http://developer.android.com/tools/help/emulator.html
Или легковесным условно открытым эмулятором от Genymotion:
https://cloud.genymotion.com/page/customer/login/?next=/
Для IOS все довольно грустно и приходится рассчитывать на iPadian.
Для Windows Phone наличествует официальный эмулятор
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx
Не трудно догадаться, что только для Windows.
Стоит отметить, что все конструкции с эмуляцией требуют достаточно хитрых извращений и, как правило, не поддаются хоть какой-то автоматизации. хотя с должным применением хитрости, упрямства и таланта, можно попытаться скрестить эмулированные ОС и устройства с ПО из первого пункта.
Также важно, что с эмуляцией никогда нельзя быть уверенным, что реальное устройство будет работать ровно так, как эмуляция.
Например, в IE 11 можно эмулировать IE 9, но поскольку эмуляция идет через консоль вы таким образом никогда не узнаете, что в IE 9 консоль по умолчанию не существует и создается только по факту её открытия, а следовательно, любые ваши console.log() в отсутствие спец. мер будут приводить к ошибкам и падениям скриптов.
И, наконец, третий вариант:
3) Сервисы, позволяющие провести кросс-браузерное тестирование.
http://deviceanywhere.com/
Предоставляет реальные устройства для тестирования чего бы то ни было в ручном режиме.
Имеется два вида бесплатного доступа и полномасштабный платный доступ.
Бесплатный доступ на общих основаниях позволяет удалённо пользоваться 11-ю мобильными устройствами сессиями по 10 минут.
Формально на них можно поставить что угодно, по факту же работает то самое ограничение в 10 минут. Изначальный набор установок базовый. Если вам нужно протестировать мобильный хром под андройд — вам его придется устанавливать.
Есть бесплатный пробный период в 7 дней. Для его использования придется установить “тестовый центр”. В пробном периоде ассортимент устройств сопоставим с бесплатным, однако ограничения на длину сессий уже нет.
Список устройств, доступных в платном варианте поистине впечатляет: www.keynotedeviceanywhere.com/test-center-developer/device_test.php
Расценки начинаются с 280 $ за 10 часов при использованом одном “пакете” устройств (всего имеется 13 “пакетов”).
Достоинства — возможность тестировать бесплатно 10-минутными сессиями, увесистый набор доступных реальных устройств при платном доступе.
Недостатки — базовая конфигурация устройств, ориентация на тестирование приложений, а не сайтов (это же статья про сайты), тестирование только мобильных устройств, необходимость установки дополнительного ПО для полного доступа.
http://browsershots.org/
Бесплатный сервис скриншотов. Позволяет запустить вашу страничку на внушительном количестве браузеров под Linux (84 браузера), Windows (87 браузеров) и MacOs (10 браузеров).
Скриншоты делаются весьма грамотно: для большинства браузеров при достаточно длинной страничке скриншоты на самом деле состоят из склейки нескольких скриншотов с прокруткой.
Заказать тесты можно достаточно быстро в несколько кликов, если, конечно, не требуется точно задать, например: FF8 — FF26 на Linux и Windows, тогда, конечно, придется муторно кликать по чекбоксам.
Стоит также отметить, что система открытая и любой может к ней присоединиться, предоставив свои вычислительные ресурсы. Более того, авторы даже предоставляют реализацию своего API на Python.
Достоинтсва — бесплатность, автоматичские скриншоты, получаемые в параллель на разных компьютерах, реальные устройства.
Недостатки — Только три ОС, при чем под общими именами могут быть какие угодно реальные ОС, конкретную версию вы узнаете только получив скриншоты. Так что проверяя FF 25 на Windows вы можете получить скриншот с любой Windows, какую только сумеете придумать. Можно получить с 7-ки, а можно с 8-ки, можно с XP. Как повезет. Нет “Живого доступа”. Вы получаете только мертвые скрины. При том не всегда понятно по какому признаку отрабатывает снятие скрина, бывает, что он берется слишком рано.
http://crossbrowsertesting.com/
Система для проведения кросс-браузерного тестирования. Имеет широкую базу и большое количество различных сочетаний браузер/ОС. Полный список доступных предложений здесь: crossbrowsertesting.com/browsers. Позволяет провести как скриншот тесты, так и “живые тесты”. Более того из результатов скриншотов можно попасть в “живой тест” одним кликом. Также как и переделать отдельный скрин.
Бесплатный доступ всего лишь на один час.
Платные расценки от 30$ за 2,5 часа.
Достоинства — удобный интерфейс, большая база браузеров, возможность точного назначения сочетания браузера и ОС, большинство тестов проводится на реальных устройствах.
Недостатки — некоторые тесты все же проводятся на эмуляторах (Android 2.2, 4.0), различия в пуле браузеров и операционных устройств доступных для автоматических скриншотов и для “живого теста” (последних больше).
http://www.browserstack.com/
Предоставляет богатый набор операционных систем и браузеров под них и богатый набор эмуляций мобильных устройств с родными браузерами на них.
Полный список можно посмотреть здесь: www.browserstack.com/list-of-browsers-and-platforms
А вот чем данный ресурс интересен, так это разнообразием возможностей. В разделе “Responsive” можно бесплатно посмотреть свой сайт на разных мобильных устройствах (их эмуляциях) но, увы, только на родных браузерах.
Раздел “Screenshots” предсказуемо предлагает массовый тест с получением скриншотов. Кроме того есть возможность указать таймаут до изготовления скриншота, что дает хоть какой-то контроль над этим тестом.
“Screenshots” и “Responsive” обслуживаются как единое целое, доступны 100 скриншотов бесплатно. Далее 39$ в месяц. План от 199$ дает доступ к API для автоматического получения скриншотов.
Раздел “Live” — возможность забраться на выбранную ОС и посмотреть сайт в желаемом браузере, или посмотреть эмуляцию желаемого мобильного устройства. Доступно 30 минут бесплатно, далее тарифы начинаются от 39$ в месяц.
И, собственно, что выделяет данный сервис из остальных — раздел “Automate”, где можно получить доступ к API, позволяющему реализовать тесты на Selenium на стороне сервиса в желаемых ОС и браузерах. Доступно 100 минут бесплатно. Тарифы начинаются от 99$ в месяц за максимум 8 (2 потока по 4) часов в день.
Достоинства — обилие возможностей, тестирование по API и вовсе уникальная в данном сегменте штука.
Недостатки — мобильные устройства эмулированные
https://browserling.com/
Сервис, предоставляющий возможность живого доступа к заданным браузерам. Есть возможность неограниченного количества сессий по 3 минуты. За 20$ в месяц можно получить бесконечные сессии на одного разработчика, за 30 на бесконечное количество разработчиков. И да, на бесплатном плане из IE вам будет доступен только 9.0.
Достоинства — простота, возможность бесплатной проверки сайтов и вообще дешевизна на общем фоне.
Недостатки — нельзя заказать ОС, более того, она скрыта, хотя по некоторым признакам внешнего вида окошек можно догадываться, нет скриншотов, сервис направлен только на ручное “протыкивание”, доступны только десктопные “мажорные” браузеры.
http://opendevicelab.com/
Сеть “открытых лабораторий” в которых по задумке авторов можно протестировать мобильные приложения и сайты на реальных устройствах. Однако, никакой возможности провести тестирование через сеть нет. Только вручную, только методом физического посещения. И, увы, по их карте ближайшие лаборатории расположены в Финляндии.
Литература и ссылки.
Вообще, на эту тему существует на удивление немного статей, особенно обзорных, претендующих хоть на какую-то полноту. Ближайшее, что мне удалось найти:
http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
Часть материалов этой статьи и легла в основу представленного обзора.
Кроме того, что-то нашлось на хабре:
http://habrahabr.ru/post/73251/
Статья о сервисе, эмулирующем браузеры. Увы, очень старая. Хотя сервис все еще жив и продолжает работать.
И http://habrahabr.ru/post/111748/
чуть более новая, но некоторые описания там все же уже устарели.
1) Если у вас есть все устройства, на которых вы хотите проверить свой сайт, то достаточно просто взять эти устройства и проверить. Возможно, воспользовавшись ПО для оптимизации этого процесса.
2) Если устройств нету, но необходимо проверить на достаточно ограниченном количестве браузеров и устройств, то можно поднять эмуляторы и просто последовательно пройтись по сайту на всех доступных браузерах.
3) Если нет устройств и хочется хорошего качества, то стоит поискать в интернете сервисы, которые могут предоставить реальные устройства с требуемыми браузерами в рездельное пользование.
Обо всех этих трех способах я и хотел сегодня вам поведать.
Итак:
1) ПО для управления тестами на реальных устройствах.
Если желаемые мобильные устройства у вас имеются в наличии, то существует пара инструментов для централизованного управления и отладки:
http://html.adobe.com/edge/inspect/
и
http://vanamco.com/ghostlab/
К сожалению, в моих условиях с устройствами беда и наличных устройств много меньше чем устройств, на которых необходимо обеспечить работоспособность нашего продукта, потому я не могу рассказать об упомянутых системах ничего кроме ссылок на их сайты.
2) Эмуляция
Тут и широко известный dosbox и чуть менее известные эмуляторы для мобильных:
Для эмуляции Андроид можно воспользоваться официальным эмулятором здесь:
http://developer.android.com/tools/help/emulator.html
Или легковесным условно открытым эмулятором от Genymotion:
https://cloud.genymotion.com/page/customer/login/?next=/
Для IOS все довольно грустно и приходится рассчитывать на iPadian.
Для Windows Phone наличествует официальный эмулятор
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx
Не трудно догадаться, что только для Windows.
Стоит отметить, что все конструкции с эмуляцией требуют достаточно хитрых извращений и, как правило, не поддаются хоть какой-то автоматизации. хотя с должным применением хитрости, упрямства и таланта, можно попытаться скрестить эмулированные ОС и устройства с ПО из первого пункта.
Также важно, что с эмуляцией никогда нельзя быть уверенным, что реальное устройство будет работать ровно так, как эмуляция.
Например, в IE 11 можно эмулировать IE 9, но поскольку эмуляция идет через консоль вы таким образом никогда не узнаете, что в IE 9 консоль по умолчанию не существует и создается только по факту её открытия, а следовательно, любые ваши console.log() в отсутствие спец. мер будут приводить к ошибкам и падениям скриптов.
И, наконец, третий вариант:
3) Сервисы, позволяющие провести кросс-браузерное тестирование.
http://deviceanywhere.com/
Предоставляет реальные устройства для тестирования чего бы то ни было в ручном режиме.
Имеется два вида бесплатного доступа и полномасштабный платный доступ.
Бесплатный доступ на общих основаниях позволяет удалённо пользоваться 11-ю мобильными устройствами сессиями по 10 минут.
Формально на них можно поставить что угодно, по факту же работает то самое ограничение в 10 минут. Изначальный набор установок базовый. Если вам нужно протестировать мобильный хром под андройд — вам его придется устанавливать.
Есть бесплатный пробный период в 7 дней. Для его использования придется установить “тестовый центр”. В пробном периоде ассортимент устройств сопоставим с бесплатным, однако ограничения на длину сессий уже нет.
Список устройств, доступных в платном варианте поистине впечатляет: www.keynotedeviceanywhere.com/test-center-developer/device_test.php
Расценки начинаются с 280 $ за 10 часов при использованом одном “пакете” устройств (всего имеется 13 “пакетов”).
Достоинства — возможность тестировать бесплатно 10-минутными сессиями, увесистый набор доступных реальных устройств при платном доступе.
Недостатки — базовая конфигурация устройств, ориентация на тестирование приложений, а не сайтов (это же статья про сайты), тестирование только мобильных устройств, необходимость установки дополнительного ПО для полного доступа.
http://browsershots.org/
Бесплатный сервис скриншотов. Позволяет запустить вашу страничку на внушительном количестве браузеров под Linux (84 браузера), Windows (87 браузеров) и MacOs (10 браузеров).
Скриншоты делаются весьма грамотно: для большинства браузеров при достаточно длинной страничке скриншоты на самом деле состоят из склейки нескольких скриншотов с прокруткой.
Заказать тесты можно достаточно быстро в несколько кликов, если, конечно, не требуется точно задать, например: FF8 — FF26 на Linux и Windows, тогда, конечно, придется муторно кликать по чекбоксам.
Стоит также отметить, что система открытая и любой может к ней присоединиться, предоставив свои вычислительные ресурсы. Более того, авторы даже предоставляют реализацию своего API на Python.
Достоинтсва — бесплатность, автоматичские скриншоты, получаемые в параллель на разных компьютерах, реальные устройства.
Недостатки — Только три ОС, при чем под общими именами могут быть какие угодно реальные ОС, конкретную версию вы узнаете только получив скриншоты. Так что проверяя FF 25 на Windows вы можете получить скриншот с любой Windows, какую только сумеете придумать. Можно получить с 7-ки, а можно с 8-ки, можно с XP. Как повезет. Нет “Живого доступа”. Вы получаете только мертвые скрины. При том не всегда понятно по какому признаку отрабатывает снятие скрина, бывает, что он берется слишком рано.
http://crossbrowsertesting.com/
Система для проведения кросс-браузерного тестирования. Имеет широкую базу и большое количество различных сочетаний браузер/ОС. Полный список доступных предложений здесь: crossbrowsertesting.com/browsers. Позволяет провести как скриншот тесты, так и “живые тесты”. Более того из результатов скриншотов можно попасть в “живой тест” одним кликом. Также как и переделать отдельный скрин.
Бесплатный доступ всего лишь на один час.
Платные расценки от 30$ за 2,5 часа.
Достоинства — удобный интерфейс, большая база браузеров, возможность точного назначения сочетания браузера и ОС, большинство тестов проводится на реальных устройствах.
Недостатки — некоторые тесты все же проводятся на эмуляторах (Android 2.2, 4.0), различия в пуле браузеров и операционных устройств доступных для автоматических скриншотов и для “живого теста” (последних больше).
http://www.browserstack.com/
Предоставляет богатый набор операционных систем и браузеров под них и богатый набор эмуляций мобильных устройств с родными браузерами на них.
Полный список можно посмотреть здесь: www.browserstack.com/list-of-browsers-and-platforms
А вот чем данный ресурс интересен, так это разнообразием возможностей. В разделе “Responsive” можно бесплатно посмотреть свой сайт на разных мобильных устройствах (их эмуляциях) но, увы, только на родных браузерах.
Раздел “Screenshots” предсказуемо предлагает массовый тест с получением скриншотов. Кроме того есть возможность указать таймаут до изготовления скриншота, что дает хоть какой-то контроль над этим тестом.
“Screenshots” и “Responsive” обслуживаются как единое целое, доступны 100 скриншотов бесплатно. Далее 39$ в месяц. План от 199$ дает доступ к API для автоматического получения скриншотов.
Раздел “Live” — возможность забраться на выбранную ОС и посмотреть сайт в желаемом браузере, или посмотреть эмуляцию желаемого мобильного устройства. Доступно 30 минут бесплатно, далее тарифы начинаются от 39$ в месяц.
И, собственно, что выделяет данный сервис из остальных — раздел “Automate”, где можно получить доступ к API, позволяющему реализовать тесты на Selenium на стороне сервиса в желаемых ОС и браузерах. Доступно 100 минут бесплатно. Тарифы начинаются от 99$ в месяц за максимум 8 (2 потока по 4) часов в день.
Достоинства — обилие возможностей, тестирование по API и вовсе уникальная в данном сегменте штука.
Недостатки — мобильные устройства эмулированные
https://browserling.com/
Сервис, предоставляющий возможность живого доступа к заданным браузерам. Есть возможность неограниченного количества сессий по 3 минуты. За 20$ в месяц можно получить бесконечные сессии на одного разработчика, за 30 на бесконечное количество разработчиков. И да, на бесплатном плане из IE вам будет доступен только 9.0.
Достоинства — простота, возможность бесплатной проверки сайтов и вообще дешевизна на общем фоне.
Недостатки — нельзя заказать ОС, более того, она скрыта, хотя по некоторым признакам внешнего вида окошек можно догадываться, нет скриншотов, сервис направлен только на ручное “протыкивание”, доступны только десктопные “мажорные” браузеры.
http://opendevicelab.com/
Сеть “открытых лабораторий” в которых по задумке авторов можно протестировать мобильные приложения и сайты на реальных устройствах. Однако, никакой возможности провести тестирование через сеть нет. Только вручную, только методом физического посещения. И, увы, по их карте ближайшие лаборатории расположены в Финляндии.
Литература и ссылки.
Вообще, на эту тему существует на удивление немного статей, особенно обзорных, претендующих хоть на какую-то полноту. Ближайшее, что мне удалось найти:
http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
Часть материалов этой статьи и легла в основу представленного обзора.
Кроме того, что-то нашлось на хабре:
http://habrahabr.ru/post/73251/
Статья о сервисе, эмулирующем браузеры. Увы, очень старая. Хотя сервис все еще жив и продолжает работать.
И http://habrahabr.ru/post/111748/
чуть более новая, но некоторые описания там все же уже устарели.