ProtracУчебное пособие по тестированию Tor: фреймворк для автоматизации тестирования

⚠️ Уведомление об устаревании: Protracтор есть устаревший и заархивированныйПоддержка прекратилась в августе 2023 года, и Angular CLI отказался от своей версии Pro.tracTor Builder после Angular 15. Выберите Драматург, CypressWebdriverIO или TestCafe для новых пользователей. сквозное тестированиеПриведённое ниже пошаговое руководство относится к устаревшим версиям программного обеспечения.

Зачем нам нужен Pro?tracФреймворк Tor?

JavaСкрипты используются практически во всех веб-приложениях. По мере развития приложений, JavaСценарий Также увеличивается размер и сложность. В таком случае тестирование веб-приложения в различных сценариях становится сложной задачей для тестировщиков.

Иногда сложно захватить веб-элементы в приложениях AngularJS, используя JUnit or Selenium ВебДрайвер.

ProtracTor — это программа на Node.js, написанная на JavaСкрипт работает с Node для идентификации веб-элементов в приложениях AngularJS, а также использует WebDriver для управления браузером с помощью действий пользователя.

Итак, что же такое приложение AngularJS?

AngularJS Веб-приложения — это приложения, использующие расширенный синтаксис HTML для выражения компонентов веб-приложения. Они в основном используются для динамических веб-приложений. В таких приложениях используется меньше кода, и они более гибкие по сравнению с обычными веб-приложениями. Следует отметить, что поддержка AngularJS 1.x прекратилась 31 декабря 2021 года, поэтому такие приложения сегодня являются устаревшими.

Почему мы не можем найти веб-элементы AngularJS с помощью Normal Selenium Вебдрайвер?

Приложения AngularJS имеют некоторые дополнительные HTML-атрибуты, такие как ng-repeater, ng-controller, ng-model и т. д., которые не включены в стандартную библиотеку. Selenium локаторы. Selenium не может идентифицировать эти веб-элементы, используя Selenium код. Итак, Про.tracтор на вершине Selenium может обрабатывать и контролировать эти атрибуты в веб-приложениях.

ProtracTor — это фреймворк для сквозного тестирования приложений на основе AngularJS. В то время как большинство фреймворков сосредоточены на проведении модульные тесты для приложений AngularJS, ProtracTor фокусируется на тестировании фактической функциональности приложения.

Прежде чем начать ProtracДля этого нам необходимо установить следующее:

1. Selenium: вы можете найти Selenium этапы установки в Selenium Руководство по установке WebDriver.
2. NPM (Node.js): Для установки Pro нам необходимо установить Node.js.tracИнструкции по установке можно найти в файле... Инструкция по загрузке и установке Node.js.

Protracустановка тор

Шаг 1) Откройте командную строку и введите “npm install -g protracтор» и нажмите Enter..

Приведенная выше команда загрузит необходимые файлы и установит Pro.tracTor в клиентской системе, как показано ниже.

Шаг 2) Проверьте установку и версию с помощью «профи»tracверсия Tor". В случае успеха будет показана версия, как на скриншоте ниже. Если нет, повторите шаг 1 еще раз.

(Шаги 3 и 4 не являются обязательными, но рекомендуются для лучшей практики)

Шаг 3) Обновите менеджер WebDriver. Менеджер WebDriver используется для запуска тестов веб-приложения Angular в определенном браузере. После ProtracПосле установки Tor необходимо обновить менеджер WebDriver до последней версии. Это можно сделать, выполнив следующую команду в командной строке.

webdriver-manager update

Файлы драйверов загружаются, как показано ниже.

Шаг 4) Запустите менеджер WebDriver. На этом шаге менеджер WebDriver будет работать в фоновом режиме и отслеживать любые тесты, запускаемые через Pro.tracтор.

После запуска теста WebDriver автоматически загрузит его в соответствующем браузере. Запустите менеджер с помощью приведенной ниже команды.

webdriver-manager start

Консоль отображает адрес прослушивания.

Теперь, если вы перейдете по следующей ссылке... URL (http://localhost:4444/wd/hub/static/resource/hub.htmlВ вашем браузере вы увидите, как менеджер WebDriver работает в фоновом режиме.

Пример тестирования приложения AngularJS с использованием Pro.tracтор

При запущенном диспетчере драйверов ProtracДля работы Tor требуются два файла: спецификация файлов и конфигурация .

1. Файл конфигурацииЭтот файл помогает профессионалам.tractor к месту размещения тестовых файлов (specs.js) и для взаимодействия с Selenium сервер (Selenium Адрес). Chrome — браузер по умолчанию для Pro.tracтор.
2. Файл спецификации: Этот файл содержит логику и локаторы для взаимодействия с приложением..

Шаг 1) Мы должны открыться https://angularjs.org и введите текст «GURU99» в текстовое поле «Введите имя здесь».

Шаг 2) На этом этапе

1. Введено имя «Guru99 "
2. В выходном тексте «Привет» GuruВидно 99″.

Шаг 3) Теперь нам нужно захватить текст с веб-страницы после ввода имени и сверить его с ожидаемым текстом..

Code:

Нам нужно подготовить файл конфигурации (конф.js) и файл спецификации (спец.js) как уже упоминалось выше.

Логика spec.js:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Code Пояснение к файлу spec.js:

1. описывать('Введите имя GURU99', function()Синтаксис describe взят из фреймворк JasmineЗдесь оператор “describe” ('Введите имя GURU99') обычно определяет компоненты приложения, которые могут представлять собой класс, функцию и т. д. В наборе кода, называемом “Введите GURU99”, это просто строка, а не код.
2. it(«следует добавить имя как GURU99», функция()
3. браузер.get('https://angularjs.org') Как и в Selenium Метод `webDriver browser.get` откроет новый экземпляр браузера с указанным содержимым. URL.
4. элемент(by.model('ВашеИмя')).отправить ключи('GURU99') Здесь мы находим веб-элемент, используя имя модели как «yourName», которое является значением «нг-модель«На веб-странице». См. скриншот ниже.

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Здесь мы находим веб-элемент, используя XPath и сохраните его значение в переменной «guru».
6. ожидать(гуру.getText()).в равной(«Привет, GURU99!») Наконец, мы проверяем текст, полученный с веб-страницы (используя gettext() ), с ожидаемым текстом.

Логика conf.js:

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

Code Пояснение к файлу conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'. В файле конфигурации указано Pro.tracдля местоположения Selenium Адрес для разговора Selenium ВебДрайвер.
2. specs: ['spec.js']Эта строка сообщает Protracдля указания расположения тестовых файлов spec.js

Исполнение Code

Сначала перейдите в папку, где находятся файлы conf.js и spec.js, а затем выполните следующие действия..

Шаг 1) Откройте командную строку.

Шаг 2) Установите Selenium Менеджер WebDriver запущен и работает. Для этого введите команду «webdriver-manager start» и нажмите Enter..

(Если Selenium WebDriver не запущен, мы не можем продолжить тестирование в режиме Pro.tracTor не может найти WebDriver для обработки веб-приложения.

Шаг 3) Откройте новую командную строку и введите команду как «профи»tractor conf.js” Для запуска конфигурационного файла. Запуск завершается, как показано ниже.

Объяснение:

• Здесь ПроtracTor выполнит конфигурационный файл, содержащий заданный файл спецификации.
• Мы можем увидеть Selenium сервер работает на «http://localhost:4444/wd/hub», который мы указали в файле conf.js.
• Кроме того, здесь можно увидеть результат, сколько пройдено и ошибок, как на скриншоте выше..

Удовлетворительный результат подтвержден. Далее рассмотрим неудовлетворительный результат.

Шаг 1) Ожидается, что при открытии файла spec.js отобразится сообщение «Hello change GURU99», как показано ниже.

После изменения в spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

Шаг 2) Сохраните файл spec.js и повторите описанные выше шаги «Выполнение». Code" раздел

Теперь выполните вышеуказанные шаги.

Результат:

Мы можем видеть результат как неудачный, обозначенный буквой «F» на скриншоте с указанием причины. «Ожидаемое «Привет, GURU99!» равным «Привет, смена GURU99!». Кроме того, он показывает, сколько ошибок было обнаружено при выполнении кода.

Можем ли мы добиться того же с Selenium Вебдрайвер?

Иногда элементы AngularJS можно найти с помощью XPath или CSS-селекторов. Selenium WebDriver. Однако эти элементы генерируются и переназначаются динамически, поэтому ProtracTor оказался более безопасным вариантом для тестирования AngularJS-пакетов.

Создавайте отчеты с помощью Jasmine Reporters

ProtracTor поддерживает репортеров Jasmine. В этом разделе используется JUnitXmlReporter позволяет автоматически генерировать отчеты о выполнении тестов в формате XML, следуя приведенным ниже шагам.

Установка Jasmine Reporter

Есть два варианта: локальный или глобальный.

1. Откройте командную строку, выполните следующую команду для локальной установки

npm install --save-dev jasmine-reporters@^2.0.0

Приведённая выше команда устанавливает jasmine-reporters локально, в ту директорию, где она запускается.

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

npm install –g jasmine-reporters@^2.0.0

Здесь репортеры размещены на месте..

Шаг 1) Выполните команду.

npm install --save-dev jasmine-reporters@^2.0.0

из командной строки, как показано ниже.

Шаг 2) Проверьте папки установки в каталоге. «Node_modules» должен быть доступен, если он успешно установлен, как показано на снимке ниже.

Шаг 3) Добавьте следующий цветной код в существующий файл conf.js.

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

Расшифровка кода:

В коде мы генерируем отчет «JUnitXmlReporter» и указать путь для хранения отчета.

Шаг 4) Откройте командную строку и выполните команду PROtractor conf.js.

Шаг 5) Когда вы выполните приведенный выше код, по указанному пути будет создан файл junitresults.xml.

Шаг 6) Откройте XML и проверьте результат. Сообщение об ошибке отображается в файле результатов как наше Тестовый кейс Тест не пройден. Тест не пройден, потому что ожидаемый результат из файла “spec.js” не совпадает с фактическим результатом веб-страницы.

Шаг 7) Используйте файл junitresult.xml для файлов доказательств или результатов.

ProtracTor против современных альтернатив автоматизации тестирования

Поскольку ПроtracTor больше не получает обновлений, поэтому командам, планирующим новые пакеты приложений, необходимо знать, как он соотносится с фреймворками, на которые теперь переходят проекты Angular. В таблице ниже приведено сравнение Pro.tracВыберите один из трех вариантов, которые чаще всего встречаются в разделе часто задаваемых вопросов ниже.

Команды, у которых уже есть профессиональный игрок.tracПакет программ Tor обычно быстрее всего распространяется на ВебдрайверИО, поскольку его стиль управления и Selenium-система управления водителями на основе данных о водителях, оставайтесь в курсе того, что предлагает Pro.tracТестировщики Tor уже знают. Команды, начинающие с нуля или нуждающиеся в максимально быстром запуске тестов, чаще выбирают именно этот вариант. Cypress или же стать драматургом.

Часто задаваемые вопросы (FAQ)