Что такое тестирование транспортиром?
PROTRACTOR - это инструмент автоматизации и сквозного тестирования на основе поведения, который играет важную роль в тестировании приложений AngularJS и работает как интегратор решений, объединяя мощные технологии, такие как Selenium, Jasmine, Web-драйвер и т. Д. Цель тестирования Protractor предназначен не только для тестирования приложений AngularJS, но и для написания автоматических регрессионных тестов для обычных веб-приложений.
В этом руководстве для начинающих вы узнаете:
- Зачем нам нужен транспортир?
- Установка транспортира
- Пример тестирования приложения AngularJS с использованием Protractor
- Исполнение Кодекса
- Создавайте отчеты с помощью Jasmine Reporters
Зачем нам нужен транспортир?
JavaScript используется практически во всех веб-приложениях. По мере роста приложений JavaScript также увеличивается в размерах и сложности. В таком случае для тестировщиков становится сложной задачей протестировать веб-приложение для различных сценариев.
Иногда сложно захватить веб-элементы в приложениях AngularJS с помощью JUnit или Selenium WebDriver.
Protractor - это программа NodeJS, которая написана на JavaScript и работает с Node для идентификации веб-элементов в приложениях AngularJS, а также использует WebDriver для управления браузером с помощью действий пользователя.
Хорошо, теперь давайте обсудим, что такое приложение AngularJS?
Приложения AngularJS - это веб-приложения, которые используют расширенный синтаксис HTML для выражения компонентов веб-приложений. Он в основном используется для динамических веб-приложений. Эти приложения используют меньший и гибкий код по сравнению с обычными веб-приложениями.
Почему мы не можем найти веб-элементы Angular JS с помощью обычного веб-драйвера Selenium?
Приложения Angular JS имеют некоторые дополнительные атрибуты HTML, такие как ng-Repeater, ng-controller, ng-model… и т. Д., Которые не включены в локаторы Selenium. Selenium не может идентифицировать эти веб-элементы с помощью кода Selenium. Итак, Protractor в верхней части Selenium может обрабатывать и контролировать эти атрибуты в веб-приложениях.
Транспортир - это комплексный фреймворк для тестирования приложений на основе Angular JS. В то время как большинство фреймворков сосредоточены на проведении модульных тестов для приложений Angular JS, Protractor фокусируется на тестировании фактической функциональности приложения.
Прежде чем мы запустим транспортир, нам нужно установить следующее:
- Селен
Вы можете найти шаги по установке Selenium по следующим ссылкам (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Установка NodeJS, нам нужно установить NodeJS для установки Protractor. Вы можете найти эти шаги по установке по следующей ссылке. (https://www.guru99.com/download-install-node-js.html)
Установка транспортира
Шаг 1) Откройте командную строку, введите «npm install -g protractor» и нажмите Enter .
Приведенная выше команда загрузит необходимые файлы и установит Protractor в клиентской системе.
Шаг 2) Проверьте установку и версию с помощью « Транспортир - версия » . В случае успеха он покажет версию, как на скриншоте ниже. Если нет, повторите шаг 1 еще раз.
(Шаги 3 и 4 необязательны, но рекомендуются для лучшей практики)
Шаг 3) Обновите веб-менеджер драйверов. Диспетчер веб-драйверов используется для запуска тестов с веб-приложением angular в конкретном браузере. После установки Protractor необходимо обновить диспетчер веб-драйверов до последней версии. Это можно сделать, выполнив следующую команду в командной строке.
webdriver-manager update
Шаг 4) Запустите диспетчер веб-драйверов. Этот шаг запустит диспетчер веб-драйверов в фоновом режиме и будет прослушивать все тесты, выполняемые через транспортир.
После использования Protractor для запуска любого теста веб-драйвер автоматически загрузит и запустит тест в соответствующем браузере. Чтобы запустить диспетчер веб-драйверов, необходимо выполнить следующую команду из командной строки.
webdriver-manager start
Теперь, если вы перейдете по следующему URL-адресу ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) в своем браузере, вы действительно увидите, что диспетчер веб-драйверов работает в фоновом режиме.
Пример тестирования приложения AngularJS с использованием Protractor
Для запуска Protractor требуется два файла: файл спецификации и файл конфигурации .
- Файл конфигурации : этот файл помогает транспортиру добраться до места размещения тестовых файлов (specs.js) и взаимодействовать с сервером Selenium (адрес Selenium). Chrome является браузером по умолчанию для Protractor.
- Файл спецификации: этот файл содержит логику и указатели для взаимодействия с приложением .
Шаг 1) Нам нужно войти на https://angularjs.org и ввести текст как «GURU99» в текстовое поле «Введите имя здесь».
Шаг 2) На этом шаге
- Ввели имя "Гуру99"
- В выводе отображается текст «Hello Guru99».
Шаг 3) Теперь мы должны захватить текст с веб-страницы после ввода имени и сверить его с ожидаемым текстом .
Код:
Мы должны подготовить файл конфигурации (conf.js) и файл спецификации (spec.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!');});});
Код Описание spec.js:
- описать ('Введите имя GURU99', функция ()
Синтаксис описания взят из фреймворка Jasmine. Здесь «описать» («Введите имя GURU99») обычно определяют компоненты приложения, которые могут быть классом или функцией и т. Д. В наборе кода, называемом «Введите GURU99», это просто строка, а не код.
- it ('следует добавить Имя как GURU99', function ()
- browser.get ('https://angularjs.org')
Как и в Selenium Webdriver browser.get откроет новый экземпляр браузера с указанным URL.
- элемент (by.model ('yourName')). sendKeys ('GURU99')
Здесь мы находим веб-элемент, использующий имя модели как «yourName», что является значением «ng-model» на веб-странице. Посмотрите снимок экрана ниже -
- var guru = element (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Здесь мы находим веб-элемент с помощью XPath и сохраняем его значение в переменной «guru» .
- ожидать (guru.getText ()). toEqual ('Привет, GURU99!')
Наконец, мы проверяем текст, который мы получили с веб-страницы (используя gettext ()), с ожидаемым текстом.
Логика conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Код Описание conf.js
- seleniumAddress: 'http: // localhost: 4444 / wd / hub'
Файл конфигурации сообщает Protractor расположение Selenium Address для взаимодействия с Selenium WebDriver.
- спецификации: ['spec.js']
Эта строка сообщает Protractor расположение тестовых файлов spec.js.
Исполнение Кодекса
Здесь сначала мы изменим путь к каталогу или перейдем к папке, в которой файлы confi.js и spec.js размещены в нашей системе .
Следуйте следующему шагу.
Шаг 1) Откройте командную строку.
Шаг 2) Убедитесь, что диспетчер веб-драйверов Selenium запущен и работает. Для этого введите команду «запуск webdriver-manager» и нажмите Enter .
(Если веб-драйвер selenium не запущен и не работает, мы не можем продолжить тест, поскольку Protractor не может найти веб-драйвер для обработки веб-приложения)
Шаг 3) Откройте новую командную строку и введите команду «protractor conf.js» для запуска файла конфигурации.
Объяснение:
- Здесь Protractor выполнит файл конфигурации с заданным файлом спецификации в нем.
- Мы видим, что селен-сервер работает по адресу « 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 и повторите шаги, описанные выше в разделе «Выполнение кода».
Теперь выполните вышеуказанные шаги.
Результат:
Мы видим, что результат неудачный, обозначенный буквой F на скриншоте с причиной как «Ожидается 'Hello GURU99!' равным «Hello, change GURU99!» , а также показывает, сколько сбоев происходит при выполнении кода.
Можем ли мы добиться того же с помощью веб-драйвера Selenium?
Иногда мы можем идентифицировать веб-элементы приложений AngularJS с помощью селектора XPath или CSS из веб-драйвера Selenium. Но в приложениях AngularJS элементы будут генерироваться и изменяться динамически. Так что Protractor - лучшая практика для работы с приложениями AngularJS.
Создавайте отчеты с помощью Jasmine Reporters
Protractor поддерживает репортеров Jasmine для создания отчетов об испытаниях. В этом разделе мы будем использовать JunitXMLReporter для автоматического создания отчетов о выполнении тестов в формате XML.
Выполните следующие действия, чтобы создать отчеты в формате XML.
Установка Jasmine Reporter
Это можно сделать двумя способами: локально или глобально.
- Откройте командную строку, выполните следующую команду для локальной установки
npm install --save-dev jasmine-reporters@^2.0.0
Вышеупомянутая команда установит узлы-модули отчетов jasmine локально из каталога, в котором мы запускаем команду в командной строке.
- Откройте командную строку, выполните следующую команду для глобальной установки
npm install -g jasmine-reporters@^2.0.0
В этом руководстве мы установим репортеры jasmine локально .
Шаг 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 для файлов свидетельств или результатов.
Резюме:
Хотя Selenium может делать некоторые из вещей, которые делает транспортир, транспортир является промышленным стандартом и лучшей практикой для тестирования приложений AngularJS. Protractor также может управлять множеством возможностей в нем и обрабатывать динамические изменения веб-элементов с помощью ng-model, ng-click… и т.д. (чего не может селен).
Эта статья предоставлена Ранджитом Кумаром Энишетти