Официальный адрес сайта：http://www.protractortest.org/

1. Подготовьте среду

protractor — это программа Node.js. Чтобы запустить protractor, вам сначала понадобится среда Node. Вам также следует проверить версию Node, она должна быть выше v0.10.0.

node --version

Node поставляется с инструментом управления пакетами npm, а Protractor можно загрузить и установить через npm.

По умолчанию транспортир использовать Jasmine в качестве среды тестирования. Содержимое ниже будет использоваться Jasmine руководить, Jasmine Текущая версия 2.3, мы будем использовать эту версию.

Мы также будемиспользоватьместныйизнезависимый Selenium сервер для управления браузером, необходимо установить Java Development Kit (JDK) Чтобы запустить его, проверьте, выполнив следующую команду java Правильно ли он установлен?

java -version

2. Установите транспортир

использовать NPM Выполните глобальную установку.

npm install -g protractor

это будет Установитьдва инструмента：protractor и webdriver-manager, Сначала запусти его protractor –version Подтвердил, что работает нормально.

webdriver-manager используется, чтобы помочь нам получить Selenium Server, однако вы можете столкнуться с сетевыми ошибками.

webdriver-manager update

Результат моей казни вот такой.

PS C:\study\demo> webdriver-manager update
Updating selenium standalone
downloading https://selenium-release.storage.proxy.ustclug.org/2.45/selenium-server-standalone-2.45.0.jar...
Updating chromedriver
downloading https://chromedriver.storage.proxy.ustclug.org/2.15/chromedriver_win32.zip...
Error: Got error Error: connect ETIMEDOUT 74.125.23.128:443 from https://selenium-release.storage.proxy.ustclug.org/2.45/selenium-server-standalone-2.45.0.jar
Error: Got error Error: connect ETIMEDOUT 74.125.23.128:443 from https://chromedriver.storage.proxy.ustclug.org/2.15/chrome
driver_win32.zip

Как видите, на самом деле вам нужно скачать два файла: selenium-server-standalone-2.45.0.jar. и chromedriver_win32.zip , эти два файла selenium Выделенный сервер и chrome драйва.

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

http://npm.taobao.org/mirrors/selenium/

https://npm.taobao.org/mirrors/chromedriver/2.2/

Найдите свой первым webdriver-manager файл, он должен быть в C:\Users\your_account\AppData\Roaming\npm\node_modules\protractor\bin , найди 34 ОК, измени его на Таобао selenium адрес.

    cdn: 'http://npm.taobao.org/mirrors/selenium/',
    // cdn: 'https://selenium-release.storage.proxy.ustclug.org/',

Снова найдите строку 46 и измените ее на

    cdn: 'https://npm.taobao.org/mirrors/chromedriver/',
    // cdn: 'https://chromedriver.storage.proxy.ustclug.org/',

Для загрузки выполните обновление веб-драйвера-менеджера еще раз.

После скачивания куда сохранить? Запустите webdriver-manager напрямую, и вы увидите следующий результат.

PS C:\study\demo> webdriver-manager
Usage: webdriver-manager <command>
Commands:
  update: install or update selected binaries
  start: start up the selenium server
  status: list the current available drivers

Options:
  --out_dir        Location to output/expect                         [default: "C:\\Users\\xxx\\AppData\\Roaming\\npm\\node_modules\\protractor\\selenium"]
  --seleniumPort   Optional port for the selenium standalone server
  --ignore_ssl     Ignore SSL certificates                           [default: false]
  --proxy          Proxy to use for the install or update command
  --alternate_cdn  Alternate CDN to the binaries
  --standalone     Install or update selenium standalone             [default: true]
  --chrome         Install or update chromedriver                    [default: true]
  --ie             Install or update IEDriver                        [default: false]

Please specify one command

Здесь указан адрес сохранения по умолчанию.

После успешной загрузки запустите сервер и проверьте его.

webdriver-manager start

Это запустит сервер Selenium, и на консоль будут выведены некоторые сообщения журнала.

PS C:\study\demo> webdriver-manager start seleniumProcess.pid: 4856 15:16:07.179 INFO - Launching a standalone server Setting system property webdriver.chrome.driver to C:\Users\Whao\AppData\Roaming\npm\node_modules\protractor\selenium\chromedriver.exe 15:16:07.238 INFO - Java: Oracle Corporation 23.6-b04 15:16:07.238 INFO - OS: Windows 7 6.1 amd64 15:16:07.245 INFO - v2.45.0, with Core v2.45.0. Built from revision 5017cb8 15:16:07.317 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub 15:16:07.318 INFO - Version Jetty/5.1.x 15:16:07.318 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver] 15:16:07.319 INFO - Started HttpContext[/selenium-server,/selenium-server] 15:16:07.319 INFO - Started HttpContext[/,/] 15:16:07.364 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@601edf33 15:16:07.364 INFO - Started HttpContext[/wd,/wd] 15:16:07.367 INFO - Started SocketListener on 0.0.0.0:4444 15:16:07.367 INFO - Started org.openqa.jetty.jetty.Server@792bf755

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

http://localhost:4444/wd/hub

3. Дрель

Step 0 write a test

Оставьте вышеуказанное окно командной строки открытым, снова откройте другое окно командной строки и создайте чистую папку для тестирования.

Для запуска тестов Protractor требуется два файла: файл спецификации теста и файл конфигурации.

Начнем с примера AngularJS Приложение начинается с написания простого теста, weuse находится в http://juliemr.github.io/protractor-demo/ приложение суперкалькулятор, тест проверит страницу title Соответствует ли он нашим ожиданиям?

Скопируйте следующий код в файл spec.js.

// spec.js describe('Protractor Demo App', function() { it('should have a title', function() { browser.get('http://juliemr.github.io/protractor-demo/'); expect(browser.getTitle()).toEqual('Super Calculator'); }); });

describe и it да Jasmine Формат синтаксиса тестовой среды. браузер дапроходить protractor Глобальные переменные созданы. Он используется для командного управления в масштабе браузера, например, через browser.get Навигация.

Теперь мы создаем файл конфигурации и копируем код в conf.js.

// conf.js exports.config = { framework: 'jasmine2', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] }

Файл конфигурации описывает, где найти файл спецификации теста. (specs ),Selenium Адрес сервера (seleniumAddress), Также объяснил, что мы будем использовать Jasmine Версия 2 в качестве среды тестирования. Другие конфигурации здесь: используйте конфигурацию по умолчанию, Chrome. да По умолчанию из браузера.

Теперь выполните тест.

protractor conf.js

Вы должны увидеть один автоматически открытый chrome браузер, а затем перейдите по адресу приложения Супер Калькулятор, после чего браузер автоматически закроется (Это должно быть очень быстро )。тестиз Выходные данные должныда

Поздравляем, мы провели наш первый тест транспортира.

Setp 1 – interacting with elements

На этот раз мы модифицируем тест для взаимодействия с элементами на странице, изменив spec.js на следующее содержимое.

// spec.js describe('Protractor Demo App', function() { it('should add one and two', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(1); element(by.model('second')).sendKeys(2); element(by.id('gobutton')).click(); expect(element(by.binding('latest')).getText()). toEqual('5'); // This is wrong!  }); });

Здесь мы используем глобальный из element функцияи by объекты, они тоже да protractor Созданная функция, элемент Функция, используемая для позиционирования на странице HTML элемент, функция возвращает ElementFinder объект. Вы можете использовать объект для взаимодействия с элементами страницы или получения информации. существования В этом тесте мы используем sendKeys существовать input Введите содержимое в элемент, нажмите Функция для имитации нажатия кнопки, getText Получите содержимое элемента.

element Требуется один параметр — параметр селектора, описывающий, как найти элемент. Объект, используемый для создания селекторов,здесьнасиспользоватьтри типаизселектор。

• by.model(‘first’) проходить ng-model=’first’ для позиционирования элемента. Если вы просмотрите Calculator Страница исходного кода, вы увидите <input type=text ng-model="first">.
• by.id(‘gobutton’) проходитьобозначениеиз id для позиционирования элементов, таких как <button id=”gobutton”> .
• by.binding(‘latest’) Привязка позиционирования из переменной последние, такие как здесь из { {latest}}

Выполните этот тест.

protractor conf.js

Вы должны увидеть два числа, введенные на странице.,Подождите, пока появятся результаты. потому что результатыда 3, не да 5. Наш тест не пройден. Исправьте тест и запустите его заново.

Step 2 – writeing multiple scenarios

Мы объединили два теста и модифицировали spec.js следующим образом:

// spec.js describe('Protractor Demo App', function() { var firstNumber = element(by.model('first')); var secondNumber = element(by.model('second')); var goButton = element(by.id('gobutton')); var latestResult = element(by.binding('latest')); beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); it('should have a title', function() { expect(browser.getTitle()).toEqual('Super Calculator'); }); it('should add one and two', function() { firstNumber.sendKeys(1); secondNumber.sendKeys(2); goButton.click(); expect(latestResult.getText()).toEqual('3'); }); it('should add four and six', function() { // Fill this in. expect(latestResult.getText()).toEqual('10'); }); });

Здесь мы переместили навигацию на beforeEach в, эта функция будет существовать каждые it выполняется перед блоком. Мы также ставим ElementFinder Сохраните переменные для совместного использования.

Step 3 – changing the configuration

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

// conf.js exports.config = { framework: 'jasmine2', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'], capabilities: { browserName: 'firefox' } }

Запустите тест еще раз, и вы увидите, что тест работает в существующем состоянии. firefox в без дапервоначально из chrome。capabilities описание объектатестиспользоватьиз Браузер。Различные параметры конфигурации,Видеть：the reference config file.

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

// conf.js exports.config = { framework: 'jasmine2', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'], multiCapabilities: [{ browserName: 'firefox' }, { browserName: 'chrome' }] }

Запустите повторно, и вы увидите, что тест работает в браузере Chrome и Firefox.

Step 4 – lists of elements

Вернемся к тесту и настроим файл конфигурации только на один браузер.

Иногда нам нужно обработать набор элементов ,Можетиспользовать element.all, он вернет ElementArrayFinder。существовать Calculator , любая операция протоколируется существует log середина.этотдаиспользовать ng-repeat Сгенерированная таблица реализована.

Сначала мы выполняем ряд операций, а затем проверяем их на предмет появления журнала В истории изменения spec.js далее.

// spec.js describe('Protractor Demo App', function() { var firstNumber = element(by.model('first')); var secondNumber = element(by.model('second')); var goButton = element(by.id('gobutton')); var latestResult = element(by.binding('latest')); var history = element.all(by.repeater('result in memory')); function add(a, b) { firstNumber.sendKeys(a); secondNumber.sendKeys(b); goButton.click(); } beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); it('should have a history', function() { add(1, 2); add(3, 4); expect(history.count()).toEqual(2); add(5, 6); expect(history.count()).toEqual(0); // This is wrong!  }); });

Мы сделали много вещей. Во-первых,мы создали. helper функция добавлять. Есть еще одна переменная история. мы проходим by.repeater использовать element.all получить ElementArrayFinder。существоватьнасизтестсередина,насиспользовать count Метод подтверждения ожидаемой длины. Измените тест так, чтобы второй тест прошел успешно.

Кроме count За пределами ElementArrayFinder Также предусмотрено множество методов, давайте воспользуемся last чтобы получить последний элемент ElementFinder , измените тест.

it('should have a history', function() { add(1, 2); add(3, 4); expect(history.last().getText()).toContain('1 + 2'); expect(history.first().getText()).toContain('foo'); // This is wrong! });

потому что Calculator существует Последний отчет самый ранний по результату, самый ранний по расчетам (1 + 2) появитсясуществоватьнаконец。насиспользовать Jasmine из toContain утверждение для проверки “1 + 2” , элемент текстового содержимого также содержит метку времени и результат расчета.

Исправьте этот тест, чтобы правильно ожидать, что существование будет содержать «3 + 4» в первой записи истории.

ElementArrayFinder Также предусмотрены методы each, map, filter и reduce Подождите симуляции JavaScript метод массива, см.: Read the API for more details.

4. Ссылки

Исходный адрес：http://www.protractortest.org/#/tutorial

Перепечатано по адресу: https://www.cnblogs.com/haogj/p/4815673.html.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета.,Мнения, выраженные в данной статье, принадлежат исключительно автору. Этот сайт предоставляет только услуги по хранению информации.,нет собственности,Никакая соответствующая юридическая ответственность не предполагается. Если на этом сайте есть какое-либо подозрение на нарушение авторских прав/незаконный контент,, Пожалуйста, отправьте электронное письмо на Сообщите, после проверки этот сайт будет немедленно удален.

Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/200827.html Исходная ссылка: https://javaforall.cn