Tutorial de testare a raportoarelor: Cadrul instrumentelor de automatizare

De ce avem nevoie de un cadru raportor?

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

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

Protractor este un program NodeJS în care este scris 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.

Ok, bine acum să discutăm ce este 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 folosit în principal pentru aplicații web dinamice. Aceste aplicații folosesc 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 Normal Selenium Driver web?

Aplicațiile Angular JS 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, raportorul în partea de sus a Selenium poate gestiona și controla acele atribute în aplicațiile web.

Raportorul este un cadru de testare de la capăt la capăt pentru aplicațiile bazate pe Angular JS. În timp ce majoritatea cadrelor se concentrează pe efectuarea de teste 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:

1. SeleniumPuteți găsi Selenium Pașii de instalare în următoarele link-uri, (https://www.guru99.com/installing-selenium-webdriver.html )
2. Instalare NPM (Node.js)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 raportorului

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

Comanda de mai sus va descărca fișierele necesare și va instala Protractor pe sistemul client.

Pas 2) Verificați instalarea și versiunea folosind Versiune cu raportor. " 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 de drivere web. Managerul de driver web este utilizat pentru rularea testelor împotriva aplicației web unghiulare într-un anumit browser. După ce Protractor este instalat, managerul de drivere web trebuie să fie actualizat la cea mai recentă versiune. Acest lucru se poate face prin rularea următoarei comenzi în promptul de comandă.

webdriver-manager update

Pas 4) Porniți managerul de drivere web. Acest pas va rula managerul de driver web în fundal și va asculta toate testele 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 să fie 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 browser, veți vedea de fapt managerul de drivere web rulând în fundal.

Exemplu de testare a aplicației AngularJS folosind Protractor

Protractor are nevoie de două fișiere pentru a rula, a spec. fișier și configuraţie fișier.

1. Fișier de configurare: Acest fișier ajută raportorul la locul în care sunt plasate fișierele de testare (specs.js) și pentru a vorbi cu Selenium Server (Selenium Abordare). Chrome este browserul implicit pentru Protractor.

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ă ne autentificăm 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 se vede „Bună ziua Guru99”.

Pas 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 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!');
  });
});

Explicația codului pentru spec.js:

1. descrie('Enter GURU99 Name', function()Sintaxa descrie este din cadrul Jasmine. Aici „describe” ('Enter GURU99 Name') definește de obicei componentele unei aplicații, care poate fi o clasă sau o funcție etc. În suita de coduri numit „Enter GURU99”, este doar un șir și nu un cod.
2. it('ar trebui să adauge un nume ca GURU99', function()
3. browser.get("https://angularjs.org") Ca în Selenium Webdriver browser.get va deschide o nouă instanță de browser cu adresa URL menționată.
4. element(după.model('numele tău')).trimite cheile('GURU99') Aici găsim elementul web folosind numele modelului ca „yourName”, care este valoarea „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']
};

Explicația codului conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Fișierul de configurare îi spune Protractorului locația Selenium Adresă cu care să vorbim Selenium WebDriver.
2. specs: ['spec.js']Această linie îi spune Protractorului locația fișierelor de testare spec.js

Executarea Codului

Aici, mai întâi, vom schimba calea directorului sau vom naviga la folderul în care confi.js și spec.js sunt plasate în sistemul nostru.

Urmați următorul pas.

Pas 1) Deschideți promptul de comandă.

Pas 2) Asigurați-vă că managerul de drivere web selenium este activ și rulează. Pentru asta, dați comanda ca „pornire webdriver-manager” și apăsați Enter.

(Dacă driverul web seleniu nu este în funcțiune, nu putem continua cu un test, deoarece Protractor nu poate găsi driverul web pentru a gestiona aplicația web)

Pas 3) Deschideți o nouă linie 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 de specificații dat în el.
• Putem vedea serverul selenium rulând 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.

Bine, am verificat rezultatul când a fost promovat sau conform așteptărilor. Acum să ne uităm și la rezultatul eșuat.

Pas 1) Deschideți și modificați se estimează că va avea ca rezultat spec.js la „'Salut, schimbați 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 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 ca „Se aștepta „Bună ziua GURU99!” pentru a egala „Bună ziua, schimbă GURU99!”. De asemenea, arată câte eșecuri sunt întâlnite la executarea codului.

Putem realiza același lucru cu Selenium driver web?

Uneori putem identifica elementele web ale aplicațiilor AngularJS folosind XPath sau selectorul CSS din Selenium driver web. Dar în aplicațiile AngularJS, elementele vor fi generate și modificate dinamic. Deci, Protractor este cea mai bună practică de 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 automat rapoarte de execuție a testelor în format XML.

Urmați pașii de mai jos pentru a genera rapoarte în format XML.

Instalarea lui Jasmine Reporter

Există două moduri în care puteți face acest lucru, la nivel 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 va instala Jasmine Reports node-module local înseamnă din directorul în care rulăm comanda în promptul de comandă.

2. Deschideț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 jasmine 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 raportor 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 este eșuată. Cazul de testare a eșuat, deoarece rezultatul așteptat de la „spec.js” nu este potrivit cu rezultatul real dintr-o pagină web

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

Rezumat

Deși Selenium poate face unele dintre lucrurile pe care le face raportorul, raportorul este standardul industrial și cea mai bună practică pentru a testa aplicațiile AngularJS. Un Protractor poate gestiona, de asemenea, mai multe capacități în el și poate gestiona modificările dinamice ale elementelor web folosind ng-model, ng-click.., etc.. (Ceea ce seleniul nu poate face).