«Качество никогда не бывает случайным, оно всегда является результатом разумных усилий». . . Джон Раскин

Познакомьтесь с транспортиром

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, вам необходимо установить следующие зависимости:

  1. 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 с помощью транспортира и структурировать их для запуска в нескольких браузерах, чтобы проверить совместимость и отзывчивость с помощью стека браузеров.

Добавить

Не стесняйтесь оставлять свои комментарии и предложения.

Дополнительная литература

#AngularJS, #Транспортир