Учебное пособие по тестированию транспортира: платформа инструментов автоматизации
Что такое тестирование транспортира?
Транспортир — это инструмент автоматизации и комплексного тестирования на основе поведения, который играет важную роль в Тестирование приложений AngularJS и работает интегратором решений, сочетающим мощные технологии, такие как Selenium, Jasmine, веб-драйвер и т. д. Целью тестирования Protractor является не только тестирование приложений AngularJS, но и написание автоматических регрессионных тестов для обычных веб-приложений.
Зачем нам нужен транспортир?
JavaСкрипт используется практически во всех веб-приложениях. По мере роста приложений, JavaСценарий также увеличивается в размере и сложности. В таком случае для тестировщиков становится сложной задачей тестирование веб-приложения для различных сценариев.
Иногда сложно захватить веб-элементы в приложениях AngularJS, используя JUnit or Selenium ВебДрайвер.
Protractor — это программа NodeJS, написанная на JavaСкрипт работает с Node для идентификации веб-элементов в приложениях AngularJS, а также использует WebDriver для управления браузером с помощью действий пользователя.
Хорошо, хорошо, теперь давайте обсудим, что такое AngularJS-приложение?
Приложения AngularJS — это веб-приложения, которые используют расширенный синтаксис HTML для выражения компонентов веб-приложения. В основном он используется для динамических веб-приложений. Эти приложения используют меньше и более гибкого кода по сравнению с обычными веб-приложениями.
Почему мы не можем найти веб-элементы Angular JS, используя Normal Selenium Веб-драйвер?
Приложения Angular JS имеют некоторые дополнительные атрибуты HTML, такие как ng-repeater, ng-controller, ng-model... и т. д., которые не включены в Selenium локаторы. Selenium не может идентифицировать эти веб-элементы, используя Selenium код. Итак, транспортир на вершине Selenium может обрабатывать и контролировать эти атрибуты в веб-приложениях.
Транспортир — это комплексная среда тестирования для приложений на основе Angular JS. В то время как большинство фреймворков ориентированы на проведение модульных тестов для приложений Angular JS, Protractor фокусируется на тестировании фактической функциональности приложения.
Прежде чем запустить Protractor, нам необходимо установить следующее:
- SeleniumВы можете найти Selenium Шаги установки по следующим ссылкам (https://www.guru99.com/installing-selenium-webdriver.html )
- Установка NPM (Node.js)NodeJS. Для установки Protractor нам необходимо установить NodeJS. Вы можете найти шаги установки по следующей ссылке. ( https://www.guru99.com/download-install-node-js.html )
Установка транспортира
Шаг 1) Откройте командную строку и введите «npm install –g транспортир» и нажмите 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) На этом этапе
- Ввел имя «Guru99»
- В выходном тексте виден «Hello Guru99».
Шаг 3) Теперь нам нужно захватить текст с веб-страницы после ввода имени и сверить его с ожидаемым текстом..
Код:
Нам нужно подготовить файл конфигурации (конф.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!'); }); });
Объяснение кода spec.js:
- описывать(«Введите имя GURU99», функция(). Синтаксис описания взят из платформы Jasmine. Здесь «описание» («Введите имя GURU99») обычно определяет компоненты приложения, которые могут быть классом или функцией и т. д. В наборе кода называется «Введите GURU99», это просто строка, а не код.
- it(«следует добавить имя как GURU99», функция()
- браузер.get('https://angularjs.org') Как и в Selenium Webdriver Browser.get откроет новый экземпляр браузера с указанным URL-адресом.
- элемент(by.model('ВашеИмя')).отправить ключи(«GURU99») Здесь мы находим веб-элемент, используя имя модели в качестве «ваше имя», которое является значением «ng-model» на веб-странице. Проверьте снимок экрана ниже:
- var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Здесь мы находим веб-элемент, используя XPath и сохраните его значение в переменной «guru».
- ожидать(гуру.getText()).в равной(«Привет, 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 Адрес для разговора Selenium ВебДрайвер.
- specs: ['spec.js']Эта строка сообщает Protractor расположение тестовых файлов spec.js.
Исполнение Кодекса
Сначала мы изменим путь к каталогу или перейдем к папке, в которой в нашей системе расположены файлы conf.js и spec.js..
Выполните следующий шаг.
Шаг 1) Откройте командную строку.
Шаг 2) Убедитесь, что менеджер веб-драйверов Selenium запущен и работает. Для этого введите команду «webdriver-manager start» и нажмите Enter..
(Если веб-драйвер селена не запущен и не работает, мы не можем продолжить тестирование, поскольку Protractor не может найти веб-драйвер для работы с веб-приложением)
Шаг 3) Откройте новую командную строку и введите команду как «транспортир 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» на скриншоте с указанием причины. «Ожидаемое «Привет, GURU99!» равным «Привет, смена 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) Откройте командную строку и выполните команду транспортир conf.js.
Шаг 5) Когда вы выполните приведенный выше код, по указанному пути будет создан файл junitresults.xml.
Шаг 6) Откройте XML и проверьте результат. Сообщение об ошибке отображается в файле результатов как наше Тестовый кейс провален. Тестовый пример не пройден, поскольку ожидаемый результат «spec.js» не соответствует фактическому результату с веб-страницы.
Шаг 7) Используйте файл junitresult.xml для файлов доказательств или результатов.
Итого
Хотя Selenium может делать некоторые вещи, которые делает транспортир, транспортир является промышленным стандартом и лучшей практикой для тестирования приложений AngularJS. Транспортир также может управлять несколькими возможностями и обрабатывать динамические изменения веб-элементов, используя нг-модель, ng-click.. и т. д. (чего селен не может сделать).