omtracTor-testvejledning: Framework for automatiseringsværktøjer

⚠️ Meddelelse om udfasning: omtractor er udfaset og arkiveretSupporten ophørte i august 2023, og Angular CLI droppede sin Protractor-bygger efter Angular 15. Vælg dramatiker, Cypress, WebdriverIO eller TestCafe for nye ende-til-ende testGennemgangen nedenfor forbliver for ældre suiter.

Hvorfor har vi brug for professionelletractor Framework?

JavaScript bruges i næsten alle webapplikationer. Efterhånden som applikationerne vokser, JavaScript øges også i størrelse og kompleksitet. I sådanne tilfælde bliver det en vanskelig opgave for testere at teste webapplikationen i forskellige scenarier.

Nogle gange er det svært at fange webelementerne i AngularJS-applikationer ved hjælp af JUnit or Selenium WebDriver.

omtractor er et Node.js-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 styre browseren med brugerhandlinger.

Så hvad er en AngularJS-applikation præcist?

AngularJS Applikationer er webapplikationer, der bruger udvidet HTML-syntaks til at udtrykke webapplikationskomponenter. Det bruges primært til dynamiske webapplikationer. Disse applikationer bruger mindre og fleksibel kode sammenlignet med normale webapplikationer. Bemærk, at AngularJS 1.x ophørte med langtidssupport den 31. december 2021, så sådanne applikationer er ældre i dag.

Hvorfor kan vi ikke finde AngularJS webelementer ved hjælp af Normal Selenium WebDriver?

AngularJS-applikationer har nogle ekstra HTML-attributter som ng-repeater, ng-controller, ng-model osv., som ikke er inkluderet i Selenium lokatorer. Selenium er ikke i stand til at identificere disse webelementer ved hjælp af Selenium kode. Så, Protractor på toppen af Selenium kan håndtere og kontrollere disse attributter i webapplikationer.

omtractor er et end-to-end testframework til AngularJS-baserede applikationer. Mens de fleste frameworks fokuserer på at udføre enhedstest til AngularJS-applikationer, Protractor fokuserer på at teste en applikations faktiske funktionalitet.

Før vi starter Protractor, skal vi installere følgende:

1. Selenium: du kan finde Selenium installationstrinnene i Selenium WebDriver installationsvejledning.
2. NPM (Node.js): Vi skal installere Node.js for at installere Protractor. Du kan finde disse installationstrin i Guide til download og installation af Node.js.

omtractor-installation

Trin 1) Åbn kommandoprompten og skriv "npm install -g pro"tractor” og tryk på Enter.

Ovenstående kommando vil downloade de nødvendige filer og installere Protractor på klientsystemet, som vist nedenfor.

Trin 2) Tjek installationen og versionen vha "omtractor-version". Hvis det lykkes, vil det vise versionen som i nedenstående skærmbillede. Hvis ikke, udfør trin 1 igen.

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

Trin 3) Opdater WebDriver-administratoren. WebDriver-administratoren bruges til at køre testene mod Angular-webapplikationen i en bestemt browser. After ProtracNår tor er installeret, skal WebDriver-administratoren opdateres til den nyeste version. Dette kan gøres ved at køre følgende kommando i kommandoprompten.

webdriver-manager update

Driver-binærfilerne downloades som vist nedenfor.

Trin 4) Start WebDriver-administratoren. Dette trin vil køre WebDriver-administratoren i baggrunden og lytte til alle tests, der kører via pro.tracthor.

Når en test kører, indlæser WebDriver den automatisk i den relevante browser. Start manageren med kommandoen nedenfor.

webdriver-manager start

Konsollen rapporterer lytteadressen.

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 WebDriver-administratoren køre i baggrunden.

Eksempel på AngularJS-applikationstest ved hjælp af ProtracTor

Med driveradministratoren kørende, Protractor skal bruge to filer for at køre, en spec fil og konfiguration fil.

1. KonfigurationsfilDenne fil hjælper protractor til hvor testfilerne er placeret (specs.js) og til at tale med Selenium server (Selenium Adresse). Chrome er standardbrowseren til Protracthor.
2. Spec fil: Denne fil indeholder logikken og lokalisatorerne til at interagere med applikationen.

Trin 1) Vi er nødt til at åbne https://angularjs.org og indtast teksten som "GURU99" i tekstboksen "Indtast et navn her".

Trin 2) I dette trin,

1. Indtastede navnet "Guru99 "
2. I outputteksten "Hej Guru99″ er set.

Trin 3) Nu skal vi fange teksten fra websiden efter at have indtastet navnet og skal verificere med den forventede tekst.

Code:

Vi skal forberede konfigurationsfilen (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!');
  });
});

Code Forklaring af spec.js:

1. beskrive('Indtast GURU99-navn', function()Beskrivelsessyntaksen er fra Jasmin-rammeHer definerer "beskriv" ('Indtast GURU99-navn') typisk komponenter i en applikation, som kan være en klasse eller funktion osv. I kodepakken kaldet "Indtast GURU99" er det blot en streng og ikke en kode.
2. it('skal tilføje et navn som GURU99', funktion()
3. browser.get('https://angularjs.org')Som som i Selenium WebDriver browser.get åbner en ny browserinstans med de nævnte URL.
4. element(by.model('ditnavn')).send nøgler('GURU99') Her finder vi webelementet ved at bruge modelnavnet som "ditNavn", hvilket er værdien af ​​"ng-model" på websiden. Se skærmbilledet nedenfor -

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Her finder vi webelementet vha. XPath og gemme dens værdi i en variabel "guru".
6. forvente(guru.getText()).til Lige('Hej GURU99!') Til sidst bekræfter vi teksten, 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']
};

Code Forklaring af conf.js

1. seleniumAdresse: 'http://localhost:4444/wd/hub'Konfigurationsfilen fortæller Protracfor placeringen af Selenium Adresse at tale med Selenium WebDriver.
2. specs: ['spec.js']Denne linje fortæller Protracfor placeringen af ​​testfiler spec.js

Udførelse af Code

Først skal du navigere til den mappe, hvor conf.js og spec.js er placeret, og derefter følge nedenstående trin..

Trin 1) Åbn kommandoprompten.

Trin 2) Sørg Selenium WebDriver manager er oppe og kører. Giv kommandoen "webdriver-manager start" og tryk Enter for at gøre det..

(Hvis Selenium WebDriver kører ikke, vi kan ikke fortsætte med en test som Protrac(tor kan ikke finde webdriveren til at håndtere webapplikationen)

Trin 3) Åbn en ny kommandoprompt og giv kommandoen som "omtractor conf.js” for at køre konfigurationsfilen. Kørslen afsluttes som vist nedenfor.

Forklaring:

• Her Protractor vil udføre konfigurationsfilen med den givne specifikationsfil i den.
• Vi kan se Selenium serveren kører på "http://localhost:4444/wd/hub” som vi har givet i filen conf.js.
• Her kan også se resultatet, hvor mange der er bestået og fejl som i ovenstående skærmbillede.

Et bestået resultat er nu blevet verificeret. Se derefter på et ikke-bestået resultat.

Trin 1) Åbn og ændring forventes at resultere i spec.js til “'Hello change 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 spec.js-filen, og gentag ovenstående trin i "Udførelse af Code”Sektion

Udfør nu ovenstående trin.

Resultat:

Vi kan se resultatet som mislykket angivet med 'F' på skærmbilledet med årsagen som "Forventede 'Hej GURU99!' til at svare til 'Hej skift GURU99!'. Den viser også, hvor mange fejl der opstår, når koden udføres.

Kan vi opnå det samme med Selenium WebDriver?

Nogle gange kan AngularJS-elementer findes med XPath- eller CSS-selektorer fra Selenium WebDriver. Disse elementer genereres dog dynamisk og rebound-aktiveres, så Protractor var den sikrere løsning til AngularJS-pakker.

Generer rapporter ved hjælp af Jasmine Reporters

omtracTor støtter Jasmine-reportere. Dette afsnit bruger JUnitXmlReporter til automatisk at generere testudførelsesrapporter i XML-format ved at følge nedenstående trin.

Installation af Jasmine Reporter

Der er to muligheder, lokal eller global

1. Åbn kommandoprompten udfør følgende kommando for at installere lokalt

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

Kommandoen ovenfor installerer jasmine-reporters lokalt, i den mappe hvor den køres.

2. Åbn kommandoprompten udfør følgende kommando til global installation

npm install –g jasmine-reporters@^2.0.0

Her er journalisterne installeret lokalt.

Trin 1) Udfør kommandoen.

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

fra kommandoprompten som nedenfor.

Trin 2) Tjek installationsmapperne i mappen. "Node_modules" bør være tilgængelig, hvis den er installeret med succes som i nedenstående snapshot.

Trin 3) Tilfø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 til, hvor rapporten skal gemmes.

Trin 4) Åbn kommandoprompten og udfør kommandoen fortractor conf.js.

Trin 5) Når du udfører ovenstående kode, vil junitresults.xml blive genereret i nævnte sti.

Trin 6) Åbn XML og bekræft resultatet. Fejlmeddelelsen vises i resultatfilen som vores Test sag er mislykket. Testtilfældet mislykkedes, fordi det forventede resultat fra "spec.js" ikke stemmer overens med det faktiske resultat fra en webside.

Trin 7) Brug filen junitresult.xml til beviser eller resultatfiler.

omtractor vs. moderne testautomatiseringsalternativer

Siden ProtracTor modtager ikke længere opdateringer. Teams, der planlægger nye suiter, skal vide, hvordan det klarer sig i forhold til de frameworks, som Angular-projekter nu migrerer til. Tabellen nedenfor sammenligner Pro.tracmed de tre alternativer, der oftest optræder i de ofte stillede spørgsmål nedenfor.

Hold med en eksisterende ProtracTor Suite bevæger sig generelt hurtigst til WebdriverIO, siden dens kommandostil og Selenium-baseret chaufførstyring forbliver tæt på, hvad Protractor-testere ved det allerede. Hold, der starter på en frisk, eller har brug for de hurtigste testkørsler, vælger oftere Cypress eller dramatiker i stedet.

Ofte Stillede Spørgsmål