ProtracVeiledning for tor-testing: Rammeverk for automatiseringsverktøy

⚠️ Varsel om avskrivning: Protractor er utdatert og arkivertStøtten ble avsluttet i august 2023, og Angular CLI droppet Pro-funksjonen sin.tractor-bygger etter Angular 15. Velg dramatiker, Cypress, WebdriverIO eller TestCafe for nye ende-til-ende testingGjennomgangen nedenfor gjelder fortsatt for eldre suiter.

Hvorfor trenger vi profftractor-rammeverket?

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 webapplikasjonen for ulike scenarier.

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

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

Så hva er egentlig en AngularJS-applikasjon?

AngularJS Applikasjoner er webapplikasjoner som bruker utvidet HTML-syntaks for å uttrykke webapplikasjonskomponenter. Det brukes hovedsakelig for dynamiske webapplikasjoner. Disse applikasjonene bruker mindre og fleksibel kode sammenlignet med vanlige webapplikasjoner. Merk at AngularJS 1.x forlot langtidsstøtten 31. desember 2021, så slike applikasjoner er eldre i dag.

Hvorfor kan vi ikke finne AngularJS-webelementer ved hjelp av Normal Selenium WebDriver?

AngularJS-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å, Protractor på toppen av Selenium kan håndtere og kontrollere disse attributtene i webapplikasjoner.

Protractor er et komplett testrammeverk for AngularJS-baserte applikasjoner. Mens de fleste rammeverk fokuserer på å utføre enhetstester for AngularJS-applikasjoner, Protractor fokuserer på å teste den faktiske funksjonaliteten til et program.

Før vi starter Protractor, må vi installere følgende:

1. Selenium: du kan finne Selenium installasjonstrinn i Selenium Installasjonsveiledning for WebDriver.
2. NPM (Node.js): Vi må installere Node.js for å installere Protractor. Du finner disse installasjonstrinnene i Nedlastings- og installasjonsveiledning for Node.js.

Protractor-installasjon

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

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

Trinn 2) Sjekk installasjonen og versjonen ved hjelp av «proff»tractor-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 WebDriver-behandleren. WebDriver-behandleren brukes til å kjøre testene mot Angular-webapplikasjonen i en bestemt nettleser. After Protractor er installert, må WebDriver-behandleren oppdateres til den nyeste versjonen. Dette kan gjøres ved å kjøre følgende kommando i ledeteksten.

webdriver-manager update

Driverbinærfilene lastes ned som vist nedenfor.

Trinn 4) Start WebDriver-behandleren. Dette trinnet vil kjøre WebDriver-behandleren i bakgrunnen og lytte til eventuelle tester som kjører via pro.tracThor.

Når en test kjører, laster WebDriver den automatisk inn i den aktuelle nettleseren. Start administratoren med kommandoen nedenfor.

webdriver-manager start

Konsollen rapporterer lytteadressen.

Hvis du nå går til følgende URL (http://localhost:4444/wd/hub/static/resource/hub.html) i nettleseren din, vil du faktisk se WebDriver-behandleren kjøre i bakgrunnen.

Eksempeltesting av AngularJS-applikasjon med Protractor

Med driverbehandleren kjørende, Protractor trenger to filer for å kjøre, en spec filen og konfigurasjon filen.

1. KonfigurasjonsfilDenne filen hjelper profftractor til der testfilene er plassert (specs.js) og for å snakke med Selenium server (Selenium Adresse). Chrome er standardnettleseren for ProtracThor.
2. Spesifikasjonsfil: Denne filen inneholder logikken og lokalisatorene for å samhandle med applikasjonen.

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

Trinn 2) I dette trinnet

1. Skriv inn navnet «Guru99 "
2. I utdatateksten «Hallo» Guru99 tommer er sett.

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

Code:

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

Code Forklaring av spec.js:

1. beskrive('Skriv inn GURU99-navn', function()Beskrivelsessyntaksen er fra Jasmine-rammeverketHer definerer «beskriv» («Skriv inn GURU99-navn») vanligvis komponenter i et program, som kan være en klasse eller funksjon osv. I kodepakken kalt «Skriv inn GURU99» er det 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 nettleserinstans med nevnte URL.
4. element(by.model('dittNavn')).sendTaster('GURU99') Her finner vi web-elementet ved å bruke modellnavnet som «dittNavn», som er verdien av «ng-modellpå 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']
};

Code Forklaring av conf.js

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

Utførelse av Code

Først navigerer du til mappen der conf.js og spec.js er plassert, og følger deretter trinnene nedenfor..

Trinn 1) Åpne ledeteksten.

Trinn 2) Sørge Selenium WebDriver-behandleren er oppe og kjører. For å gjøre det, gi kommandoen «webdriver-manager start» og trykk Enter..

(Hvis Selenium WebDriver er ikke oppe og kjører. Vi kan ikke fortsette med en test som Pro.trac(tor finner ikke webdriveren for å håndtere webapplikasjonen)

Trinn 3) Åpne en ny ledetekst og gi kommandoen som «proff»tractor conf.js for å kjøre konfigurasjonsfilen. Kjøringen fullføres som vist nedenfor.

Forklaring:

• Her Protractor vil kjøre konfigurasjonsfilen med den gitte spesifikasjonsfilen i.
• Vi kan se Selenium serveren 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.

Et bestått resultat er nå bekreftet. Se deretter på et mislykket resultat.

Trinn 1) Åpne og endringen forventes å 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 spec.js-filen og gjenta trinnene ovenfor for «Utførelse av Code" seksjon

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 når kode kjøres.

Kan vi oppnå det samme med Selenium WebDriver?

Noen ganger kan AngularJS-elementer finnes med XPath- eller CSS-selektorer fra Selenium WebDriver. Imidlertid genereres og rebounds disse elementene dynamisk, så Protractor var det tryggere alternativet for AngularJS-pakker.

Generer rapporter ved hjelp av Jasmine Reporters

ProtracTor støtter Jasmine-reportere. Denne delen bruker JUnitXmlReporter for å generere testkjøringsrapporter automatisk i XML-format, ved å følge trinnene nedenfor.

Installasjon av Jasmine Reporter

Det finnes to alternativer, lokalt eller globalt

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

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

Kommandoen ovenfor installerer jasmine-reporters lokalt, i katalogen der den kjøres.

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

npm install –g jasmine-reporters@^2.0.0

Her er reporterne installert 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 fortractor conf.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 mislyktes. Testtilfellet 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.

Protractor vs. moderne testautomatiseringsalternativer

Siden ProtracTor mottar ikke lenger oppdateringer, team som planlegger nye pakker må vite hvordan det står seg mot rammeverkene som Angular-prosjekter nå migrerer til. Tabellen nedenfor sammenligner Protracmed de tre alternativene som dukker opp oftest i vanlige spørsmål nedenfor.

Lag med en eksisterende profftracTor Suite beveger seg vanligvis raskest til WebdriverIO, siden kommandostilen og Selenium-basert sjåføradministrasjon holder seg nær det ProtracTor-testere vet det allerede. Lag som starter på nytt, eller trenger de raskeste testkjøringene, velger oftere Cypress eller dramatiker i stedet.

Spørsmål og svar