Учебное пособие по тестированию транспортира: платформа инструментов автоматизации

Что такое тестирование транспортира?

Транспортир — это инструмент автоматизации и комплексного тестирования на основе поведения, который играет важную роль в Тестирование приложений 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, нам необходимо установить следующее:

  1. SeleniumВы можете найти Selenium Шаги установки по следующим ссылкам (https://www.guru99.com/installing-selenium-webdriver.html )
  2. Установка 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 нужны два файла: спецификация файлов и конфигурация .

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

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

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

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

  1. Ввел имя «Guru99»
  2. В выходном тексте виден «Hello Guru99».

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

Шаг 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:

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

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

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

Логика conf.js:

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

Объяснение кода conf.js

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

Исполнение Кодекса

Сначала мы изменим путь к каталогу или перейдем к папке, в которой в нашей системе расположены файлы conf.js и spec.js..

Выполните следующий шаг.

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

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

Выполнение приложения AngularJS

(Если веб-драйвер селена не запущен и не работает, мы не можем продолжить тестирование, поскольку Protractor не может найти веб-драйвер для работы с веб-приложением)

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

Выполнение приложения AngularJS

Объяснение:

  • Здесь 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 и повторите шаги, описанные выше в разделе «Выполнение кода».

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

Результат:

Выполнение приложения AngularJS

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

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

Иногда мы можем идентифицировать веб-элементы приложений AngularJS, используя селектор XPath или CSS из Selenium веб-драйвер. Но в приложениях AngularJS элементы будут генерироваться и изменяться динамически. Таким образом, Protractor — лучшая практика для работы с приложениями AngularJS.

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

Protractor поддерживает репортеры Jasmine для создания отчетов об испытаниях. В этом разделе мы будем использовать JunitXMLReporter для автоматического создания отчетов о выполнении тестов в формате XML.

Выполните следующие шаги, чтобы создавать отчеты в формате XML.

Установка Jasmine Reporter

Это можно сделать двумя способами: локально или глобально.

  1. Откройте командную строку, выполните следующую команду для локальной установки
npm install --save-dev jasmine-reporters@^2.0.0

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

  1. Откройте командную строку, выполните следующую команду для глобальной установки.
npm install –g jasmine-reporters@^2.0.0

В этом уроке мы установим репортеры Jasmine локально..

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

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

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

Установка Jasmine Reporter

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

Установка Jasmine Reporter

Шаг 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.

Установка Jasmine Reporter

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

Установка Jasmine Reporter

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

Установка Jasmine Reporter

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

Итого

Хотя Selenium может делать некоторые вещи, которые делает транспортир, транспортир является промышленным стандартом и лучшей практикой для тестирования приложений AngularJS. Транспортир также может управлять несколькими возможностями и обрабатывать динамические изменения веб-элементов, используя нг-модель, ng-click.. и т. д. (чего селен не может сделать).