професионалистtracУрок за тестване на Tor: Рамка за инструменти за автоматизация

⚠️ Известие за оттегляне: професионалистtracТор е остаряло и архивираноПоддръжката приключи през август 2023 г. и Angular CLI премахна своя Pro.tractor builder след Angular 15. Pick драматург, Cypress, WebdriverIO или TestCafe за нови тестване от край до крайРъководството по-долу остава за стари пакети.

Защо ни е нужен професионалистtracTor Framework?

JavaСкриптовете се използват в почти всички уеб приложения. С разрастването на приложенията, JavaСценарий също се увеличава по размер и сложност. В такъв случай за тестерите се превръща в трудна задача да тестват уеб приложението за различни сценарии.

Понякога е трудно да се заснемат уеб елементите в 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 manager-а. Тази стъпка ще стартира WebDriver manager-а във фонов режим и ще прослушва всички тестове, които се изпълняват чрез pro.tracTor.

След като тестът се изпълни, WebDriver автоматично го зарежда в съответния браузър. Стартирайте мениджъра с командата по-долу.

webdriver-manager start

Конзолата докладва адреса за слушане.

Сега, ако преминете към следното URL (http://localhost:4444/wd/hub/static/resource/hub.html) във вашия браузър, всъщност ще видите мениджъра на WebDriver да работи във фонов режим.

Примерно тестване на AngularJS приложение с ProtracTor

С работещ мениджър на драйвери, ProtracTor се нуждае от два файла, за да работи, a спекулация файл и конфигурация файл.

1. файл за конфигуриранеТози файл помага на професионалиститеtractor до мястото, където са поставени тестовите файлове (specs.js) и с които да се общува Selenium сървър (Selenium Адрес). Chrome е браузърът по подразбиране за ProtracTor.
2. Спец файл: Този файл съдържа логиката и локаторите за взаимодействие с приложението.

Стъпка 1) Трябва да отворим https://angular.dev/ и въведете текста като „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://angular.dev/');
 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 е от Жасмин рамкаТук „describe“ („Enter GURU99 Name“) обикновено дефинира компоненти на приложение, които могат да бъдат клас или функция и т.н. В кодовия пакет, наречен „Enter GURU99“, това е просто низ, а не код.
2. it('трябва да добави име като GURU99', функция()
3. browser.get(‘https://angular.dev/’)As like in 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 и съхранява стойността му в променлива „гуру“.
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. спецификации: ['spec.js']Този ред казва на Protracза местоположението на тестовите файлове spec.js

Изпълнение на Code

Първо, отидете до папката, където са разположени conf.js и spec.js, след което следвайте стъпките по-долу.

Стъпка 1) Отворете командния ред.

Стъпка 2) Уверете се, Selenium Мениджърът на WebDriver е стартиран и работи. За целта дайте командата „webdriver-manager start“ и натиснете Enter..

(Ако Selenium WebDriver не работи, не можем да продължим с теста като Pro.trac(tor не може да намери WebDriver-а за обработка на уеб приложението)

Стъпка 3) Отворете нов команден ред и дайте командата като „професионалистtractor conf.js” за да стартирате конфигурационния файл. Изпълнението завършва, както е показано по-долу.

Обяснение:

• Here Protractor ще изпълни конфигурационния файл с дадения spec файл в него.
• Можем да видим 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://angular.dev/');
 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 за доказателства или файлове с резултати.

професионалистtractor срещу алтернативи на модерната автоматизация на тестването

От професионалистtracТъй като Tor вече не получава актуализации, екипите, които планират нови пакети, трябва да знаят как се представя спрямо фреймуърците, към които сега мигрират Angular проектите. Таблицата по-долу сравнява Pro...tracтор с трите алтернативи, които се появяват най-често в ЧЗВ по-долу.

Отбори с вече съществуващ професионалистtracTor Suite обикновено се движи най-бързо към WebdriverIO, тъй като неговият стил на командване и Seleniumуправление на драйвери, базирано на..., остава близо до това, което Pro...tracТестерите на Tor вече знаят. Екипите, които започват на чисто или се нуждаят от най-бързи тестове, по-често избират Cypress или вместо това драматург.

Въпроси и Отговори