ПрофіtracПідручник з тестування Tor: Фреймворк інструментів автоматизації

⚠️ Повідомлення про припинення підтримки: Профіtracтор є застаріло та архівованоПідтримка закінчилася у серпні 2023 року, і Angular CLI відмовився від своєї Pro-версії.tracКонструктор Tor після Angular 15. Pick Драматург, Cypress, WebdriverIO або TestCafe для нових наскрізне тестуванняНаведена нижче покрокова інструкція залишається актуальною для застарілих пакетів.

Чому нам потрібен професіоналtracФреймворк Tor?

JavaСкрипти використовуються майже у всіх веб-застосунках. У міру зростання застосунків, JavaScript також збільшується в розмірі та складності. У такому випадку для тестувальників стає складним завданням тестувати вебзастосунок для різних сценаріїв.

Іноді важко захопити веб-елементи в програмах AngularJS за допомогою JUnit or Selenium WebDriver.

Профіtractor — це програма на Node.js, написана мовою JavaСценарій і запускається з Node для ідентифікації веб-елементів у програмах AngularJS, а також використовує WebDriver для керування браузером за допомогою дій користувача.

Отже, що ж таке AngularJS-додаток?

AngularJS Веб-додатки – це веб-додатки, які використовують розширений синтаксис HTML для вираження компонентів веб-додатків. Він використовується переважно для динамічних веб-додатків. Ці додатки використовують менше коду та є гнучкішим порівняно зі звичайними веб-додатками. Зверніть увагу, що AngularJS 1.x припинив довгострокову підтримку 31 грудня 2021 року, тому такі додатки сьогодні є застарілими.

Чому ми не можемо знайти веб-елементи AngularJS за допомогою Normal Selenium WebDriver?

AngularJS-додатки мають деякі додаткові HTML-атрибути, такі як ng-repeater, ng-controller, ng-model тощо, які не включені до Selenium локатори. Selenium не може ідентифікувати ці веб-елементи за допомогою Selenium код. Отже, Protracтор на вершині Selenium може обробляти та контролювати ці атрибути у вебзастосунках.

Профіtractor — це фреймворк для комплексного тестування застосунків на базі AngularJS. Хоча більшість фреймворків зосереджені на проведенні одиничні тести для AngularJS-застосунків, ProtracTor зосереджується на тестуванні фактичної функціональності програми.

Перш ніж ми почнемо Protractor, нам потрібно встановити наступне:

1. Selenium: ви можете знайти Selenium кроки встановлення в Selenium Посібник з встановлення WebDriver.
2. NPM (Node.js): Нам потрібно встановити Node.js для встановлення Protracтор. Ви можете знайти ці кроки встановлення в Посібник із завантаження та встановлення Node.js.

ПрофіtracВстановлення Tor

Крок 1) Відкрийте командний рядок і введіть «npm install -g pro»tracтор" і натисніть Enter.

Вищевказана команда завантажить необхідні файли та встановить Protractor на клієнтській системі, як показано нижче.

Крок 2) Перевірте встановлення та версію за допомогою «професіонал»tractor –версія». У разі успіху відобразиться версія, як на знімку екрана нижче. Якщо ні, виконайте крок 1 ще раз.

(Кроки 3 і 4 необов’язкові, але рекомендовані для кращої практики)

Крок 3) Оновіть менеджер WebDriver. Менеджер WebDriver використовується для запуску тестів у веб-застосунку Angular у певному браузері. Після ProtracПісля встановлення Tor потрібно оновити менеджер WebDriver до останньої версії. Це можна зробити, виконавши таку команду в командному рядку.

webdriver-manager update

Бінарні файли драйвера завантажуються, як показано нижче.

Крок 4) Запустіть менеджер WebDriver. Цей крок запустить менеджер WebDriver у фоновому режимі та прослуховуватиме будь-які тести, що виконуються через Pro.tracтор.

Після запуску тесту WebDriver автоматично завантажує його у відповідний браузер. Запустіть менеджер за допомогою команди нижче.

webdriver-manager start

Консоль повідомляє адресу прослуховування.

Тепер, якщо ви перейдете до наступного URL (http://localhost:4444/wd/hub/static/resource/hub.html) у вашому браузері ви фактично побачите менеджер WebDriver, що працює у фоновому режимі.

Приклад тестування AngularJS-застосунку за допомогою Protracтор

З запущеним менеджером драйверів, ProtracДля роботи Tor потрібні два файли, a spec файл і конфігурація файлу.

1. Файл конфігураціїЦей файл допомагає професіоналамtractor туди, де розміщені тестові файли (specs.js) та для спілкування з Selenium сервер (Selenium Адреса). Chrome – це браузер за замовчуванням для Protracтор.
2. Специфікаційний файл: Цей файл містить логіку та локатори для взаємодії з програмою.

Крок 1) Ми повинні відкрити https://angularjs.org і введіть текст як «GURU99» у текстовому полі «Введіть тут ім’я».

Крок 2) На цьому етапі

1. Введено ім'я «Guru99 "
2. У вихідному тексті «Привіт» GuruВидно 99 дюймів.

Крок 3) Тепер ми маємо захопити текст із веб-сторінки після введення назви та перевірити його очікуваним текстом.

Code:

Нам потрібно підготувати файл конфігурації (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!');
  });
});

Code Пояснення spec.js:

1. описувати('Введіть ім'я GURU99', function() Синтаксис опису взято з Жасминний каркасТут «describe» («Введіть ім'я GURU99») зазвичай визначає компоненти програми, які можуть бути класом, функцією тощо. У наборі коду під назвою «Введіть GURU99» це просто рядок, а не код.
2. it('має додати назву як GURU99', функція()
3. browser.get('https://angularjs.org')Як у Selenium WebDriver browser.get відкриє новий екземпляр браузера із зазначеним URL.
4. елемент(by.model('yourName')).sendKeys('GURU99') Тут ми знаходимо веб-елемент, використовуючи назву моделі як «yourName», що є значенням «ng-модель«на веб-сторінці. Перегляньте знімок екрана нижче-»

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Тут ми знаходимо веб-елемент за допомогою XPath і зберегти його значення в змінній «guru».
6. очікувати(guru.getText()).toEqual('Привіт GURU99!') Нарешті ми перевіряємо текст, який ми отримали з веб-сторінки (за допомогою gettext()) з очікуваним текстом.

Логіка conf.js:

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

Code Пояснення conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Файл конфігурації повідомляє Protracдля місця розташування Selenium Адреса для спілкування Selenium WebDriver.
2. specs: ['spec.js']Цей рядок повідомляє Protracдля розташування тестових файлів spec.js

Виконання Code

Спочатку перейдіть до папки, де розміщені файли conf.js та spec.js, а потім виконайте наведені нижче дії..

Крок 1) Відкрийте командний рядок.

Крок 2) Переконатися Selenium Менеджер WebDriver запущено. Для цього введіть команду «webdriver-manager start» і натисніть Enter..

(Якщо Selenium WebDriver не працює, ми не можемо продовжити тестування в Pro-версії.trac(tor не може знайти веб-драйвер для обробки веб-застосунку)

Крок 3) Відкрийте новий командний рядок і введіть команду як «професіонал»tractor conf.js” щоб запустити файл конфігурації. Виконання завершується, як показано нижче.

Пояснення:

• Тут ПроtracTor виконає файл конфігурації з заданим файлом специфікацій.
• Ми можемо бачити Selenium сервер працює за адресою «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 та повторіть вищезазначені кроки з розділу «Виконання Code”Розділ

Тепер виконайте наведені вище дії.

Результат:

Ми бачимо результат як невдалий, позначений «F» на знімку екрана з причиною як «Очікується «Привіт, GURU99!» дорівнює "Привіт зміна GURU99!". Також, він показує, скільки помилок трапляється під час виконання коду.

Чи можемо ми досягти того ж із Selenium WebDriver?

Іноді елементи AngularJS можна знайти за допомогою селекторів XPath або CSS з Selenium WebDriver. Однак ці елементи генеруються та відновлюються динамічно, тому ProtracTor був безпечнішим варіантом для пакетів AngularJS.

Створюйте звіти за допомогою Jasmine Reporters

ПрофіtracTor підтримує репортерів Жасмін. У цьому розділі використовується JUnitXmlReporter для автоматичної генерації звітів про виконання тестів у форматі XML, виконавши наведені нижче кроки.

Встановлення Jasmine Reporter

Є два варіанти: локальний або глобальний

1. Відкрийте командний рядок, виконайте таку команду, щоб інсталювати локально

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

Наведена вище команда встановлює jasmine-reporters локально, всередині каталогу, де він запущений.

2. Відкрийте командний рядок, виконайте наступну команду для глобальної інсталяції

npm install –g jasmine-reporters@^2.0.0

Тут репортери встановлені локально.

Крок 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) Відкрийте командний рядок і виконайте команду дляtractor conf.js.

Крок 5) Коли ви виконуєте наведений вище код, junitresults.xml буде згенеровано у згаданому шляху.

Крок 6) Відкрийте XML і перевірте результат. Повідомлення про помилку відображається у файлі результатів як our Тестовий випадок не вдалося. Тестовий випадок не вдалося виконати, оскільки очікуваний результат із «spec.js» не збігається з фактичним результатом із веб-сторінки.

Крок 7) Використовуйте файл junitresult.xml для доказів або файлів результатів.

ПрофіtracАльтернативи tor проти сучасної автоматизації тестування

З моменту професіоналізмуtracОскільки Tor більше не отримує оновлень, командам, які планують нові пакети, потрібно знати, як він порівнюється з фреймворками, на які зараз мігрують проекти Angular. У таблиці нижче порівнюється Pro.tracтор із трьома альтернативами, які найчастіше зустрічаються в розділі поширених запитань нижче.

Команди з існуючим професіоналомtracпакети Tor зазвичай найшвидше переміщуються до WebdriverIO, оскільки його стиль командування та Seleniumуправління драйверами на основі залишається близьким до того, що ProtracТестери Tor вже знають. Команди, які починають спочатку або потребують найшвидших тестових запусків, частіше обирають Cypress або ж драматург.

Поширені запитання