atesting.ru Блог Учебник по тестированию транспортира — Сквозное тестирование приложений AngularJS

Учебник по тестированию транспортира — Сквозное тестирование приложений AngularJS

В этом руководстве по тестированию транспортира вы узнаете следующее

 Учебное пособие по тестированию транспортира & ndash; Сквозное тестирование приложений AngularJS

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

Protractor — это среда для сквозного тестирования приложений Angular и AngularJS. Он разработан разработчиками Google для поддержки приложений AngularJS. Он выпущен как фреймворк с открытым исходным кодом. Эта основанная на поведении среда тестирования предназначена не только для тестирования приложений AngularJS, но также и для приложений, не относящихся к AngularJS. Он сочетает в себе мощные технологии, такие как Selenium, WebDriver, Jasmine, Node.js и т. Д. Он запускает тесты для вашего приложения, запущенного в реальном браузере, взаимодействуя с ним, как пользователь. Это порт node.js для webdriver.io, который является реализацией JavaScript фреймворка Selenium. Это программа Node.js, которая поддерживает такие тестовые среды, как Jasmine, Mocha и Cucumber.

Она построена на основе WebDriverJS. Он поддерживает определенные функции angular, а также все функции, которые поддерживает Selenium WebDriver. Он поддерживает стратегии локатора, специфичные для Angular, что позволяет вам тестировать элементы, специфичные для Angular, без каких-либо усилий с вашей стороны.

Обязательно прочтите: вопросы собеседования с транспортиром

Особенности транспортира

  1. Он поддерживает как угловые, так и неугловые приложения — независимо от того, является ли ваше приложение угловым или неугловым, транспортир поддерживает его.
  2. Он поддерживает определенные угловые локаторы. Приложения angular поставляются со специфическими локаторами angular, такими как ng-modal, ng-repeat и т. Д. Нет смысла создавать сложный XPath для угловых локаторов при использовании Protractor. Protractor имеет расширенную поддержку угловых локаторов. Вы можете использовать by.model, by.repeater и т. Д. Для обработки этих специфичных для angular локаторов.
  3. Он поддерживает параллельное выполнение.
  4. Он поддерживает кросс-браузерное тестирование.
  5. < li> Он также поддерживает мобильные браузеры. Мы можем запустить тот же скрипт в мобильном браузере, не меняя код.

  6. Он поддерживает Headless browser.
  7. Он поддерживает платформы облачного тестирования, такие как crossbrowsertesting.com и SauceLabs.
  8. Он поддерживает инструменты CI/CD, такие как Jenkins, TFS и т. Д.,
  9. Он поддерживает разработку на основе поведения, такую ​​как Jasmine/Mocha
  10. Мы можем легко справиться с проблемой синхронизации в приложениях AngularJS.
  11. Protractor внутренне использует механизм потока управления и обеспечивает выполнение команд в том порядке, в котором они были получены. Несмотря на то, что большинство действий веб-драйвера являются асинхронными, нет необходимости беспокоиться об асинхронном поведении приложения.

Что такое Selenium?

Selenium — один из инструментов автоматизации тестирования, который является инструментом с открытым исходным кодом. Selenium автоматизирует веб-приложения. Вы можете ознакомиться с полным руководством по Selenium WebDriver здесь, а также пройти самые важные вопросы на собеседовании по Selenium

Разница между Селен и транспортир?

Селен:

  1. Selenium поддерживает такие языки, как Java, Python, Kotlin, C, C #, PHP.
  2. Selenium поддерживает такие фреймворки, как TestNg и Junit.
  3. Selenium с точки зрения производительности быстрее при работе с приложениями, отличными от Angular.
  4. Это программное обеспечение с открытым исходным кодом.
  5. Java и TestNG необходимы для работы с Selenium.
  6. Совместимо с Windows и Linux.
  7. Вы может автоматизировать как страницы Angular, так и страницы без Angular, но вам нужно решить проблемы с синхронизацией.
  8. Приложения Angular JS имеют некоторые дополнительные атрибуты HTML, такие как ng-Repeater, ng-controller, ng-model и т. Д., Которые не включены в локаторы Selenium. Таким образом, сложно захватить веб-элементы в приложениях AngularJS с помощью Selenium.

Protractor:

  1. Protractor поддерживает все js связанные языки, такие как Type Script и Java Script.
  2. Он поддерживает такие фреймворки, как Jasmine и Mocha.
  3. Транспортир с точки зрения производительности работает быстрее при работе с приложениями Angular.
  4. Это также программное обеспечение с открытым исходным кодом.
  5. JavaScript и Node.js необходимы для работы с Protractor.
  6. Совместимость с Windows и Linux.
  7. Это специально разработан для поддержки приложений AngularJs, но вы можете автоматизировать как Angular, так и не-Angular страницы.
  8. Protractor поддерживает стратегии локатора, специфичные для Angular. Таким образом, легко захватить веб-элементы в приложениях AngularJS с помощью Protractor.

Какую среду использовать?

Он поддерживает две среды тестирования, основанные на поведенческой разработке (BDD), такие как Jasmine & amp; Мокко.

Жасмин:

Жасмин — это среда тестирования с открытым исходным кодом для JavaScript. Он предназначен для работы на любой платформе с поддержкой JavaScript. Он не требует DOM и имеет чистый, очевидный синтаксис, поэтому мы можем легко писать тесты.

Jasmine

Mocha:

Mocha — это среда тестирования JavaScript для программ Node.js, включающая поддержку браузера, асинхронное тестирование, отчеты о покрытии тестов и использование любой библиотеки утверждений.

Mocha

< h2 id = "How-to-Set-Up-Protractor"> Как настроить транспортир (установка транспортира)

Давайте посмотрим, как установить транспортир. Чтобы установить Protractor, нам нужно выполнить следующие шаги.

  1. Установить Node.js
  2. Установить Protractor
  3. Обновить WebDriver Manager до последней версии

Чтобы успешно установить транспортир, ознакомьтесь с нашим пошаговым руководством по установке транспортира со скриншотами.

Создание тестового набора первого транспортира с использованием образца приложения AngularJS

Транспортеру необходимы следующие два файла для запуска

  • Файл конфигурации
  • Файл спецификации

Файл конфигурации

Файл конфигурации сообщает Protractor, как настроить Selenium Server, какие тесты запускать, как настроить браузеры и какую среду тестирования использовать. Файл конфигурации также может включать одну или несколько глобальных настроек. В файле конфигурации представлены объяснения всех параметров конфигурации транспортира. Настройки по умолчанию включают автономный Selenium Server, браузер Chrome и тестовую среду Jasmine. Если какая-либо конфигурация не определена в файлах конфигурации, будут использоваться значения по умолчанию.

Файл спецификации

Файл спецификации — это тот, где мы пишем настоящий тестовый код. Он содержит логику и указатели для взаимодействия с приложением.

Откройте https://angularjs.org и передайте текст как « Материалы для тестирования программного обеспечения »в текстовом поле« Введите имя ».

Учебное пособие по тестированию транспортира & ndash ; Сквозное тестирование приложений AngularJS »/> </p>
</p>
<p>Он показывает выходной текст как «<em> <strong> Hello Software Testing Material </strong> </em>« </p>
<p><p> <img class =

Давайте рассмотрим пример тестового примера, который переходит по определенному URL-адресу и проверяет заголовок его страницы. Для этого мы должны выполнить следующие шаги

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

Создайте файл конфигурации (conf.js) и файл спецификации (spec.js)

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

12345678910 //Spec.jsdescribe('Protractor Demo Application & # 39 ;, function () {it (& # 39; для проверки заголовка страницы & # 39 ;, function () {browser.ignoreSynchronization = true; browser.get ( & # 39; https: //www.softwaretestingmaterial.com/'); browser.driver.getTitle () .then (function (pageTitle) {expect (pageTitle) .toEqual (& # 39; Материалы для тестирования программного обеспечения & # 39;);});});});

Пояснение кода для spec.js:

описать ('Демонстрационное приложение транспортира', функция ()

описать синтаксис взят из платформы Jasmine. «Описать» («Демонстрационное приложение транспортира») определяет компоненты приложения, которые могут быть классом, функцией и т. Д., А « Демонстрационное приложение транспортира »- это строка.

it синтаксис взят из платформы Jasmine. it может содержать некоторые тестовые сценарии/шаги и т. д. В зависимости от ваших требований вы можете добавить несколько it-блоков в свою программу.

browser.ignoreSynchronization = true;

SoftwareTestingMaterial.com — это неугловой веб-сайт. Поэтому мы устанавливаем для ignoreSynchronizationtag значение true.

browser.get ('https: //www.softwaretestingmaterial. com/');

browser — это глобал, созданный Protractor, который используется для команд уровня браузера например browser.ignoreSynchronization , browser.get .

expect (pageTitle) .toEqual ('Материал для тестирования программного обеспечения');

' expect ' — это утверждение, в котором мы проверяем текст, полученный с веб-страницы (pageTitle) с ожидаемым текстом (Материалы для тестирования программного обеспечения)

Теперь создайте файл конфигурации.

Скопируйте в conf.js следующую строку:

123456789 //conf.jsexports.config = {framework: & # 39; jasmine & # 39;, seleniumAddress: & # 39; http: //localhost: 4444/wd/hub & # 39;, возможности: {browserName: & # 39; chrome & # 39;,}, спецификации: [& # 39; spec.js & # 39;]};

Пояснение кода для conf. js:

Эта конфигурация сообщает Protractor основные детали, например, где находятся ваши тестовые файлы (спецификации) и где разговаривать с вашим Selenium Server (seleniumAddress).

framework: 'jasmine',

Он указывает, что мы используем тестовую структуру 'Jasmine'.

Конфигурация браузера задается в разделе возможности . Мы также можем указать другие браузеры, такие как firefox.

Chrome является браузером по умолчанию и использует значения по умолчанию для всех остальных конфигураций.

specs: ['spec. js ']

Приведенный выше код сообщает транспортиру местоположение тестовых файлов. Путь к файлу спецификации указан в разделе «спецификации»

Выполнение кода

Убедитесь, что диспетчер веб-драйверов Selenium запущен и работает. Откройте командную строку и выполните команду как « webdriver-manager start »

Теперь запустите тест с помощью « protractor conf .js »в новом окне командной строки

Protractor выполнит файл конфигурации с заданным файлом спецификации в нем.

Вы можете заметить, что сервер Selenium работает по адресу « http: //localhost: 4444/wd/hub », который мы указали в conf.js файл. Вы должны увидеть открытое окно браузера Chrome и перейти на веб-сайт SoftwareTestingMaterial.com .

Результат теста должен быть 1 спецификацией, 0 сбой.

Давайте посмотрим на пример тестового примера, который выполняется на веб-странице AngularJS. Итак, давайте изменим файл spec.js

123456789101112 //spec.jsdescribe (& # 39; Демонстрационное приложение Protractor & # 39 ;, function () {it (& # 39; должно умножать два целых числа & # 39 ;, function () {browser.get (& # 39; http://juliemr.github.io/protractor-demo/'); element (by.model (& # 39; first & # 39;)). sendKeys (2); element (by.model (& # 39; second & # 39;)). SendKeys (7); element (by.model (& # 39; operator & # 39;)). Click (); element (by.xpath (& # 34; .//option [@ value = & # 39; MULTIPLICATION & # 39;] & # 34;)). Click (); element (by.id (& # 39; gobutton & # 39;)). Click (); expect (element (by.binding (& # 39; latest & # 39;)). GetText ()). ToEqual (& # 39; 21 & # 39;); //Неправильное ожидание //expect(element(by.binding('latest') ) .getText ()). toEqual (& # 39; 14 & # 39;); //Правильное ожидание});});

С помощью приведенный выше код, вы можете увидеть, на что именно способен транспортир. В приведенном выше spec.js

нет кода синхронизации браузера, запустите этот файл так же, как и раньше.

транспортир. conf.js

Откроется веб-страница, содержащая калькулятор.

Здесь мы использовали элемент globals и by, которые также создаются Protractor. Функция element используется для поиска HTML-элементов на веб-странице.

sendKeys () предназначена для передачи значений в текстовые поля.

click () используется для нажатия кнопки

getText () для возврата содержимого элемента

Здесь, в приведенном выше коде, мы использовали элементы Angular, такие как by.model, который находит элементы angular.

element () описывает, как найти элемент. Требуется один параметр.

by () — объект, который создает локаторы.

В приведенном выше коде мы использовали три типа локаторов.

  1. by.model ('first') — найти элемент с ng-model = «first». Если вы проверите источник страницы калькулятора, вы можете найти следующие
    & lt; input type = ”text” ng-model = ”first” & gt;
  2. by.id ('gobutton') — найти элемент с заданным id. Это находит & lt; button id = ”gobutton” & gt ;.
  3. by.binding ('latest') — нужно найти связанный элемент к переменной latest. Будет найден диапазон, содержащий {{latest}}

Подробнее о локаторах и ElementFinders.

Вы должны увидеть открытое окно браузера Chrome и перейти к Калькулятору, затем закройте себя. Вы можете увидеть результат: сколько пройдено, а сколько не удалось.

Вы можете видеть, что он передает два числа и ожидает отображения результата. Поскольку результат равен 21, а не 14, наш тест не проходит.

Результатом теста должно быть 1 спецификация, 1 сбой.

Исправьте тест и попробуйте запустить его снова. Если вы передадите значение 14, то вы увидите, что результат теста выставлен как 1 спецификация, 0 сбоев

Заключение:

Мы можем использовать Selenium для работы с приложениями AngularJS, идентифицируя веб-элементы с помощью селектора XPath или CSS. Веб-элементы в приложениях AngularJS будут генерироваться и изменяться динамически. Чтобы преодолеть эту ситуацию, лучше использовать Protractor для работы с приложениями AngularJS, чтобы упростить вашу жизнь, а также рекомендуется тестировать приложения AngularJS.

Создание отчетов с помощью Protractor Beautiful Report:

Мы можем создавать HTML-отчеты транспортира. Мы опубликовали подробный пост Protractor Beautiful Reports, в котором рассматриваются отчеты в формате HTML, снимки экрана и изображения. Журналы.

Известные проблемы с установкой транспортира:

Если вы столкнулись с такими ошибками, как «Необработанная ошибка» или «Транспортир» Автономный Selenium завершился с кодом 1 ”при установке транспортира в глобальном режиме, затем попробуйте следующие решения.

Решение 1. Откройте командную строку и запустите

webdriver-manager clean

Код выше предназначен для очистки всех загруженных двоичных файлов

webdriver-manager обновить

Выше строки — переустановка двоичных файлов.

Решение 2:

Установите webdriver вручную.

Загрузите Selenium jar вручную и вставьте .jar в следующую папку:

C: Users User_Name AppData Roaming npm node_modules protractor selenium

Необходимо прочитать:

  • Вопросы на собеседовании с транспортиром
  • Транспортир Beautiful Reporter
  • Установка транспортира Gu ide

TAG: qa