что такое кроссбраузерное тестирование
Кросс-браузерное тестирование в Selenium
В этой статье мы рассмотрим кросс-браузерное тестирование. Это тип тестирования, который проверяет, работает ли приложение так, как ожидается, в нескольких браузерах, операционных системах и устройствах. Мы можем проводить кросс-браузерное тестирование с помощью автоматизации и без нее. Сценарии автоматизированного тестирования могут быть написаны или созданы с помощью таких программ, как TestProject и Selenium.
Примечание: Код из этой статьи находится на GitHub здесь.
Что такое кросс-браузерное тестирование?
Кросс-браузерное тестирование гарантирует, что наше тестируемое приложение (AUT) совместимо с каждым браузером, операционной системой и устройством. Цель заключается в сравнении ожидаемого поведения приложения в различных случаях. Бывают случаи, когда один и тот же тестовый сценарий проходит на одном или нескольких экземплярах, но не работает на другом экземпляре.
Возможно, сбой произошел из-за нашего тестового скрипта или приложения. Вы когда-нибудь пытались открыть веб-сайт с помощью Internet Explorer, но он не работал, а затем тот же сайт без проблем открывался в Chrome? Такие проблемы выявляются во время кросс-браузерного тестирования, поскольку данные из AUT отображаются по-разному в каждом браузере.
Преимущества кросс-браузерного тестирования
Я сосредоточусь на двух преимуществах кросс-браузерного тестирования:
Время
Создание и выполнение индивидуального сценария тестирования (Test Script) для уникальных сценариев занимает много времени. Поэтому наши тестовые сценарии создаются с тестовыми данными для использования их комбинаций. Один и тот же сценарий тестирования может выполняться на Chrome и Windows для первой итерации, затем на Firefox и Mac для второй итерации, а затем на других сценариях для последующих итераций.
Тестовое покрытие
Что будет включено в наши сценарии тестирования, зависит от требований.
То, сколько охвачено в наших сценариях тестирования, зависит от браузеров и их различных версий.
Тестовое покрытие является эффективным мерилом для процесса тестирования. Однако 100% покрытие трудно обеспечить, и, скорее всего, функция ведет себя не так, как это обычно происходит в конкретной версии.
Как осуществить кросс-браузерное тестирование в Selenium?
Мы осуществляем кросс-браузерное тестирование в Selenium, используя его сетку (grid) или тестовые данные. Selenium Grid упрощает процесс, а тестовые данные используются в качестве исходных. С помощью Selenium Grid наши тестовые сценарии выполняются параллельно на нескольких удаленных устройствах. Команды отправляются клиентом удаленным экземплярам браузера.
Тестовые данные могут храниться в файле Excel, CSV, файле свойств, XML или базе данных. Мы также можем объединить TestNG с тестовыми данными для проведения тестирования на основе данных или кросс-браузерного тестирования. Для тестирования на основе данных аннотация DataProvider и атрибут dataProvider или атрибут dataProviderClass позволяют нашему тестовому сценарию получать неограниченное количество значений.
Когда речь идет о кросс-браузерном тестировании, мы можем использовать тег параметра и аннотацию Parameters для передачи различных имен браузеров. Ниже приведены фрагменты кода, отображающие XML-файл с тегом параметра и тестовый сценарий с аннотацией Parameters.
В XML-файле тег параметра расположен на уровне теста. У нас есть возможность разместить тег на уровне тестового набора, на уровне теста или на обоих уровнях. Обратите внимание, что тег параметра имеет имя и значение с данными между двойными кавычками. Его имя, т.е. «BrowserType», передается тестовому сценарию через аннотацию @Parameters, а значение, т.е. «Chrome», передается в операторы if и else if.
Операторы if и else if устанавливают Chrome, Edge или Firefox. Каждый браузер получал команды от одного и того же тестового сценария после выполнения из XML-файла. Следующие результаты тестирования показывают, как успешно загружается страница TestProject, а консоль печатает уникальное имя браузера и заголовок страницы.
Кросс-браузерное тестирование в Selenium с помощью TestProject
OpenSDK / Закодированный тест
Существует 2 способа проведения кросс-браузерного тестирования с помощью TestProject. Мы можем использовать OpenSDK с открытым исходным кодом или AI-Powered Test Recorder. OpenSDK оборачивается в Selenium и поддерживает Java, C# или Python. Наши тестовые сценарии похожи на кросс-браузерное тестирование в Selenium с минимальными изменениями в коде и зависимостях. Мы должны включить зависимость TestProject для Maven или Gradle, импортировать драйверы браузера и передать токен.
AI-Powered Test Recorder
С помощью AI-Powered Test Recorder мы создаем новое веб-задание, затем выбираем несколько браузеров, таких как Chrome, Edge и Firefox. Тест в задании TestProject позволяет нам выбрать дополнительный источник данных CSV, если мы хотим выполнить тестирование на основе данных. Вот несколько скриншотов, показывающих шаги по выполнению кросс-браузерного тестирования и отчета.
Вот пошаговая демонстрация кросс-браузерного тестирования с помощью TestProject AI-Powered Test Recorder.
Выводы
Кросс-браузерное тестирование осуществляется с помощью Selenium и TestProject.
TestProject позволяет нам создавать собственные тестовые сценарии с использованием Java, C# или Python после добавления OpenSDK с открытым исходным кодом. OpenSDK является оберткой Selenium, поэтому он содержит команды Selenium плюс дополнительные команды из TestProject. Кроме того, мы можем использовать TestProject’s AI-Powered Test Recorder для проведения кросс-браузерного тестирования. Это удобный процесс, который требует от нас только выбора браузера, который мы хотим использовать для кросс-браузерного тестирования.
Перевод статьи подготовлен в рамках курса «Java QA Engineer. Basic». Всех желающих приглашаем на двухдневный онлайн-интенсив «Теория тестирования и практика в системах TestIT и Jira». На интенсиве мы узнаем, что такое тестирование и откуда оно появилось, кто такой тестировщик и что он делает. Изучим модели разработки ПО, жизненный цикл тестирования, чек листы и тест-кейсы, а также дефекты. На втором занятии познакомимся с одним из главных трекеров задач и дефектов — Jira, а также попрактикуемся в TestIT — отечественной разработке для решения задач по тестированию и обеспечению качества ПО.
Для чего мне проводить проверку кроссбраузерности сайта?
Кроме потери посетителей и трафика, вы можете потерять потенциальных клиентов. Если у вас есть сайт, через который вы продаете товар или услугу, и пользователь не может оформить заказ, потому что ваша форма не работает в его браузере.
Тестирование сайта в различных браузерах должно стать обычной практикой для вас. Проверьте общий дизайн, навигацию, а также заполните и отправьте все имеющиеся формы, иначе вы рискуете потерять посетителей, клиентов и трафик:
Как выполнить проверку кроссбраузерности сайта?
Browsershots
Browsershots — это простой в использовании онлайн-инструмент для проверки кроссбраузерности сайта. Он позволяет протестировать сайт в основных стационарных браузерах, при этом вы можете указать различные версии программ. После того, как введете URL-адрес тестируемого сайта, всего через несколько минут вы увидите его скриншоты, сделанные в каждом из выбранных браузеров:
Это хорошо, если вы хотите проверить внешний вид, но вы не сможете на самом деле « протестировать » элементы навигации и формы. С помощью этого бесплатного инструмента вы сможете убедиться, что тестируемый сайт выглядит нормально в различных версиях стационарных браузеров.
Spoon Browser Sandbox
Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:
После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.
Данный сервис позволяет полностью протестировать все аспекты кроссбраузерности. Обратите внимание, что этот инструмент попросит вас установить плагин, поэтому, если вы не хотите загружать и устанавливать его, вам стоит рассмотреть другой инструмент.
Viewlike.us
Viewlike.us позволяет просмотреть сайт при разных разрешениях. Это пригодится для тестирования внешнего вида сайта, а также даст ценную информацию, касающуюся адаптивности ресурса:
С помощью этого инструмента проверки кроссбраузерности сайта также можно оценить скорость и юзабилити тестируемого сайта. Если такие показатели, как размер изображений, размер элементов HTML и количество статических ресурсов нужны вам, значит и Viewlike.us будет полезен.
Инструмент также предоставит подробную информацию и рекомендации в соответствии с правилами юзабилити. Например, использует ли тестируемый сайт плагины или встречается ли в нем нечитаемый размер шрифта. После этого вы увидите скриншоты тестируемого ресурса в различных разрешениях. Затем можно установить другие разрешения, используемые на смартфонах и планшетах.
IE NetRenderer
Browsera
Browsera предоставляет пользователю информацию, касающуюся отображения сайта и выявленных ошибок. Введите URL-адрес сайта, и инструмент начнет сканировать его. Вы увидите, как он обрабатывает страницы, и сколько времени осталось до окончания тестирования.
Когда тест на кроссбраузерность завершится, вы получите на электронную почту письмо с результатами, а в окне Browsera будет выведен подробный отчет.
Для использования Browsera требуется создание учетной записи. Доступно несколько тарифов, а бесплатного вполне достаточно для тестирования небольших сайтов.
Какой из инструментов использовать?
Spoon Browser Sandbox — единственный бесплатный инструмент из рассмотренных в этой статье, позволяющий провести полную проверку ресурса. Так что, если вы не хотите устанавливать все браузеры или платить за услугу, это лучший вариант для тестирования интерактивных элементов сайта.
Используете ли вы уже эти инструменты?
Использовали ли вы какие-либо из описанных в этой статье инструментов для проверки кроссбраузерности? Или вы знаете о каких-либо других бесплатных веб-инструментах, которыми хотели бы поделиться и предложить другим читателям? Не забудьте, что речь шла именно о тестировании в стационарных браузерах, а не в мобильных.
Что такое кроссбраузерное тестирование
Как часто заказчики ПО хотят, чтобы их детище работало у любого пользователя, в любых условиях и окружениях? Здесь будет уместен ответ — всегда. Что же скрывается за этой фразой? Что именно требуется для проверки от тестировщика? И как он будет воплощать требования в жизнь?
Не секрет, что WEB-приложения имеют отличия от десктопных. Самое главное отличие и опасение — это то, что мы не знаем, в каком браузере и уж тем более — в какой версии этого браузера откроет приложение наш пользователь.
Сколько существует браузеров
Если вас спросят, сколько браузеров вы знаете, думаю, вы с уверенностью назовете не меньше пяти. А если вас спросить, сколько вообще существует браузеров — возможно, вы задумаетесь.
А если спросить об этом у Гугла? Ответ будет неоднозначный. Количество более-менее известных браузеров сейчас превышает 50 наименований. И возможно, прямо сейчас кто-то выпускает в сеть еще один, свой собственный. А давайте представим, что уже завтра этот “кто-то” выпустит обновление своего браузера. Как же в таких непростых условиях проверить всё?
Какие есть стандарты для создания браузеров
Есть радостная новость! Типовых движков, с помощью которых работают браузеры, гораздо меньше. Кроме того, существуют язык разметки и протоколы, которые объединяют все наши разнообразные и разношерстные браузеры. Я говорю о таких вещах, как HTML, CSS и HTTP. Любой уважающий себя и своих потенциальных пользователей создатель браузера будет соблюдать эти правила и сделает браузер, адаптированным под общепринятые стандарты. Отдельно почитать об этом можно на сайте w3.org.
Но и тут есть подводные камни. Стандарты совершенствуются; новые версии браузеров, по крайней мере, стараются совершенствоваться. А старые версии? Мало кто занимается доработкой старых версий. Да вообще никто не занимается. Выпустили новую — и все счастливы. А пользователи, думаете, каждый день проверяют наличие обновлений своего браузера? Тоже вряд ли.
К тому же, не стоит забывать про разработчиков, которые пишут само приложение. Они тоже люди, могут ошибиться в коде, могут не посмотреть в стандарт — бывает всякое. Поэтому, к сожалению, стандарты — не панацея.
Как выбрать браузеры под ваше приложение
Теперь о тестировании. Прежде чем начать непосредственно тестировать то или иное web-приложение, тестировщик должен ознакомиться с требованиями, которые выдвигает заказчик. Бывает так, что в требованиях изначально прописано: “Наш продукт должен работать в браузерах Chrome, начиная с версии 43, и IE, начиная с версии 9”. Или же сам заказчик не может определиться и, конечно же, ему хочется охватить всё и всех. Ну а вдруг, его самый важный потенциальный клиент использует браузер Uran? И что тогда? Он не увидит его приложение вовсе?
Прежде чем тестировщик начнет устанавливать себе все браузеры мира на один компьютер или, наоборот, удалять ненужные 48, можно предложить заказчику провести исследование. Таким образом, тестирование пройдет быстрее и более углубленно. Приложение выйдет в свет раньше. Ну а сам заказчик потратит меньше денежных средств.
Для начала надо определить целевую аудиторию будущего приложения. Кто эти люди, где они живут? Исходя из этих данных в сети можно увидеть статистику использования браузеров — например, самые популярные браузеры Азии. Благодаря таким запросам можно увидеть очень интересные и даже неожиданные результаты. Ну а если приложение в каком-то виде уже существует, можно воспользоваться удобной статистикой от ГуглАналитикс и иметь свои конкретные данные.
Хочу показать вам некоторые сервисы по просмотру статистики:
Как проводить кроссбраузерное тестирование
Когда выбор браузеров завершен, начинается полноценное тестирование. Допустим, вы выбрали три версии IE, три версии Chrome, две версии FireFox и две версии Safari. Если с разными браузерами один тестировщик справиться сможет, то с разными версиями одного и того же браузера может возникнуть заминка.
Тут на помощь приходят эмуляторы. Их тоже существует немало. С помощью одних, например, Browsershots, можно получить скриншоты реальных пользователей с нужных нам браузеров и их версий. С помощью других можно самому выполнять нужные нам действия в самом эмуляторе.
Я хочу рассказать про два из них, которые лично использовала в ходе своей работы.
Например, эмулятор IETester, разработанный специально под этот браузер. В соседних окнах эмулятора можно открыть одну и ту же страницу разными версиями браузера. Это очень удобно и наглядно. Путем сравнения двух соседних вкладок можно легко увидеть несоответствия в отображении. В моей практике эта программа меня не подводила. И вдогонку, еще один её несомненный плюс — программа полностью бесплатна и занимает совсем немного места.
Однако, есть мнения, что отображение в этом эмуляторе не соответствует действительности. Как быть в этой ситуации? Есть решение! Проверить в самом браузере. Если какой-то момент “прям смущает-смущает”, открывайте реальный браузер и смотрите.
Если, например, надо проверить в IE 10, а на компьютере уже есть IE 11? Удалять, переустанавливать, проверять — это неверное решение. Тут на помощь приходят виртуальные машины. Это как компьютер в компьютере.
Например, можно воспользоваться Vmware workstation. И иметь на рабочем компьютере одни версии браузеров, а на виртуальной машине — другие. Можно даже установить несколько таких машин на один компьютер, и после этого иметь под рукой много разного софта. Стоит заметить, что виртуальные машины тоже различаются:
Другой эмулятор — Spoon. Им также можно пользоваться абсолютно бесплатно. Он включает в себя широкий выбор браузеров: Firefox, Chrome, Opera, Safari и их разные версии. Тоже довольно удобная программа, которая позволяет в разных окошках на одной странице сравнить разные браузеры.
Разнообразие инструментов для тестирования кроссбраузерности
Конечно, этими двумя программами выбор эмуляторов не ограничивается:
Каждый тестировщик знает и любит какие-то свои программки.
Кроме программ, устанавливаемых локально, тестирования в облаке и получения скриншотов хочется также выделить сервис Crossbrowsertesting.com. В нем можно:
Кроме записи данный сервис может похвастаться полноценной работой в ОС: т.е., можно в рамках одного теста переключаться между браузерами, задавать разные адреса и даже открывать инструмент разработки.
На что важно обращать внимание при кроссбраузерном тестировании
А зачем вообще тестировщики проводят такое тестирование, что именно они хотят проверить? Как я уже говорила, браузеры — разные, движки, на которых они работают, тоже разные. А это значит, что одни и те же элементы могут отображаться по-разному. Ведь разработчикам во время написания приложения довольно сложно подстроиться сразу под все браузеры и учесть все их особенности.
WEB-приложения по-другому называют клиент-серверные приложения. Здесь клиентом выступает браузер, а сервером — веб-сервер. Браузер принимает от пользователя запрос, отправляет его на сервер. WEB-сервер обрабатывает запрос и передает ответ обратно в виде HTML-страницы. Браузер отрисовывает полученный код в страницу, которую мы с Вами в итоге и видим. То есть, непосредственно от браузера будет зависеть то, какой мы увидим страницу.
Тестировщики при таком виде проверок отслеживают отображение форм, полей, чекбоксов, шрифтов, но наибольшее внимание, конечно же, уделяется интерфейсу: ведь это то, что в первую очередь оценивают пользователи вашего приложения.
Кросс-браузерное тестирование
Для кросс-браузерного тестирования можно использовать три подхода.
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) Сервисы, позволяющие провести кросс-браузерное тестирование.
Достоинства — возможность тестировать бесплатно 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.
Достоинства — простота, возможность бесплатной проверки сайтов и вообще дешевизна на общем фоне.
Недостатки — нельзя заказать ОС, более того, она скрыта, хотя по некоторым признакам внешнего вида окошек можно догадываться, нет скриншотов, сервис направлен только на ручное “протыкивание”, доступны только десктопные “мажорные” браузеры.