«Качество никогда не бывает случайным, оно всегда является результатом разумных усилий». . . Джон Раскин
Познакомьтесь с транспортиром
Protractor — это платформа для сквозного тестирования приложений JavaScript (AngularJS), объединяющая такие технологии, как NodeJS, Selenium, Jasmine, Mocha и WebDriver.
Рабочий процесс тестирования Protractor e2e:
Система тестирования (NodeJS) — Webdriver (Selenium) — Приложение Angular
Почему не просто Selenium, зачем вам еще и Protractor?
Приложения AngularJS — это веб-приложения, которые используют гибридный синтаксис HTML для выражения компонентов. В AngularJS мы находим такой синтаксис, как ng-for, ng-if, ng-modelи ng-repeat. Этот гибридный синтаксис не включен в локаторы Selenium, поэтому Selenium не может их идентифицировать. Однако Protractor поверх селена может идентифицировать, обрабатывать и контролировать эти атрибуты. Основное внимание уделяется тестированию фактической функциональности приложения AngularJS.
Преимущества использования Protractor:
Если вы пишете тесты e2e для приложений AngularJS, вам нужен Protractor. Вот почему:
- Protractor основан на концепциях AngularJS, поэтому его легко понять новым пользователям, уже знакомым с AngularJS.
- Protractor ускоряет тестирование, поскольку позволяет избежать большого количества «задержек» и «ожиданий» в ваших тестах, учитывая, что он оптимизирует время засыпания и ожидания.
- С транспортиром у вас есть доступ к множеству настроек Selenium, позволяющих легко создавать тесты для приложений AngularJS.
- Он работает в реальных браузерах, таких как Chrome и Firefox, и безголовых браузерах, таких как HtmlUnit и PhantomJS.
Установка и использование
Не так быстро, у вас есть пропуск зависимостей?
Чтобы начать использовать Protractor, вам необходимо установить следующие зависимости:
- Java:
Загрузите и установите Java на свой компьютер
Примечание. Раздел ниже предназначен для запуска автономного сервера Selenium. Если вы собираетесь использовать Selenium с транспортиром, как мы планируем, вы можете перейти к шагу 2.
Перейдите по этой ссылке, чтобы загрузить отдельное java-приложение selenium; selenium-server-standalone-3.x.x.jar на свой компьютер.
Запустите загруженный сервер двойным кликом по нему или через терминал выполнив:
java -jar selenium-server-standalone-3.x.x.jar
2. NodeJS:
Следующий шаг — скачать и установить nodeJS. После установки nodeJS откройте терминал и выполните команду, показанную ниже, чтобы проверить версию узла:
node -v
При правильной установке вы увидите в консоли ответ, аналогичный показанному ниже:
v6.x.x
Поздравляем, вы готовы начать пользоваться транспортиром.
- Установить транспортир
После выполнения описанных выше шагов откройте окно терминала и выполните команду:
npm install -g protractor
Это установит транспортир глобально на вашем компьютере. Чтобы проверить эту установку, выполните следующую команду:
protractor --version
При правильной установке вы получите ответ, похожий на:
version x.x.x
- Обновите webdriver-manager (необязательно, но рекомендуется)
Диспетчер веб-драйверов используется для запуска тестов приложения angular в определенном браузере. Вы можете обновить webdriver-manager с помощью команды:
webdriver-manager update
- Запустить webdriver-manager
Запустите диспетчер веб-драйверов, чтобы прослушать тесты, выполняемые с помощью транспортира. Как только транспортир используется для запуска теста, веб-драйвер автоматически загружает и запускает тесты в соответствующем браузере.
Чтобы запустить webdriver-manager, выполните в терминале следующую команду:
webdriver-manager start
Это запустит сервер webdriver-manager.
После этого откройте веб-браузер и введите в адресную строку следующий адрес: http://localhost:4444/wd/hub
должна открыться веб-страница, похожая на приведенную ниже:
Если вы видите эту страницу, транспортир был успешно установлен.
Пример тестирования AngularJS с использованием транспортира:
В этом сеансе мы протестируем простое приложение AngularJS, развернутое на веб-странице AngularJS с помощью транспортира с chromeDriver.
Для этого мы создадим два файла: conf.js и test-spec.js, как показано ниже. ниже:
conf.js
exports.config = { capabilities: { 'browserName': 'chrome' }, seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['test-spec.js'] };
test-spec.js
describe('AngularJS 2-way binding test', () => { it('Should bind the name you enter into the input box', () => { browser.get('https://angularjs.org'); element(by.model('yourName')).sendKeys('World'); const response = element(by.css('h1.ng-binding')); expect(response.getText()).toEqual('Hello World!'); }); });
В конфигурационном файле указываем chrome в качестве тестового браузера по умолчанию, это может быть любой реальный или безголовый браузер, например Firefox или PhantomJS.
После настройки файлов выполните приведенную ниже команду, чтобы запустить тест e2e с помощью транспортира:
protractor conf.js
Приведенная выше команда запускает браузер Chrome и запускает указанный тест.
Интеграция стека браузеров
С помощью browserstack мы можем тестировать веб-приложения в нескольких браузерах, как правило, для проверки совместимости и/или отзывчивости. Protractor можно интегрировать в стек браузеров, чтобы обеспечить выполнение теста e2e в нескольких браузерах. Файл config.js
, объединяющий стек браузера для тестирования приложения в Internet Explorer, работающем в Windows7, показан ниже:
exports.config = { 'seleniumAddress': 'http://hub-cloud.browserstack.com/wd/hub', specs: ['test-spec.js'], 'baseUrl': <Your App Url>, 'capabilities': { 'browserstack.user': '<Enter Browserstack Username>', 'browserstack.key': '<Enter Browserstack API key>', 'os': 'Windows', 'os_version': '7', 'browserName': 'IE', 'browser_version': '8.0', 'resolution': '1024x768' } };
Мультибраузерное тестирование
«Зачем тестировать только один, если можно протестировать их все»
Используя стек браузера, мы можем запускать тесты в нескольких браузерах одновременно, это дает вам возможность обеспечить производительность ваших приложений в разных браузерах без необходимости переписывать тестовую конфигурацию. Пример файла конфигурации показан ниже:
exports.config = { 'seleniumAddress': 'http://hub-cloud.browserstack.com/wd/hub', specs: ['test-spec.js'], 'baseUrl': <Your App Url>, browserstackUser: '<Browserstack Username>', browserstackKey: '<Browserstack API key>', 'multiCapabilities': [{ 'os': 'OS X', 'os_version': 'El Capitan', 'browserName': 'Chrome', 'browser_version': '52.0', 'resolution': '1280x960' },{ 'browserName': 'IE', 'browser_version': '11', 'os': 'Windows', 'os_version': '10' },{ 'browserName': 'Safari' },{ 'browserName': 'Firefox' },{ 'browserName': 'iPhone', 'platform': 'MAC', 'device': 'iPhone 5S' }] };
Заключение
Используя приведенные выше шаги, мы можем запускать тесты e2e для приложений AngularJS с помощью транспортира и структурировать их для запуска в нескольких браузерах, чтобы проверить совместимость и отзывчивость с помощью стека браузеров.
Добавить
Не стесняйтесь оставлять свои комментарии и предложения.
Дополнительная литература