Vodič za testiranje kutomjera: Okvir alata za automatizaciju

Zašto nam je potreban okvir kutomjera?

JavaSkripta se koristi u gotovo svim web aplikacijama. Kako aplikacije rastu, JavaScript također povećava veličinu i složenost. U tom slučaju testeri postaju težak zadatak testirati web aplikaciju za različite scenarije.

Ponekad je teško uhvatiti web elemente u AngularJS aplikacijama pomoću JUnit or Selenium WebDriver.

Protractor je NodeJS program koji je napisan u JavaSkriptira i pokreće se s Nodeom za identifikaciju web elemenata u AngularJS aplikacijama, a također koristi WebDriver za kontrolu preglednika radnjama korisnika.

U redu, raspravimo sada što je točno AngularJS aplikacija?

AngularJS aplikacije su web aplikacije koje koriste proširenu HTML sintaksu za izražavanje komponenti web aplikacije. Uglavnom se koristi za dinamičke web aplikacije. Ove aplikacije koriste manje fleksibilnog koda u usporedbi s normalnim web aplikacijama.

Zašto ne možemo pronaći Angular JS web elemente koristeći Normal Selenium Web vozač?

Angular JS aplikacije imaju neke dodatne HTML atribute kao što su ng-repeater, ng-controller, ng-model.. itd. koji nisu uključeni u Selenium lokatori. Selenium ne može identificirati te web elemente pomoću Selenium kodirati. Dakle, kutomjer na vrhu Selenium može rukovati i kontrolirati te atribute u web aplikacijama.

Kutomjer je okvir za testiranje s kraja na kraj za Angular JS aplikacije. Dok se većina okvira fokusira na provođenje jediničnih testova za Angular JS aplikacije, Protractor se fokusira na testiranje stvarne funkcionalnosti aplikacije.

Prije nego što pokrenemo Protractor, moramo instalirati sljedeće:

1. SeleniumMožete pronaći Selenium Koraci instalacije na sljedećim poveznicama, (https://www.guru99.com/installing-selenium-webdriver.html )
2. Instalacija NPM (Node.js)NodeJS, moramo instalirati NodeJS da bismo instalirali Protractor. Korake za instalaciju možete pronaći na sljedećoj poveznici. ( https://www.guru99.com/download-install-node-js.html )

Ugradnja kutomjera

Korak 1) Otvorite naredbeni redak i upišite “npm install –g kutomjer” i pritisnite Enter.

Gornja naredba će preuzeti potrebne datoteke i instalirati kutomjer na klijentski sustav.

Korak 2) Provjerite instalaciju i verziju pomoću "Kutomjer – verzija". Ako bude uspješan, prikazat će verziju kao na slici ispod. Ako nije, ponovite korak 1.

(Koraci 3 i 4 nisu obavezni, ali se preporučuju za bolju praksu)

Korak 3) Ažurirajte upravitelj web upravljačkih programa. Upravitelj web upravljačkih programa koristi se za izvođenje testova protiv angular web aplikacije u određenom pregledniku. Nakon što je Protractor instaliran, potrebno je ažurirati upravljački program za web na najnoviju verziju. To se može učiniti pokretanjem sljedeće naredbe u naredbenom retku.

webdriver-manager update

Korak 4) Pokrenite web upravljački program. Ovaj korak pokrenut će upravitelj web upravljačkog programa u pozadini i osluškivat će sve testove koji se izvode putem kutomjera.

Nakon što se Protractor koristi za izvođenje bilo kojeg testa, web upravljački program automatski će učitati i pokrenuti test u relevantnom pregledniku. Da biste pokrenuli web upravljački program, potrebno je izvršiti sljedeću naredbu iz naredbenog retka.

webdriver-manager start

Sada, ako odete na sljedeći URL (http://localhost:4444/wd/hub/static/resource/hub.html) u vašem pregledniku, zapravo ćete vidjeti kako upravitelj web upravljačkih programa radi u pozadini.

Primjer testiranja aplikacije AngularJS pomoću kutomjera

Protractor treba dvije datoteke za rad, a specijalan podnijeti i konfiguracija file.

1. Konfiguracijska datoteka: Ova datoteka pomaže u kutomjeru gdje su testne datoteke postavljene (specs.js) i za razgovor s Selenium poslužitelj (Selenium Adresa). Chrome je zadani preglednik za kutomjer.

2. Spec datoteka: Ova datoteka sadrži logiku i lokatore za interakciju s aplikacijom.

Korak 1) Moramo se prijaviti https://angularjs.org i unesite tekst kao “GURU99” u tekstni okvir “Unesite ime ovdje”.

Korak 2) U ovom koraku

1. Upisao ime “Guru99”
2. U izlaznom tekstu se vidi "Hello Guru99".

Korak 3) Sada moramo snimiti tekst s web-stranice nakon unosa imena i trebamo ga potvrditi očekivanim tekstom.

Kodirati:

Moramo pripremiti konfiguracijsku datoteku (conf.js) i specifikacijsku datoteku (spec.js) kao što je gore navedeno.

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

Kod Objašnjenje spec.js:

1. opisati('Unesite GURU99 naziv', funkcija() Sintaksa opisa je iz okvira Jasmine. Ovdje "opišite" ('Unesite GURU99 naziv') obično definira komponente aplikacije, koje mogu biti klasa ili funkcija itd. U paketu koda pod nazivom "Unesite GURU99", to je samo niz, a ne kod.
2. it('treba dodati ime kao GURU99', funkcija()
3. preglednik.get('https://angularjs.org') Kao u Selenium Webdriver browser.get otvorit će novu instancu preglednika sa spomenutim URL-om.
4. element(by.model('vašeIme')).sendKeys('GURU99') Ovdje nalazimo web element koristeći naziv modela kao “vašeIme,” što je vrijednost “ng-model” na web stranici. Provjerite snimak zaslona u nastavku-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Ovdje pronalazimo web element pomoću XPath i pohraniti njegovu vrijednost u varijablu "guru".
6. očekivati(guru.getText()).toEqual('Zdravo GURU99!') Konačno provjeravamo tekst koji smo dobili s web stranice (koristeći gettext()) s očekivanim tekstom.

Logika conf.js:

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

Kod Objašnjenje conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Konfiguracijska datoteka govori kutomjeru lokaciju Selenium Adresa za razgovor Selenium WebDriver.
2. specs: ['spec.js']Ovaj redak govori kutomjeru lokaciju testnih datoteka spec.js

Izvršenje Kodeksa

Ovdje ćemo prvo promijeniti put direktorija ili otići do mape u kojoj su confi.js i spec.js smješteni u našem sustavu.

Slijedite sljedeći korak.

Korak 1) Otvorite naredbeni redak.

Korak 2) Provjerite radi li selenium web driver manager. Za to dajte naredbu kao "webdriver-manager start" i pritisnite Enter.

(Ako selenium web upravljački program nije pokrenut, ne možemo nastaviti s testom jer Protractor ne može pronaći web upravljački program za rukovanje web aplikacijom)

Korak 3) Otvorite novi naredbeni redak i dajte naredbu kao “kutomjer conf.js” za pokretanje konfiguracijske datoteke.

Objašnjenje:

• Ovdje će kutomjer izvršiti konfiguracijsku datoteku sa zadanom specifikacijskom datotekom u njoj.
• Možemo vidjeti da selenium poslužitelj radi na "http://localhost:4444/wd/hub” koji smo dali u datoteci conf.js.
• Također, ovdje možete vidjeti rezultat koliko je položeno i greške kao na gornjoj snimci zaslona.

U redu, potvrdili smo rezultat kada je prošao ili kako je očekivano. Pogledajmo sada i rezultat neuspjeha.

Korak 1) Očekuje se da će otvaranje i promjena rezultirati u spec.js u “'Hello change GURU99” kao ispod.

Nakon promjene u 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!');
  });
});

Korak 2) Spremite datoteku spec.js i ponovite gornje korake iz odjeljka "Izvršenje koda".

Sada izvršite gornje korake.

Rezultat:

Vidimo da je rezultat neuspješan označen s 'F' na snimci zaslona s razlogom kao “Očekivano 'Zdravo GURU99!' jednak 'Zdravo promjena GURU99!'. Također, pokazuje koliko je grešaka naišlo prilikom izvršavanja koda.

Možemo li postići isto sa Selenium web vozač?

Ponekad možemo identificirati web elemente AngularJS aplikacija koristeći XPath ili CSS selektor iz Selenium web vozač. Ali u AngularJS aplikacijama, elementi će se generirati i mijenjati dinamički. Stoga je kutomjer bolja praksa za rad s AngularJS aplikacijama.

Generirajte izvješća koristeći Jasmine Reporters

Protractor podržava Jasmine reportere za generiranje testnih izvješća. U ovom odjeljku koristit ćemo JunitXMLReporter za automatsko generiranje izvješća o izvršenju testa u XML formatu.

Slijedite korake u nastavku za generiranje izvješća u XML formatu.

Instalacija Jasmine Reportera

Postoje dva načina na koje to možete učiniti, lokalno ili globalno

1. Otvorite naredbeni redak i izvršite sljedeću naredbu za lokalnu instalaciju

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

Gornja naredba instalirat će jasmine izvješća node-module lokalno znači iz direktorija u kojem izvodimo naredbu u naredbenom retku.

2. Otvorite naredbeni redak i izvršite sljedeću naredbu za globalnu instalaciju

npm install –g jasmine-reporters@^2.0.0

U ovom vodiču ćemo instalirati jasmine reportere lokalno.

Korak 1) Izvršite naredbu.

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

iz naredbenog retka kao ispod.

Korak 2) Provjerite instalacijske mape u imeniku. ”Node_modules” trebao bi biti dostupan ako je uspješno instaliran kao na slici ispod.

Korak 3) Dodajte sljedeći obojeni kod u postojeću datoteku 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)
          );
     }
   };

Objašnjenje koda:

U kodu, mi generiramo izvješće "JUnitXmlReporter” i dajući put gdje pohraniti izvješće.

Korak 4) Otvorite naredbeni redak i izvršite naredbu kutomjer conf.js.

Korak 5) Kada izvršite gornji kod, junitresults.xml će se generirati na spomenutom putu.

Korak 6) Otvorite XML i provjerite rezultat. Poruka o neuspjehu prikazana je u datoteci rezultata kao naša Testni slučaj nije uspio. Testni slučaj nije uspio jer se očekivani rezultat iz "spec.js" ne podudara sa stvarnim rezultatom s web stranice

Korak 7) Koristite datoteku junitresult.xml za dokaze ili datoteke rezultata.

Rezime

Iako Selenium može raditi neke od stvari koje radi kutomjer, kutomjer je industrijski standard i najbolja praksa za testiranje AngularJS aplikacija. Protractor također može upravljati višestrukim mogućnostima u sebi i rukovati dinamičkim promjenama web elemenata koji se koriste ng-model, ng-klik.., itd.. (Što selen ne može).