Hva er Protractor Testing?
PROTRACTOR er et automatiserings- og end-to-end atferdsdrevet testverktøy som spiller en viktig rolle i Testing av AngularJS-applikasjoner og fungerer som en løsningsintegrator som kombinerer kraftige teknologier som Selen, Jasmine, Webdriver osv. Formålet med Protractor Testing er ikke bare for å teste AngularJS-applikasjoner, men også for å skrive automatiserte regresjonstester for vanlige webapplikasjoner.
I denne begynnerveiledningen vil du lære-
- Hvorfor trenger vi vinkelmåler?
- Vinkelmålerinstallasjon
- Eksempel på AngularJS applikasjonstesting ved bruk av Protractor
- Utførelse av koden
- Generer rapporter ved hjelp av Jasmine Reporters
Hvorfor trenger vi vinkelmåler?
JavaScript brukes i nesten alle webapplikasjoner. Etter hvert som applikasjonene vokser, øker JavaScript også i størrelse og kompleksitet. I slike tilfeller blir det en vanskelig oppgave for testere å teste webapplikasjonen for forskjellige scenarier.
Noen ganger er det vanskelig å fange opp webelementene i AngularJS-applikasjoner ved hjelp av JUnit eller Selenium WebDriver.
Protractor er et NodeJS-program som er skrevet i JavaScript og kjører med Node for å identifisere webelementene i AngularJS-applikasjoner, og det bruker også WebDriver til å kontrollere nettleseren med brukerhandlinger.
Ok, nå skal vi diskutere hva som egentlig er et AngularJS-program?
AngularJS-applikasjoner er webapplikasjoner som bruker utvidet HTML-syntaks for å uttrykke webapplikasjonskomponenter. Den brukes hovedsakelig til dynamiske webapplikasjoner. Disse programmene bruker mindre og fleksibel kode sammenlignet med vanlige webapplikasjoner.
Hvorfor finner vi ikke Angular JS-webelementer ved hjelp av Normal Selen Web-driver?
Kantete JS-applikasjoner har noen ekstra HTML-attributter som ng-repeater, ng-controller, ng-model ..., etc. som ikke er inkludert i Selenium locators. Selen er ikke i stand til å identifisere disse webelementene ved hjelp av Selen-kode. Så, Protractor på toppen av Selen kan håndtere og kontrollere disse attributtene i webapplikasjoner.
Vinkelmåleren er en ende-til-slutt-testramme for Angular JS-baserte applikasjoner. Mens de fleste rammeverk fokuserer på å gjennomføre enhetstester for Angular JS-applikasjoner, fokuserer Protractor på å teste den faktiske funksjonaliteten til en applikasjon.
Før vi starter Protractor, må vi installere følgende:
- Selen
Du finner trinnene for installasjon av selen i følgende lenker, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
NodeJS Installasjon, vi må installere NodeJS for å installere Protractor. Du finner disse installasjonstrinnene i følgende lenke. (https://www.guru99.com/download-install-node-js.html)
Vinkelmålerinstallasjon
Trinn 1) Åpne ledeteksten og skriv "npm install -g protractor" og trykk Enter .
Ovennevnte kommando vil laste ned de nødvendige filene og installere Protractor på klientsystemet.
Trinn 2) Kontroller installasjonen og versjonen ved å bruke " Protractor --version ". Hvis det lykkes, vil det vise versjonen som i skjermbildet nedenfor. Hvis ikke, utfør trinn 1 igjen.
(Trinn 3 og 4 er valgfrie, men anbefales for bedre praksis)
Trinn 3) Oppdater webdriveradministratoren. Webdriveradministratoren brukes til å kjøre testene mot den kantede webapplikasjonen i en bestemt nettleser. Etter at Protractor er installert, må webdriveradministratoren oppdateres til den nyeste versjonen. Dette kan gjøres ved å kjøre følgende kommando i ledeteksten.
webdriver-manager update
Trinn 4) Start nettdriverlederen. Dette trinnet vil kjøre webdriveransvarlig i bakgrunnen og vil lytte til eventuelle tester som kjøres via vinkelmåler.
Når Vinkelmåler er brukt til å kjøre en hvilken som helst test, laster og kjører nettdriveren automatisk testen i den aktuelle nettleseren. For å starte webdriveradministratoren, må følgende kommando utføres fra ledeteksten.
webdriver-manager start
Nå, hvis du går til følgende URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) i nettleseren din, vil du faktisk se Web Driver Manager kjører i bakgrunnen.
Eksempel på AngularJS applikasjonstesting ved bruk av Protractor
Protractor trenger to filer for å kjøre, en spesifikasjonsfil og konfigurasjonsfil .
- Konfigurasjonsfil : Denne filen hjelper vinkelmåler til hvor testfilene er plassert (specs.js) og å snakke med Selenium-server (Selenium-adresse). Chrome er standard nettleser for Protractor.
- Spec-fil: Denne filen inneholder logikken og lokalisatorene for å samhandle med applikasjonen .
Trinn 1) Vi må logge inn https://angularjs.org og legge inn teksten som "GURU99" i "Skriv inn et navn her" tekstboks.
Trinn 2) I dette trinnet,
- Angitt navnet "Guru99"
- I utdatateksten "Hello Guru99" er sett.
Trinn 3) Nå må vi fange teksten fra nettsiden etter å ha skrevet inn navnet og må verifisere med forventet tekst .
Kode:
Vi må forberede konfigurasjonsfilen (conf.js) og spec-filen (spec.js) som nevnt ovenfor.
Logikk av 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 av spec.js:
- beskriv ('Enter GURU99 Name', function ()
Beskriv syntaksen er fra Jasmine-rammen. Her beskriver "(" Enter GURU99 Name ") vanligvis komponenter i et program, som kan være en klasse eller funksjon osv. I kodesuiten kalt" Enter GURU99 "er det bare en streng og ikke en kode.
- det ('skal legge til et navn som GURU99', funksjon ()
- browser.get ('https://angularjs.org')
Som i Selenium Webdriver browser.get åpner en ny nettleserforekomst med nevnte URL.
- element (by.model ('yourName')). sendKeys ('GURU99')
Her finner vi webelementet ved hjelp av modellnavnet som "yourName", som er verdien av "ng-model" på websiden. Sjekk skjermbildet nedenfor-
- var guru = element (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Her finner vi webelementet ved hjelp av XPath og lagrer verdien i en variabel "guru" .
- forvent (guru.getText ()). toEqual ('Hei GURU99!')
Til slutt verifiserer vi teksten som vi har fra nettsiden (ved hjelp av gettext ()) med forventet tekst.
Logikk av conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Kode Forklaring av conf.js
- selenAddress: 'http: // localhost: 4444 / wd / hub'
Konfigurasjonsfilen forteller Protractor plasseringen til Selenium Address for å snakke med Selenium WebDriver.
- spesifikasjoner: ['spec.js']
Denne linjen forteller Protractor plasseringen av testfiler spec.js
Utførelse av koden
Her først vil vi endre katalogbanen eller navigere til mappen der confi.js og spec.js er plassert i systemet vårt .
Følg følgende trinn.
Trinn 1) Åpne ledeteksten.
Trinn 2) Forsikre deg om at selen web driver driver er oppe og går. For det, gi kommandoen som "webdriver-manager start" og trykk Enter .
(Hvis selen nettdriver ikke er i gang, kan vi ikke fortsette med en test da Vinkelmåler ikke finner nettdriveren til å håndtere webapplikasjonen)
Trinn 3) Åpne en ny ledetekst og gi kommandoen som "protractor conf.js" for å kjøre konfigurasjonsfilen.
Forklaring:
- Her vil Protractor utføre konfigurasjonsfilen med gitt spesifikasjonsfil i.
- Vi kan se selen-serveren som kjører på " http: // localhost: 4444 / wd / hub " som vi har gitt i conf.js-filen.
- Her kan du også se resultatet hvor mange som er bestått og feil som i skjermbildet ovenfor .
Greit, vi har bekreftet resultatet når det er bestått eller som forventet. La oss nå se på feilresultat også.
Trinn 1) Åpne og endre forventet å resultere i spec.js til "'Hei endre GURU99" som nedenfor.
Etter endring 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!');});});
Trinn 2) Lagre filen spec.js og gjenta trinnene ovenfor i avsnittet "Utførelse av koden"
Utfør trinnene ovenfor.
Resultat:
Vi kan se resultatet som mislykket, indikert med 'F' i skjermbildet med årsaken som "Forventet 'Hei GURU99!' til å være lik "Hei endre GURU99!". Det viser også hvor mange feil som oppstår når du utfører kode.
Kan vi oppnå det samme med Selenium nettdriver?
Noen ganger kan vi identifisere webelementene til AngularJS-applikasjoner ved hjelp av XPath eller CSS-velgeren fra Selenium webdriver. Men i AngularJS-applikasjoner vil elementene bli generert og endret dynamisk. Så Vinkelmåler er bedre praksis for å jobbe med AngularJS-applikasjoner.
Generer rapporter ved hjelp av Jasmine Reporters
Protractor støtter Jasmine-journalister for å generere testrapporter. I denne delen vil vi bruke JunitXMLReporter til å generere testutførelsesrapporter automatisk i XML-format.
Følg trinnene nedenfor for å generere rapporter i XML-format.
Installasjon av Jasmine Reporter
Det er to måter du kan gjøre dette, lokalt eller globalt
- Åpne ledetekst utfør følgende kommando for å installere lokalt
npm install --save-dev jasmine-reporters@^2.0.0
Over kommandoen vil installere jasminrapporter nodemoduler lokalt betyr fra katalogen der vi kjører kommandoen i ledeteksten.
- Åpne ledetekst utfør følgende kommando for global installasjon
npm install -g jasmine-reporters@^2.0.0
I denne opplæringen vil vi installere jasminreporterne lokalt .
Trinn 1) Utfør kommandoen.
npm install --save-dev jasmine-reporters@^2.0.0
fra ledeteksten som nedenfor.
Trinn 2) Kontroller installasjonsmappene i katalogen . "Node_modules" skal være tilgjengelig hvis den er vellykket installert som i øyeblikksbildet nedenfor.
Trinn 3) Legg til følgende fargede kode i 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 av kode:
I kode genererer vi rapporten " JUnitXmlReporter " og gir banen hvor rapporten skal lagres.
Trinn 4) Åpne ledeteksten og kjør kommandoklasse conf.js.
Trinn 5) Når du kjører ovennevnte kode, vil junitresults.xml bli generert i nevnte bane.
Trinn 6) Åpne XML og bekreft resultatet. Feilmeldingen vises i resultatfilen ettersom testsaken mislyktes. Testsaken mislyktes fordi på grunn av det forventede resultatet fra "spec.js" ikke samsvarer med det faktiske resultatet fra en webside
Trinn 7) Bruk filen junitresult.xml for bevis eller resultatfiler.
Sammendrag:
Selv om selen kan gjøre noen av tingene som vinkelmåler gjør, er vinkelmåler den industrielle standarden og beste praksis for å teste AngularJS-applikasjoner. En vinkelmåler kan også administrere flere funksjoner i den og håndtere de dynamiske endringene av webelementer ved hjelp av ng-modell, ng-klikk ..., osv ... (Hvilket selen ikke kan gjøre).
Denne artikkelen er bidratt av Ranjith Kumar Enishetti