Ce este Testarea Protractorului?
PROTRACTOR este un instrument de testare a comportamentului de automatizare și end-to-end care joacă un rol important în testarea aplicațiilor AngularJS și funcționează ca un integrator de soluții care combină tehnologii puternice precum Seleniu, iasomie, driver Web, etc. Scopul Testării Protractorului nu este doar pentru a testa aplicații AngularJS, ci și pentru a scrie teste de regresie automată și pentru aplicații Web normale.
În acest tutorial pentru începători, veți învăța-
- De ce avem nevoie de cadru pentru transportoare?
- Instalarea transportorului
- Exemplu de testare a aplicației AngularJS utilizând Protractor
- Executarea Codului
- Generați rapoarte folosind Jasmine Reporters
De ce avem nevoie de cadru pentru transportoare?
JavaScript este utilizat în aproape toate aplicațiile web. Pe măsură ce aplicațiile cresc, JavaScript crește, de asemenea, ca dimensiune și complexitate. În acest caz, devine o sarcină dificilă pentru testeri să testeze aplicația web pentru diferite scenarii.
Uneori este dificil să captați elementele web în aplicațiile AngularJS folosind JUnit sau Selenium WebDriver.
Protractor este un program NodeJS care este scris în JavaScript și rulează cu Node pentru a identifica elementele web din aplicațiile AngularJS și, de asemenea, folosește WebDriver pentru a controla browserul cu acțiunile utilizatorului.
Ok, bine, acum să discutăm ce este mai exact o aplicație AngularJS?
Aplicațiile AngularJS sunt aplicații web care utilizează sintaxa HTML extinsă pentru a exprima componentele aplicației web. Este utilizat în principal pentru aplicații web dinamice. Aceste aplicații utilizează cod mai puțin și flexibil în comparație cu aplicațiile Web normale.
De ce nu putem găsi elemente web Angular JS folosind driverul Web Selenium normal?
Aplicațiile JS unghiulare au unele atribute HTML suplimentare, cum ar fi ng-repetor, ng-controller, ng-model ... etc., care nu sunt incluse în localizatorii Selenium. Selenium nu este capabil să identifice acele elemente web folosind codul Selenium. Deci, Protractor din partea superioară a seleniului poate gestiona și controla aceste atribute în aplicațiile web.
Protractor este un cadru de testare cap la cap pentru aplicațiile bazate pe Angular JS. În timp ce majoritatea cadrelor se concentrează pe efectuarea testelor unitare pentru aplicațiile Angular JS, Protractor se concentrează pe testarea funcționalității reale a unei aplicații.
Înainte de a începe Protractor, trebuie să instalăm următoarele:
- Seleniu
Puteți găsi pașii de instalare Selenium în următoarele link-uri, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Instalare NodeJS, trebuie să instalăm NodeJS pentru a instala Protractor. Puteți găsi acești pași de instalare în următorul link. (https://www.guru99.com/download-install-node-js.html)
Instalarea transportorului
Pasul 1) Deschideți promptul de comandă și tastați „npm install -g protractor” și apăsați Enter .
Comanda de mai sus va descărca fișierele necesare și va instala Protractor pe sistemul client.
Pasul 2) Verificați instalarea și versiunea folosind „ Protractor --version ”. Dacă are succes, va afișa versiunea ca în imaginea 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ă)
Pasul 3) Actualizați managerul de driver Web. Managerul de driver web este utilizat pentru a rula testele împotriva aplicației web unghiulare într-un browser specific. După instalarea Protractor, managerul de driver web trebuie actualizat la cea mai recentă versiune. Acest lucru se poate face executând următoarea comandă în promptul de comandă.
webdriver-manager update
Pasul 4) Porniți managerul de driver web. Acest pas va rula managerul de driver web în fundal și va asculta orice teste care rulează prin raportor.
Odată ce Protractor este utilizat pentru a rula orice test, driverul web va încărca și rula automat testul în browserul relevant. Pentru a porni managerul de driver web, următoarea comandă trebuie executată din promptul de comandă.
webdriver-manager start
Acum, dacă accesați următoarea adresă URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) în browserul dvs., veți vedea de fapt managerul de driver Web care rulează în fundal.
Exemplu de testare a aplicației AngularJS utilizând Protractor
Protractor are nevoie de două fișiere pentru a rula, un fișier spec și un fișier de configurare .
- Fișier de configurare : Acest fișier ajută la raportorul unde sunt plasate fișierele de testare (specs.js) și să vorbească cu serverul Selenium (Adresa Selenium). Chrome este browserul implicit pentru Protractor.
- Fișier spec: Acest fișier conține logica și localizatorii pentru a interacționa cu aplicația .
Pasul 1) Trebuie să ne conectăm la https://angularjs.org și să introducem textul ca „GURU99” în caseta de text „Introduceți un nume aici”.
Pasul 2) În acest pas,
- A fost introdus numele „Guru99”
- În textul de ieșire este afișat „Hello Guru99”.
Pasul 3) Acum trebuie să captăm textul de pe pagina web după introducerea numelui și trebuie să verificăm cu textul așteptat .
Cod:
Trebuie să pregătim fișierul de configurare (conf.js) și fișierul spec (spec.js) așa cum s-a 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!');});});
Explicarea codului spec.js:
- describe („Introduceți numele GURU99”, funcția ()
Sintaxa descrie este din cadrul Jasmine. Aici „descrie” („Enter GURU99 Name”) definește de obicei componentele unei aplicații, care pot fi o clasă sau o funcție etc. În suita de coduri numită „Enter GURU99”, este doar un șir și nu un cod.
- it („ar trebui să adauge un nume ca GURU99”, funcție ()
- browser.get („https://angularjs.org”)
La fel ca în Selenium Webdriver browser.get va deschide o nouă instanță de browser cu adresa URL menționată.
- element (by.model ('yourName')). sendKeys ('GURU99')
Aici găsim elementul web folosind numele modelului ca „numele tău”, care este valoarea „modelului ng” de pe pagina web. Verificați captura de ecran de mai jos-
- 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 stocăm valoarea acestuia într-o variabilă „guru” .
- se așteaptă (guru.getText ()). toEqual („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']};
Cod Explicație pentru conf.js
- seleniumAddress: „http: // localhost: 4444 / wd / hub”
Fișierul de configurare indică Protractor locația adresei Selenium pentru a vorbi cu Selenium WebDriver.
- specificații: ['spec.js']
Această linie indică Protractor locația fișierelor de test spec.js
Executarea Codului
Mai întâi aici, vom schimba calea directorului sau vom naviga la folderul în care sunt plasate confi.js și spec.js în sistemul nostru .
Urmați următorul pas.
Pasul 1) Deschideți promptul de comandă.
Pasul 2) Asigurați-vă că managerul de driver web seleniu este în funcțiune. Pentru aceasta, dați comanda „webdriver-manager start” și apăsați Enter .
(Dacă driverul web de seleniu nu este pornit și nu rulează, nu putem continua cu un test deoarece Protractor nu poate găsi driverul web pentru a gestiona aplicația web)
Pasul 3) Deschideți un nou prompt de comandă și dați comanda ca „protractor conf.js” pentru a rula fișierul de configurare.
Explicaţie:
- Aici Protractor va executa fișierul de configurare cu fișierul specificat în el.
- Putem vedea serverul de seleniu 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âți au fost trecuți și eșecuri ca în captura de ecran de mai sus .
Bine, am verificat rezultatul atunci când este trecut sau așa cum era de așteptat. Acum să analizăm și rezultatul eșecului.
Pasul 1) Deschideți și modificați se așteaptă să aibă ca rezultat 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!');});});
Pasul 2) Salvați fișierul spec.js și repetați pașii de mai sus din secțiunea „Executarea codului”
Acum, executați pașii de mai sus.
Rezultat:
Putem vedea rezultatul ca eșuat, indicat cu „F” în captura de ecran cu motivul „Așteptat„ Bună ziua GURU99! ” pentru a fi egal cu „Hello change GURU99!”. De asemenea, arată câte erori se întâlnesc la executarea codului.
Putem realiza același lucru cu driverul web Selenium?
Uneori putem identifica elementele web ale aplicațiilor AngularJS folosind selectorul XPath sau CSS de la driverul web Selenium. Dar în aplicațiile AngularJS, elementele vor fi generate și modificate dinamic. Deci Protractor este cea mai bună practică pentru a lucra cu aplicațiile AngularJS.
Generați rapoarte folosind Jasmine Reporters
Protractor sprijină reporterii Jasmine pentru a genera rapoarte de testare. În această secțiune, vom folosi JunitXMLReporter pentru a genera rapoarte de execuție de testare automat în format XML.
Urmați pașii de mai jos pentru a genera rapoarte în format XML.
Instalarea Jasmine Reporter
Puteți face acest lucru în două moduri, la nivel local sau global
- 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 va instala rapoarte iasomie, noduri-module înseamnă local din directorul în care executăm comanda în promptul de comandă.
- Apăsați promptul de comandă executați următoarea comandă pentru instalarea globală
npm install -g jasmine-reporters@^2.0.0
În acest tutorial, vom instala reporterii de iasomie la nivel local .
Pasul 1) Executați comanda.
npm install --save-dev jasmine-reporters@^2.0.0
din promptul de comandă ca mai jos.
Pasul 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.
Pasul 3) Adăugați următorul cod colorat într-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 oferim Calea unde se stochează raportul.
Pasul 4) Deschideți promptul de comandă și executați comanda protractor conf.js.
Pasul 5) Când executați codul de mai sus, junitresults.xml va fi generat în calea menționată.
Pasul 6) Deschideți XML-ul și verificați rezultatul. Mesajul de eșec este afișat în fișierul de rezultate, deoarece Cazul nostru de testare eșuează. Cazul de testare a eșuat, deoarece rezultatul așteptat din „spec.js” nu se potrivește cu rezultatul real de pe o pagină web
Pasul 7) Utilizați fișierul junitresult.xml pentru dovezi sau fișiere de rezultate.
Rezumat:
Deși Seleniu poate face unele dintre lucrurile pe care le face transportorul, acesta este standardul industrial și cea mai bună practică pentru testarea aplicațiilor AngularJS. Un Protractor poate gestiona, de asemenea, mai multe capabilități din acesta și poate gestiona schimbările dinamice ale elementelor web folosind ng-model, ng-click ... etc ... (Ceea ce seleniul nu poate face).
Acest articol este contribuit de Ranjith Kumar Enishetti