ProtracTutorial de testare tor: Cadrul de instrumente de automatizare

⚠️ Notificare de depreciere: Protractor este depreciat și arhivatSuportul s-a încheiat în august 2023, iar Angular CLI a renunțat la versiunea Pro.tracconstructor de tor după Angular 15. Alege Dramaturg, Cypress, WebdriverIO sau TestCafe pentru noi testarea end-to-endGhidul de mai jos rămâne valabil pentru apartamentele vechi.

De ce avem nevoie de profesioniștitracCadrul Tor?

JavaScriptul este utilizat în aproape toate aplicațiile web. Pe măsură ce aplicațiile cresc, JavaScenariu crește, de asemenea, în dimensiune și complexitate. În astfel de cazuri, devine o sarcină dificilă pentru testeri să testeze aplicația web pentru diverse scenarii.

Uneori este dificil să capturați elementele web în aplicațiile AngularJS folosind JUnit or Selenium WebDriver.

Protractor este un program Node.js scris în JavaScript și rulează cu Node pentru a identifica elementele web în aplicațiile AngularJS și, de asemenea, folosește WebDriver pentru a controla browserul cu acțiunile utilizatorului.

Deci, ce este mai exact o aplicație AngularJS?

AngularJS Aplicațiile sunt aplicații web care utilizează sintaxa extinsă a HTML-ului pentru a exprima componentele aplicațiilor web. Acestea sunt utilizate în principal pentru aplicații web dinamice. Aceste aplicații utilizează cod mai puțin și mai flexibil în comparație cu aplicațiile web normale. Rețineți că AngularJS 1.x a încetat suportul pe termen lung la 31 decembrie 2021, deci astfel de aplicații sunt astăzi moștenite.

De ce nu putem găsi elemente web AngularJS folosind Normal Selenium WebDriver?

Aplicațiile AngularJS au câteva atribute HTML suplimentare, cum ar fi ng-repeater, ng-controller, ng-model.., etc., care nu sunt incluse în Selenium localizatori. Selenium nu este capabil să identifice acele elemente web folosind Selenium cod. Deci, Protractor deasupra Selenium poate gestiona și controla aceste atribute în aplicațiile web.

Protractor este un framework de testare complet pentru aplicații bazate pe AngularJS. În timp ce majoritatea framework-urilor se concentrează pe efectuarea teste unitare pentru aplicații AngularJS, Protractor se concentrează pe testarea funcționalității reale a unei aplicații.

Înainte de a începe Protractor, trebuie să instalăm următoarele:

1. Selenium: puteți găsi Selenium pașii de instalare în Selenium Ghid de instalare WebDriver.
2. NPM (Node.js): Trebuie să instalăm Node.js pentru a instala Protractor. Puteți găsi acești pași de instalare în Ghid de descărcare și instalare Node.js.

ProtracInstalare tor

Pas 1) Deschideți promptul de comandă și tastați „npm install -g pro”tractor” și apăsați Enter.

Comanda de mai sus va descărca fișierele necesare și va instala Protractor pe sistemul client, așa cum se arată mai jos.

Pas 2) Verificați instalarea și versiunea folosind "protracversiunea tor. " Dacă reușește, va afișa versiunea ca în captura de ecran de mai jos. Dacă nu, efectuați din nou pasul 1.

(Pașii 3 și 4 sunt opționali, dar recomandați pentru o mai bună practică)

Pas 3) Actualizați managerul WebDriver. Managerul WebDriver este utilizat pentru rularea testelor pe aplicația web Angular într-un anumit browser. După Protractor este instalat, managerul WebDriver trebuie actualizat la cea mai recentă versiune. Acest lucru se poate face rulând următoarea comandă în promptul de comandă.

webdriver-manager update

Fișierele binare ale driverului se descarcă așa cum se arată mai jos.

Pas 4) Porniți managerul WebDriver. Acest pas va rula managerul WebDriver în fundal și va asculta orice teste care rulează prin intermediul programului pro.tracthor.

După rularea unui test, WebDriver îl încarcă automat în browserul relevant. Porniți managerul cu comanda de mai jos.

webdriver-manager start

Consola raportează adresa de ascultare.

Acum, dacă mergeți la următoarele URL (http://localhost:4444/wd/hub/static/resource/hub.html) în browser, veți vedea managerul WebDriver rulând în fundal.

Testarea unui exemplu de aplicație AngularJS folosind ProtracTdR

Cu managerul de șoferi pornit, ProtracTor are nevoie de două fișiere pentru a rula, a spec. fișier și configuraţie fișier.

1. Fișier de configurareAcest fișier ajută profesioniștiitractor către locul unde sunt plasate fișierele de test (specs.js) și pentru a comunica cu Selenium Server (Selenium Adresă). Chrome este browserul implicit pentru Protracthor.
2. Fișier cu specificații: Acest fișier conține logica și localizatorii pentru a interacționa cu aplicația.

Pas 1) Trebuie să deschidem https://angularjs.org și introduceți textul ca „GURU99” în caseta de text „Introduceți un nume aici”.

Pas 2) În această etapă,

1. A introdus numele „Guru99 "
2. În textul de ieșire „Bună ziua” GuruSe vede 99″.

Pas 3) Acum trebuie să captăm textul de pe pagina web după introducerea numelui și trebuie să verificăm cu textul așteptat.

Code:

Trebuie să pregătim fișierul de configurare (conf.js) și fișierul cu specificații (spec.js) așa cum sa menționat mai sus.

Logica 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 Explicație despre spec.js:

1. descrie('Introduceți numele GURU99', function() Sintaxa descrierii este din Cadrul JasmineAici, „describe” („Enter GURU99 Name”) definește de obicei componentele unei aplicații, care pot fi o clasă sau o funcție etc. În suita de cod numită „Enter GURU99”, este vorba doar de un șir de caractere și nu de un cod.
2. it('ar trebui să adauge un nume ca GURU99', function()
3. browser.get("https://angularjs.org") Ca în Selenium Fișierul WebDriver browser.get va deschide o nouă instanță de browser cu mențiunea URL.
4. element(după.model('numele tău')).trimite cheile('GURU99') Aici găsim elementul web folosind numele Modelului ca „yourName”, care este valoarea lui „ng-model„pe pagina web. Verificați captura de ecran de mai jos-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Aici găsim elementul web folosind XPath și stocați valoarea într-o variabilă „guru”.
6. aștepta(guru.getText()).la egal('Bună ziua GURU99!') În cele din urmă verificăm textul pe care l-am primit de pe pagina web (folosind gettext() ) cu textul așteptat.

Logica conf.js:

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

Code Explicație despre conf.js

1. seleniumAddress: „http://localhost:4444/wd/hub”Fișierul de configurare îi spune lui Protraclocația Selenium Adresă cu care să vorbim Selenium WebDriver.
2. specificații: ['spec.js']Această linie îi spune lui Protraclocația fișierelor de test spec.js

Executarea Code

Mai întâi, navigați la folderul în care sunt plasate conf.js și spec.js, apoi urmați pașii de mai jos.

Pas 1) Deschideți promptul de comandă.

Pas 2) Asigurați-vă că Selenium Managerul WebDriver este pornit și funcționează. Pentru aceasta, dați comanda „webdriver-manager start” și apăsați Enter..

(Dacă Selenium WebDriver nu este pornit și nu putem continua testul ca Pro.tractor nu poate găsi WebDriver-ul pentru a gestiona aplicația web)

Pas 3) Deschideți o nouă linie de comandă și dați comanda ca "protrac„tor conf.js” pentru a rula fișierul de configurare. Execuția se termină așa cum se arată mai jos.

Explicaţie:

• Aici ProtracTor va executa fișierul de configurare care conține fișierul de specificații dat.
• Putem vedea Selenium server care rulează la „http://localhost:4444/wd/hub” pe care l-am dat în fișierul conf.js.
• De asemenea, aici puteți vedea rezultatul câte sunt trecute și eșecuri, ca în captura de ecran de mai sus.

Un rezultat de trecere a fost acum verificat. În continuare, analizați un rezultat de nereușită.

Pas 1) Deschiderea și modificarea așteptate vor duce la spec.js la „'Hello change GURU99”, ca mai jos.

După modificarea 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!');
  });
});

Pas 2) Salvați fișierul spec.js și repetați pașii de mai sus de la „Executarea fișierului Code" secțiune

Acum, executați pașii de mai sus.

Rezultat:

Putem vedea rezultatul ca eșuat indicat cu „F” în captura de ecran cu motivul ca „Se aștepta „Bună ziua GURU99!” pentru a egala „Bună ziua, schimbă GURU99!”. De asemenea, arată câte erori se întâmpină la executarea codului.

Putem realiza același lucru cu Selenium WebDriver?

Uneori, elementele AngularJS pot fi localizate cu selectori XPath sau CSS din Selenium WebDriver. Totuși, aceste elemente sunt generate și revin dinamic, așa că ProtracTor a fost opțiunea mai sigură pentru suitele AngularJS.

Generați rapoarte folosind Jasmine Reporters

Protractor susține reporterii Jasmine. Această secțiune folosește JUnitXmlReporter pentru a genera automat rapoarte de execuție a testelor în format XML, urmând pașii de mai jos.

Instalarea lui Jasmine Reporter

Există două opțiuni, locală sau globală

1. Deschideți promptul de comandă, executați următoarea comandă pentru a instala local

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

Comanda de mai sus instalează jasmine-reporters local, în directorul în care este executată.

2. Deschideți promptul de comandă, executați următoarea comandă pentru instalarea globală

npm install –g jasmine-reporters@^2.0.0

Aici, reporterii sunt instalați local.

Pas 1) Executați comanda.

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

din promptul de comandă ca mai jos.

Pas 2) Verificați folderele de instalare din director. „Node_modules” ar trebui să fie disponibil dacă este instalat cu succes, ca în instantaneul de mai jos.

Pas 3) Adăugați următorul cod colorat la un fișier conf.js existent

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)
          );
     }
   };

Explicația codului:

În cod, generăm raportul „JUnitXmlReporter” și dând Calea unde să stocați raportul.

Pas 4) Deschideți promptul de comandă și executați comanda pentrutractor conf.js.

Pas 5) Când executați codul de mai sus, junitresults.xml va fi generat în calea menționată.

Pas 6) Deschideți XML și verificați rezultatul. Mesajul de eșec este afișat în fișierul rezultat ca fiind nostru Caz de testare a eșuat. Cazul de testare a eșuat deoarece rezultatul așteptat de la „spec.js” nu se potrivește cu rezultatul real de la o pagină web.

Pas 7) Utilizați fișierul junitresult.xml pentru dovezi sau fișiere cu rezultate.

ProtracAlternative la automatizarea testelor tor vs. moderne

De când Protractor nu mai primește actualizări, echipele care planifică noi suite trebuie să știe cum se compară cu framework-urile către care migrează acum proiectele Angular. Tabelul de mai jos compară Protractor cu cele trei alternative care apar cel mai des în Întrebările frecvente de mai jos.

Echipe cu un profesionist existenttracsuita Tor se mișcă, în general, cel mai rapid către WebdriverIO, deoarece stilul său de comandă și Seleniumgestionarea driverelor bazată pe - rămâne aproape de ceea ce face Protractesterii de tori știu deja. Echipele care încep de la zero sau care au nevoie de cele mai rapide rulări de teste aleg mai des Cypress sau Dramaturg în schimb.

Întrebări frecvente