Hvad er vinkelmåler testning?
PROTRACTOR er et automatiserings- og end-to-end adfærdsstyret testværktøj, der spiller en vigtig rolle i afprøvning af AngularJS-applikationer og fungerer som en løsningsintegrator, der kombinerer kraftfulde teknologier som selen, jasmin, webdriver osv. Formålet med vinkelmåler testning er ikke kun at teste AngularJS-applikationer, men også at skrive automatiske regressionstest til normale webapplikationer.
I denne begyndervejledning lærer du-
- Hvorfor har vi brug for vinkelmåleramme?
- Vinkelmålerinstallation
- Eksempel på AngularJS applikationstest ved hjælp af Protractor
- Udførelse af koden
- Generer rapporter ved hjælp af Jasmine Reporters
Hvorfor har vi brug for vinkelmåleramme?
JavaScript bruges i næsten alle webapplikationer. Efterhånden som applikationerne vokser, øges JavaScript også i størrelse og kompleksitet. I sådanne tilfælde bliver det en vanskelig opgave for testere at teste webapplikationen for forskellige scenarier.
Nogle gange er det vanskeligt at fange webelementerne i AngularJS-applikationer ved hjælp af JUnit eller Selenium WebDriver.
Vinkelmåler er et NodeJS-program, der er skrevet i JavaScript og kører med Node for at identificere webelementerne i AngularJS-applikationer, og det bruger også WebDriver til at kontrollere browseren med brugerhandlinger.
Okay, lad os nu diskutere, hvad der præcist er en AngularJS-applikation?
AngularJS-applikationer er webapplikationer, der bruger udvidet HTML's syntaks til at udtrykke webapplikationskomponenter. Det bruges hovedsageligt til dynamiske webapplikationer. Disse applikationer bruger mindre og fleksibel kode sammenlignet med normale webapplikationer.
Hvorfor kan vi ikke finde Angular JS-webelementer ved hjælp af Normal Selen Web-driver?
Kantede JS-applikationer har nogle ekstra HTML-attributter som ng-repeater, ng-controller, ng-model ... osv., Som ikke er inkluderet i Selen-lokaliseringer. Selen er ikke i stand til at identificere disse webelementer ved hjælp af Selen-kode. Så vinkelmåler på toppen af selen kan håndtere og kontrollere disse attributter i webapplikationer.
Vinkelmåleren er en ende-til-slut-testramme for Angular JS-baserede applikationer. Mens de fleste rammer fokuserer på at gennemføre enhedstest til Angular JS-applikationer, fokuserer Protractor på at teste den faktiske funktionalitet af en applikation.
Før vi starter Protractor, skal vi installere følgende:
- Selen
Du kan finde trinene til installation af selen i følgende links (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
NodeJS Installation, vi skal installere NodeJS for at installere Protractor. Du kan finde denne installationstrin i følgende link. (https://www.guru99.com/download-install-node-js.html)
Vinkelmålerinstallation
Trin 1) Åbn kommandoprompt og skriv "npm install -g gradskive" og tryk Enter .
Ovenstående kommando downloader de nødvendige filer og installerer Protractor på klientsystemet.
Trin 2) Kontroller installationen og versionen ved hjælp af " Vinkelmåler - version ." Hvis det lykkes, viser det versionen som i nedenstående skærmbillede. Hvis ikke, skal du udføre trin 1 igen.
(Trin 3 og 4 er valgfri, men anbefales til bedre praksis)
Trin 3) Opdater webdriveradministratoren. Webdriveradministratoren bruges til at køre testene mod den kantede webapplikation i en bestemt browser. Når Protractor er installeret, skal webdriveradministratoren opdateres til den nyeste version. Dette kan gøres ved at køre følgende kommando i kommandoprompten.
webdriver-manager update
Trin 4) Start webdriveradministratoren. Dette trin kører webdriveradministratoren i baggrunden og vil lytte til eventuelle tests, der kører via vinkelmåler.
Når vinkelmåler er brugt til at køre en test, indlæses og kører webdriveren automatisk testen i den relevante browser. For at starte webdriveradministratoren skal følgende kommando udføres fra kommandoprompten.
webdriver-manager start
Hvis du nu går til følgende URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) i din browser, vil du faktisk se webdriveradministratoren køre i baggrunden.
Eksempel på AngularJS applikationstest ved hjælp af Protractor
Vinkelmåler har brug for to filer til at køre, en spec- fil og en konfigurationsfil .
- Konfigurationsfil : Denne fil hjælper vinkelmåler til, hvor testfilerne er placeret (specs.js) og til at tale med Selenium-server (Selenium-adresse). Chrome er standardbrowseren til Protractor.
- Spec-fil: Denne fil indeholder logikken og lokaliseringerne til at interagere med applikationen .
Trin 1) Vi skal logge ind på https://angularjs.org og indtaste teksten som "GURU99" i "Indtast et navn her" tekstfelt.
Trin 2) I dette trin,
- Indtast navnet "Guru99"
- I outputteksten "Hello Guru99" ses.
Trin 3) Nu er vi nødt til at fange teksten fra websiden efter indtastning af navnet og skal bekræftes med den forventede tekst .
Kode:
Vi er nødt til at forberede konfigurationsfil (conf.js) og spec-fil (spec.js) som nævnt ovenfor.
Logik af 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!');});});
Kode Forklaring af spec.js:
- beskriv ('Indtast GURU99-navn', funktion ()
Beskriv syntaksen er fra Jasmine-rammen. Her "beskriver" ('Indtast GURU99-navn') defineres typisk komponenter i en applikation, som kan være en klasse eller funktion osv. I kodepakken kaldet "Indtast GURU99" er det bare en streng og ikke en kode.
- det ('skal tilføje et navn som GURU99', funktion ()
- browser.get ('https://angularjs.org')
Som i Selenium Webdriver browser.get åbner en ny browserinstans med nævnt URL.
- element (by.model ('dit navn')). sendKeys ('GURU99')
Her finder vi webelementet ved hjælp af modelnavnet som "dit navn", som er værdien af "ng-model" på websiden. Tjek skærmbilledet nedenfor-
- var guru = element (af.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Her finder vi webelementet ved hjælp af XPath og gemmer dets værdi i en variabel "guru" .
- forvent (guru.getText ()). toEqual ('Hej GURU99!')
Endelig verificerer vi den tekst, som vi har fået fra websiden (ved hjælp af gettext ()) med forventet tekst.
Logik af conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Kode Forklaring af conf.js
- selenAddress: 'http: // localhost: 4444 / wd / hub'
Konfigurationsfilen fortæller Protractor placeringen af Selenium-adresse for at tale med Selenium WebDriver.
- specs: ['spec.js']
Denne linje fortæller Protractor placeringen af testfiler spec.js
Udførelse af koden
Her først vil vi ændre katalogstien eller navigere til den mappe, hvor confi.js og spec.js er placeret i vores system .
Følg følgende trin.
Trin 1) Åbn kommandoprompten.
Trin 2) Sørg for, at selen web-driver manager er oppe og kører. For at give kommandoen som "webdriver-manager start" og tryk Enter .
(Hvis selen webdriver ikke er i gang, kan vi ikke fortsætte med en test, da Vinkelmåler ikke kan finde webdriveren til at håndtere webapplikationen)
Trin 3) Åbn en ny kommandoprompt, og giv kommandoen som "protractor conf.js" for at køre konfigurationsfilen.
Forklaring:
- Her udfører vinkelmåler konfigurationsfilen med den givne spec-fil i den.
- Vi kan se selen-serveren køre på " http: // localhost: 4444 / wd / hub ", som vi har givet i conf.js-filen.
- Her kan også se resultatet, hvor mange der er bestået og fejl som i ovenstående skærmbillede .
Fint, vi har verificeret resultatet, når det er bestået eller som forventet. Lad os nu se på mislykket resultat også.
Trin 1) Åbn og skift forventet at resultere i spec.js til "'Hej skift GURU99" som nedenfor.
Efter ændring i 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!');});});
Trin 2) Gem filen spec.js, og gentag ovenstående trin i afsnittet "Udførelse af koden"
Udfør nu ovenstående trin.
Resultat:
Vi kan se resultatet som mislykket angivet med 'F' i skærmbilledet med årsagen som "Forventet 'Hej GURU99!' svarer til 'Hej skift GURU99!'. Det viser også, hvor mange fejl der opstår, når kode udføres.
Kan vi opnå det samme med Selenium-webdriver?
Nogle gange kan vi identificere webelementerne i AngularJS-applikationer ved hjælp af XPath eller CSS-vælger fra Selenium-webdriver. Men i AngularJS-applikationer genereres og ændres elementerne dynamisk. Så vinkelmåler er den bedre praksis at arbejde med AngularJS applikationer.
Generer rapporter ved hjælp af Jasmine Reporters
Vinkelmåler støtter Jasmine-journalister til at generere testrapporter. I dette afsnit bruger vi JunitXMLReporter til automatisk at generere testudførelsesrapporter i XML-format.
Følg nedenstående trin for at generere rapporter i XML-format.
Installation af Jasmine Reporter
Der er to måder, du kan gøre dette på, lokalt eller globalt
- Åbn kommandoprompt udfør følgende kommando for at installere lokalt
npm install --save-dev jasmine-reporters@^2.0.0
Ovenstående kommando installerer jasminrapporter node-moduler lokalt middel fra den mappe, hvor vi kører kommandoen i kommandoprompten.
- Åbn kommandoprompt, udfør følgende kommando til global installation
npm install -g jasmine-reporters@^2.0.0
I denne vejledning installerer vi jasminreporterne lokalt .
Trin 1) Udfør kommandoen.
npm install --save-dev jasmine-reporters@^2.0.0
fra kommandoprompten som nedenfor.
Trin 2) Kontroller installationsmapperne i biblioteket . "Node_modules" skal være tilgængelig, hvis den er installeret med succes som i nedenstående snapshot.
Trin 3) Føj følgende farvede kode til en eksisterende conf.js-fil
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));}};
Forklaring af kode:
I kode genererer vi rapporten " JUnitXmlReporter " og giver stien, hvor rapporten skal gemmes.
Trin 4) Åbn kommandoprompten, og udfør kommandoventil conf.js.
Trin 5) Når du udfører ovenstående kode, genereres junitresults.xml i den nævnte sti.
Trin 6) Åbn XML og bekræft resultatet. Fejlmeddelelsen vises i resultatfilen, da vores testsag mislykkedes. Testsagen mislykkedes, da det forventede resultat fra "spec.js" ikke matches med det faktiske resultat fra en webside
Trin 7) Brug filen junitresult.xml til dokumentation eller resultatfiler.
Resumé:
Selvom selen kan gøre nogle af de ting, hvad vinkelmåler gør, er vinkelmåler den industrielle standard og bedste praksis til at teste AngularJS-applikationer. En vinkelmåler kan også styre flere funktioner i den og håndtere de dynamiske ændringer af webelementer ved hjælp af ng-model, ng-klik ... osv ... (Hvilket selen ikke kan gøre).
Denne artikel er bidraget af Ranjith Kumar Enishetti