Tutorial for vinkelmålertesting: Automation Tool Framework

Hvorfor trenger vi Protractor Framework?

JavaSkript brukes i nesten alle webapplikasjoner. Etter hvert som applikasjonene vokser, JavaScript øker også i størrelse og kompleksitet. I slike tilfeller blir det en vanskelig oppgave for testere å teste nettapplikasjonen for ulike scenarier.

Noen ganger er det vanskelig å fange opp webelementene i AngularJS-applikasjoner ved å bruke JUnit or Selenium WebDriver.

Gradskive er et NodeJS-program som er skrevet inn JavaSkripter og kjører med Node for å identifisere webelementene i AngularJS-applikasjoner, og den bruker også WebDriver til å kontrollere nettleseren med brukerhandlinger.

Ok, nå skal vi diskutere hva en AngularJS-applikasjon egentlig er?

AngularJS-applikasjoner er webapplikasjoner som bruker utvidet HTMLs syntaks for å uttrykke webapplikasjonskomponenter. Den brukes hovedsakelig til dynamiske webapplikasjoner. Disse applikasjonene bruker mindre og fleksibel kode sammenlignet med vanlige nettapplikasjoner.

Hvorfor kan vi ikke finne Angular JS-webelementer ved å bruke Normal Selenium Web driver?

Angular JS-applikasjoner har noen ekstra HTML-attributter som ng-repeater, ng-controller, ng-model.. osv. som ikke er inkludert i Selenium lokalisatorer. Selenium er ikke i stand til å identifisere disse webelementene ved hjelp av Selenium kode. Så, vinkelmåler på toppen av Selenium kan håndtere og kontrollere disse attributtene i webapplikasjoner.

Gradskiven er et ende-til-ende-testrammeverk for Angular JS-baserte applikasjoner. Mens de fleste rammeverk fokuserer på å utfø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:

1. SeleniumDu kan finne den Selenium Installasjonstrinn i følgende lenker, (https://www.guru99.com/installing-selenium-webdriver.html )
2. 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 )

Montering av vinkelmåler

Trinn 1) Åpne ledeteksten og skriv "npm install -g gradskive" og trykk Enter.

Kommandoen ovenfor vil laste ned de nødvendige filene og installere Protractor på klientsystemet.

Trinn 2) Sjekk installasjonen og versjonen ved hjelp av "Gradskive – versjon». Hvis den lykkes, vil den vise versjonen som på skjermbildet nedenfor. Hvis ikke, utfør trinn 1 på nytt.

(Trinn 3 og 4 er valgfrie, men anbefales for bedre praksis)

Trinn 3) Oppdater webdriverbehandlingen. Nettdriverbehandleren brukes til å kjøre testene mot vinkelnettapplikasjonen i en bestemt nettleser. Etter at Protractor er installert, må nettdriverbehandleren oppdateres til den nyeste versjonen. Dette kan gjøres ved å kjøre følgende kommando i ledeteksten.

webdriver-manager update

Trinn 4) Start nettdriverbehandlingen. Dette trinnet vil kjøre nettdriverbehandleren i bakgrunnen og vil lytte til alle tester som kjøres via gradskiven.

Når Protractor er brukt til å kjøre en test, vil webdriveren automatisk laste og kjøre testen i den aktuelle nettleseren. For å starte webdriverbehandlingen, 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 webdriverbehandlingen kjøre i bakgrunnen.

Prøv AngularJS-applikasjonstesting ved hjelp av gradskive

Gradskive trenger to filer for å kjøre, en spec filen og konfigurasjon filen.

1. Konfigurasjonsfil: Denne filen hjelper vinkelmåleren til hvor testfilene er plassert (specs.js) og å snakke med Selenium server (Selenium Adresse). Chrome er standard nettleser for Protractor.

2. Spesifikasjonsfil: Denne filen inneholder logikken og lokalisatorene for å samhandle med applikasjonen.

Trinn 1) Vi må logge inn https://angularjs.org og skriv inn teksten som "GURU99" i tekstboksen "Skriv inn et navn her".

Trinn 2) I dette trinnet

1. Skrev inn navnet "Guru99"
2. I utdatateksten vises "Hello Guru99".

Trinn 3) Nå må vi fange teksten fra nettsiden etter å ha skrevet inn navnet og må bekrefte med den forventede teksten.

Kode:

Vi må forberede konfigurasjonsfilen (conf.js) og spesifikasjonsfil (spec.js) som nevnt ovenfor.

Logikken til 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:

1. beskrive('Enter GURU99 Name', function()Describe-syntaksen er fra Jasmine-rammeverket. Her definerer "describe" ('Enter GURU99 Name') vanligvis komponenter i en applikasjon, som kan være en klasse eller funksjon osv. I kodepakken kalt "Enter GURU99," det er bare en streng og ikke en kode.
2. it('bør legge til et navn som GURU99', funksjon()
3. browser.get('https://angularjs.org')Som som i Selenium Webdriver browser.get vil åpne en ny nettleserforekomst med nevnt URL.
4. element(by.model('dittNavn')).sendTaster('GURU99') Her finner vi webelementet som bruker modellnavnet som "dittNavn", som er verdien av "ng-modell" på nettsiden. Sjekk skjermbildet nedenfor-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Her finner vi webelementet ved å bruke XPath og lagre verdien i en variabel "guru".
6. forvente(guru.getText()).til lik('Hei GURU99!') Til slutt bekrefter vi teksten som vi har fått fra nettsiden (ved hjelp av gettext() ) med forventet tekst .

Logikken til conf.js:

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

Kode Forklaring av conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' Konfigurasjonsfilen forteller vinkelmåleren plasseringen av Selenium Adresse å snakke med Selenium WebDriver.
2. specs: ['spec.js']Denne linjen forteller vinkelmåleren plasseringen av testfilene spec.js

Gjennomføring av koden

Her vil vi først 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) Sørg for at selenium web driver manager er oppe og går. For det gi kommandoen som "webdriver-manager start" og trykk Enter.

(Hvis selen nettdriver ikke er oppe og kjører, kan vi ikke fortsette med en test ettersom vinkelmåleren ikke finner nettdriveren for å håndtere webapplikasjonen)

Trinn 3) Åpne en ny ledetekst og gi kommandoen som «gradmåler conf.js» for å kjøre konfigurasjonsfilen.

Forklaring:

• Her vil Protractor kjøre konfigurasjonsfilen med gitt spesifikasjonsfil i den.
• Vi kan se selenserveren kjøre 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 verifisert resultatet når det er bestått eller som forventet. La oss nå se på mislykket resultat også.

Trinn 1) Åpne og endring forventes å resultere i spec.js til "'Hello change 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 spec.js-filen og gjenta trinnene ovenfor i delen "Utførelse av koden".

Utfør nå trinnene ovenfor.

Resultat:

Vi kan se resultatet som mislykket angitt med 'F' i skjermbildet med årsaken som "Forventet 'Hei GURU99!' til lik 'Hallo endre GURU99!'. Den viser også hvor mange feil som oppstår ved utføring av kode.

Kan vi oppnå det samme med Selenium nettdriver?

Noen ganger kan vi identifisere webelementene til AngularJS-applikasjoner ved å bruke XPath eller CSS-velger fra Selenium web-driver. Men i AngularJS-applikasjoner vil elementene genereres og endres dynamisk. Så Protractor er den beste praksisen for å jobbe med AngularJS-applikasjoner.

Generer rapporter ved hjelp av Jasmine Reporters

Gradskive støtter Jasmine-reportere 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 på, lokalt eller globalt

1. Åpne ledeteksten utfør følgende kommando for å installere lokalt

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

Ovenfor kommando vil installere jasmine reports node-moduler lokalt betyr fra katalogen der vi kjører kommandoen i ledeteksten.

2. Åpne ledeteksten utfør følgende kommando for global installasjon

npm install –g jasmine-reporters@^2.0.0

I denne opplæringen vil vi installere jasmin-reporterne lokalt.

Trinn 1) Utfør kommandoen.

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

fra ledeteksten som nedenfor.

Trinn 2) Sjekk 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 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 av kode:

I kode genererer vi rapporten "JUnitXmlReporter” og gir banen hvor rapporten skal lagres.

Trinn 4) Åpne ledeteksten og utfør kommandoen gradskive konf.js.

Trinn 5) Når du kjører koden ovenfor, vil junitresults.xml bli generert i den nevnte banen.

Trinn 6) Åpne XML og bekreft resultatet. Feilmeldingen vises i resultatfilen som vår Testsak er mislykket. Testsaken mislyktes fordi det forventede resultatet fra "spec.js" ikke samsvarer med det faktiske resultatet fra en nettside

Trinn 7) Bruk filen junitresult.xml for bevis eller resultatfiler.

Sammendrag

Selv Selenium kan gjøre noen av tingene som vinkelmåleren gjør, er vinkelmåleren 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.. (Noe selen ikke kan gjøre).