Що таке тестування транспортиром?
PROTRACTOR - це інструмент автоматизації та наскрізного поведінкового тестування, який відіграє важливу роль у тестуванні додатків AngularJS і працює як інтегратор рішень, що поєднує в собі потужні технології, такі як селен, жасмин, веб-драйвер тощо. полягає не тільки в тестуванні додатків AngularJS, а й у написанні автоматизованих регресійних тестів для звичайних веб-додатків.
У цьому підручнику для початківців ви дізнаєтесь-
- Навіщо нам рамка транспортира?
- Встановлення транспортира
- Зразок тестування програми AngularJS за допомогою транспортира
- Виконання Кодексу
- Створюйте звіти за допомогою репортерів жасмину
Навіщо нам рамка транспортира?
JavaScript використовується майже у всіх веб-додатках. У міру зростання додатків JavaScript також збільшується в розмірах і складності. У такому випадку для тестувальників стає складним завданням перевірити веб-програму на різні сценарії.
Іноді важко захопити веб-елементи в програмах AngularJS за допомогою JUnit або Selenium WebDriver.
Protractor - це програма NodeJS, яка написана на JavaScript і працює з Node для ідентифікації веб-елементів у програмах AngularJS, а також використовує WebDriver для управління браузером за допомогою дій користувача.
Добре, тепер давайте обговоримо, що саме являє собою додаток AngularJS?
Додатки AngularJS - це веб-програми, які використовують розширений синтаксис HTML для вираження компонентів веб-додатків. В основному він використовується для динамічних веб-додатків. Ці програми використовують менш гнучкий код у порівнянні зі звичайними веб-програмами.
Чому ми не можемо знайти веб-елементи Angular JS за допомогою веб-драйвера Normal Selenium Web?
Кутові програми JS мають деякі додаткові атрибути HTML, такі як ng-ретранслятор, ng-контролер, ng-модель ... тощо, які не включені в локатори Selenium. Selenium не може ідентифікувати ці веб-елементи за допомогою коду Selenium. Отже, Protractor у верхній частині Selenium може обробляти та контролювати ці атрибути у веб-програмах.
Транспортир - це наскрізна система тестування для програм на базі Angular JS. Хоча більшість фреймворків зосереджені на проведенні модульних тестів для додатків Angular JS, Protractor фокусується на тестуванні фактичної функціональності програми.
Перш ніж запустити 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) Оновіть диспетчер веб-драйверів. Менеджер веб-драйверів використовується для запуску тестів проти кутової веб-програми в певному браузері. Після встановлення Protractor менеджер веб-драйверів потрібно оновити до останньої версії. Це можна зробити, запустивши наступну команду в командному рядку.
webdriver-manager update
Крок 4) Запустіть менеджер веб-драйверів. Цей крок запустить менеджер веб-драйверів у фоновому режимі та прослухає всі тести, які запускаються за допомогою транспортира.
Після використання Protractor для запуску будь-якого тесту веб-драйвер автоматично завантажує та запускає тест у відповідному браузері. Щоб запустити менеджер веб-драйверів, слід виконати таку команду з командного рядка.
webdriver-manager start
Тепер, якщо ви перейдете за такою URL-адресою ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) у своєму браузері, ви фактично побачите менеджер веб-драйверів, який працює у фоновому режимі.
Зразок тестування програми AngularJS за допомогою транспортира
Для запуску транспортира потрібно два файли, файл специфікації та файл конфігурації .
- Файл конфігурації : Цей файл допомагає транспортиру до місця розміщення тестових файлів (specs.js) та спілкування із сервером Selenium (адреса Selenium). Chrome є браузером за замовчуванням для Protractor.
- Файл специфікацій: Цей файл містить логіку та локатори для взаємодії з додатком .
Крок 1) Ми маємо увійти в систему https://angularjs.org і ввести текст як "GURU99" у текстовому полі "Введіть тут ім'я".
Крок 2) На цьому кроці
- Введено ім'я "Guru99"
- У вихідному тексті видно "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 Name', функція ()
Синтаксис, що описується, наведено у рамках Jasmine. Тут "description" ("Enter GURU99 Name") зазвичай визначає компоненти програми, які можуть бути класом або функцією тощо. У наборі кодів, що називається "Enter 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.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'
Файл конфігурації повідомляє транспортеру розташування адреси Selenium для спілкування із Selenium WebDriver.
- специфікації: ['spec.js']
Цей рядок повідомляє Protractor розташування тестових файлів spec.js
Виконання Кодексу
Ось перше, ми змінимо шлях до каталогу або перейдіть до папки , в якій confi.js і spec.js розміщені в нашій системі .
Виконайте наступний крок.
Крок 1) Відкрийте командний рядок.
Крок 2) Переконайтеся, що менеджер веб-драйверів селену запущений і працює. Для цього дайте команду як "webdriver-manager start" і натисніть Enter .
(Якщо веб-драйвер селену не запущений, ми не можемо продовжити тест, оскільки Protractor не може знайти веб-драйвер для обробки веб-програми)
Крок 3) Відкрийте новий командний рядок і надайте команду як "транспортир conf.js" для запуску файлу конфігурації.
Пояснення:
- Тут Protractor виконає файл конфігурації із заданим файлом специфікацій.
- Ми можемо побачити сервер селену, що працює на " http: // localhost: 4444 / wd / hub ", який ми вказали у файлі conf.js.
- Крім того, тут можна побачити результат, скільки передано та помилок, як на скріншоті вище .
Прекрасно, ми перевірили результат, коли його прийняли або як очікували. А тепер давайте розглянемо також результат невдачі.
Крок 1) Відкрийте та змініть, як очікується, spec.js на "'Привіт, змініть 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.
Створюйте звіти за допомогою репортерів жасмину
Транспортер підтримує репортерів Жасмін для створення звітів про тести. У цьому розділі ми будемо використовувати JunitXMLReporter для автоматичного створення звітів про тестування у форматі XML.
Виконайте наведені нижче дії, щоб створити звіти у форматі XML.
Встановлення Jasmine Reporter
Існує два способи зробити це, локально чи глобально
- Відкрийте командний рядок, виконайте таку команду, щоб встановити локально
npm install --save-dev jasmine-reporters@^2.0.0
Наведена вище команда встановить жасминові звіти node-modules локально, тобто з каталогу, де ми запускаємо команду в командному рядку.
- Відкрийте командний рядок, виконайте наступну команду для глобальної інсталяції
npm install -g jasmine-reporters@^2.0.0
У цьому підручнику ми встановимо репортерів жасмину локально .
Крок 1) Виконайте команду.
npm install --save-dev jasmine-reporters@^2.0.0
з командного рядка, як показано нижче.
Крок 2) Перевірте папки встановлення в каталозі . "Модулі_вузлів" повинні бути доступними, якщо його вдало встановити, як на знімку нижче.
Крок 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 для доказів або файлів результатів.
Короткий зміст:
Хоча селен може зробити щось із того, що робить транспортир, транспортир є промисловим стандартом та найкращою практикою для тестування програм AngularJS. Транспортер також може управляти кількома можливостями в ньому та обробляти динамічні зміни веб-елементів, використовуючи ng-модель, ng-клацання ... тощо (чого селен робити не може).
Ця стаття представлена Ранджитом Кумаром Енішетті