PROtracVodič za testiranje Tor-a: Okvir alata za automatizaciju

⚠️ Obavijest o ukidanju: PROtracTor je zastarjelo i arhiviranoPodrška je završila u kolovozu 2023., a Angular CLI je ukinuo svoju Pro verziju.tracTor builder nakon Angulara 15. Pick dramaturg, Cypress, WebdriverIO ili TestCafe za nove end-to-end testiranjeDonji vodič ostaje za naslijeđene pakete.

Zašto nam je potreban ProtracTor okvir?

JavaSkripta se koristi u gotovo svim web aplikacijama. Kako aplikacije rastu, JavaScript također se povećava u veličini i složenosti. U takvom slučaju, testerima postaje 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 Node.js program 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.

Pa što je točno AngularJS aplikacija?

AngularJS Aplikacije su web aplikacije koje koriste proširenu HTML sintaksu za izražavanje komponenti web aplikacija. Uglavnom se koristi za dinamičke web aplikacije. Ove aplikacije koriste manje koda i fleksibilniji su u usporedbi s normalnim web aplikacijama. Imajte na umu da je AngularJS 1.x napustio dugoročnu podršku 31. prosinca 2021., pa su takve aplikacije danas naslijeđene.

Zašto ne možemo pronaći AngularJS web elemente koristeći Normal? Selenium WebDriver?

AngularJS aplikacije imaju neke dodatne HTML atribute poput 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 kod. Dakle, Protractor na vrhu Selenium može rukovati i kontrolirati te atribute u web aplikacijama.

PROtracTor je end-to-end framework za testiranje aplikacija temeljenih na AngularJS-u. Dok se većina frameworkova fokusira na provođenje jedinični testovi za AngularJS aplikacije, ProtracTor se fokusira na testiranje stvarne funkcionalnosti aplikacije.

Prije nego što počnemo s Pro-omtractor, moramo instalirati sljedeće:

1. Selenium: možete pronaći Selenium korake instalacije u Selenium Vodič za instalaciju WebDrivera.
2. NPM (Node.js): Moramo instalirati Node.js da bismo instalirali Protractor. Ove korake instalacije možete pronaći u Vodič za preuzimanje i instalaciju Node.js-a.

PROtracInstalacija Tora

Korak 1) Otvorite naredbeni redak i upišite "npm install -g pro"tractor” i pritisnite Enter.

Gornja naredba će preuzeti potrebne datoteke i instalirati Protractor na klijentskom sustavu, kao što je prikazano u nastavku.

Korak 2) Provjerite instalaciju i verziju pomoću "profesionalac"tractor-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 WebDriver manager. WebDriver manager se koristi za pokretanje testova na Angular web aplikaciji u određenom pregledniku. Nakon Pro verzijetracAko je instaliran tor, upravitelj WebDrivera potrebno je ažurirati na najnoviju verziju. To se može učiniti pokretanjem sljedeće naredbe u naredbenom retku.

webdriver-manager update

Binarne datoteke upravljačkog programa preuzimaju se kao što je prikazano dolje.

Korak 4) Pokrenite WebDriver manager. Ovaj korak će pokrenuti WebDriver manager u pozadini i slušat će sve testove koji se izvode putem protracthor.

Nakon što se test pokrene, WebDriver ga automatski učitava u odgovarajući preglednik. Pokrenite upravitelj naredbom u nastavku.

webdriver-manager start

Konzola izvještava o adresi slušanja.

Sada, ako idete na sljedeće URL (http://localhost:4444/wd/hub/static/resource/hub.html) u vašem pregledniku, vidjet ćete WebDriver manager kako radi u pozadini.

Primjer testiranja AngularJS aplikacije pomoću Pro verzijetrachumka

S pokrenutim upraviteljem upravljačkih programa, ProtracToru su za pokretanje potrebne dvije datoteke, specijalan podnijeti i konfiguracija file.

1. Konfiguracijska datotekaOva datoteka pomaže protractor do mjesta gdje se nalaze testne datoteke (specs.js) i za komunikaciju s Selenium poslužitelj (Selenium Adresa). Chrome je zadani preglednik za Pro verzijutracthor.
2. Spec datoteka: Ova datoteka sadrži logiku i lokatore za interakciju s aplikacijom.

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

Korak 2) U ovom koraku

1. Uneseno je ime "Guru99 "
2. U izlaznom tekstu "Pozdrav" GuruVidi se 99″.

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

Code:

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

Code Objašnjenje spec.js-a:

1. opisati('Unesite ime GURU99', function() Sintaksa opisa je iz Okvir jasminaOvdje „opiši“ ('Unesite GURU99 ime') obično definira komponente aplikacije, koje mogu biti klasa ili funkcija itd. U paketu koda pod nazivom „Unesite GURU99“ to je samo niz znakova, a ne kod.
2. it('treba dodati ime kao GURU99', funkcija()
3. preglednik.get('https://angularjs.org') Kao u Selenium WebDriver browser.get će otvoriti novu instancu preglednika sa spomenutim URL.
4. element(by.model('vašeIme')).sendKeys('GURU99') Ovdje pronalazimo web element koristeći naziv modela kao „yourName“, što je vrijednost od „ng-model" na web stranici. Pogledajte snimku 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']
};

Code Objašnjenje conf.js-a

1. seleniumAddress: 'http://localhost:4444/wd/hub' Konfiguracijska datoteka govori Pro-utracza lokaciju Selenium Adresa za razgovor Selenium WebDriver.
2. specifikacije: ['spec.js']Ova linija govori Pro-utracza lokaciju testnih datoteka spec.js

Izvršenje Code

Prvo, idite do mape u kojoj se nalaze datoteke conf.js i spec.js, a zatim slijedite korake u nastavku..

Korak 1) Otvorite naredbeni redak.

Korak 2) Pobrinite Selenium WebDriver manager je pokrenut. Za to unesite naredbu "webdriver-manager start" i pritisnite Enter..

(Ako Selenium WebDriver nije pokrenut i ne možemo nastaviti s testiranjem kao ProtracTor ne može pronaći WebDriver za rukovanje web aplikacijom)

Korak 3) Otvorite novi naredbeni redak i dajte naredbu kao "profesionalac"tractor conf.js” za pokretanje konfiguracijske datoteke. Pokretanje završava kao što je prikazano dolje.

Objašnjenje:

• Ovdje ProtracTor će izvršiti konfiguracijsku datoteku s danom spec datotekom u njoj.
• Možemo vidjeti Selenium poslužitelj koji 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.

Prolazni rezultat je sada potvrđen. Zatim pogledajte neuspješan rezultat.

Korak 1) Otvorite i promijenite, očekuje se da će spec.js rezultirati "'Hello change GURU99' kao što je prikazano 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 "Izvršavanja Code”Odjeljak

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, prikazuje koliko se grešaka javlja prilikom izvršavanja koda.

Možemo li postići isto sa Selenium WebDriver?

Ponekad se AngularJS elementi mogu pronaći pomoću XPath ili CSS selektora iz Selenium WebDriver. Međutim, ti se elementi generiraju i dinamički ponovno pokreću, tako da ProtracTor je bio sigurnija opcija za AngularJS pakete.

Generirajte izvješća koristeći Jasmine Reporters

PROtracTor podržava Jasmine reportere. Ovaj odjeljak koristi JUnitXmlReporter za automatsko generiranje izvješća o izvršenju testova u XML formatu, slijedeći korake u nastavku.

Instalacija Jasmine Reportera

Postoje dvije mogućnosti, lokalna ili globalna

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

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

Gornja naredba instalira jasmine-reporters lokalno, unutar direktorija u kojem se pokreće.

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

npm install –g jasmine-reporters@^2.0.0

Ovdje su reporteri instalirani 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 zatractor 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 uspjelo. 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.

PROtracTor u odnosu na moderne alternative automatizacije testiranja

Od profesionalcatracTor više ne prima ažuriranja, timovi koji planiraju nove pakete moraju znati kako se on uspoređuje s okvirima na koje Angular projekti sada migriraju. Tablica u nastavku uspoređuje Protractor s tri alternative koje se najčešće pojavljuju u često postavljanim pitanjima u nastavku.

Timovi s postojećim profesionalcemtracTor Suite se općenito najbrže kreće prema WebdriverIO, budući da je njegov stil naredbe i Seleniumupravljanje vozačima temeljeno na sustavu ostaje blizu onoga što ProtracTesteri Tora već znaju. Timovi koji počinju iznova ili trebaju najbrža testiranja, češće biraju Cypress ili umjesto toga Dramski pisac.

Pitanja i odgovori