ProtracTor-testningshandledning: Ramverk för automatiseringsverktyg

⚠️ Meddelande om utfasning: Protractor är föråldrad och arkiveradSupporten upphörde i augusti 2023 och Angular CLI tog bort sin Protractor-byggare efter Angular 15. Välj Dramatiker, Cypress, WebdriverIO eller TestCafe för nya test från slut till slutGenomgången nedan gäller fortfarande för äldre sviter.

Varför behöver vi proffstractor-ramverket?

JavaSkript används i nästan alla webbapplikationer. Allt eftersom applikationerna växer, JavaScript ökar också i storlek och komplexitet. I sådana fall blir det en svår uppgift för testare att testa webbapplikationen för olika scenarier.

Ibland är det svårt att fånga webbelementen i AngularJS-applikationer med hjälp av JUnit or Selenium WebDriver.

Protractor är ett Node.js-program som är skrivet i JavaSkripter och körs med Node för att identifiera webbelementen i AngularJS-applikationer, och den använder också WebDriver för att styra webbläsaren med användaråtgärder.

Så vad är egentligen en AngularJS-applikation?

AngularJS Applikationer är webbapplikationer som använder utökad HTML-syntax för att uttrycka webbapplikationskomponenter. Det används främst för dynamiska webbapplikationer. Dessa applikationer använder mindre och mer flexibel kod jämfört med vanliga webbapplikationer. Observera att AngularJS 1.x lämnade långtidssupporten den 31 december 2021, så sådana applikationer är äldre applikationer idag.

Varför kan vi inte hitta AngularJS-webbelement med hjälp av Normal Selenium WebDriver?

AngularJS-applikationer har några extra HTML-attribut som ng-repeater, ng-controller, ng-model.., etc. som inte ingår i Selenium lokaliserare. Selenium kan inte identifiera dessa webbelement med hjälp av Selenium kod. Så, Protractor på toppen av Selenium kan hantera och kontrollera dessa attribut i webbapplikationer.

Protractor är ett heltäckande testramverk för AngularJS-baserade applikationer. Medan de flesta ramverk fokuserar på att utföra enhetstester för AngularJS-applikationer, Protractor fokuserar på att testa en applikations faktiska funktionalitet.

Innan vi börjar Protractor, vi behöver installera följande:

1. Selenium: du kan hitta Selenium installationssteg i Selenium Installationsguide för WebDriver.
2. NPM (Node.js): Vi behöver installera Node.js för att installera Protractor. Du hittar dessa installationssteg i Nedladdnings- och installationsguide för Node.js.

Protractor-installation

Steg 1) Öppna kommandotolken och skriv "npm install -g pro"tractor” och tryck på Enter.

Ovanstående kommando laddar ner nödvändiga filer och installerar Protractor på klientsystemet, som visas nedan.

Steg 2) Kontrollera installationen och versionen med "protractor-version. " Om den lyckas kommer den att visa versionen som i skärmdumpen nedan. Om inte, utför steg 1 igen.

(Steg 3 och 4 är valfria men rekommenderas för bättre övning)

Steg 3) Uppdatera WebDriver-hanteraren. WebDriver-hanteraren används för att köra tester mot Angular-webbapplikationen i en specifik webbläsare. After Protractor är installerat måste WebDriver-hanteraren uppdateras till den senaste versionen. Detta kan göras genom att köra följande kommando i kommandotolken.

webdriver-manager update

Drivrutinsbinärfilerna laddas ner enligt nedan.

Steg 4) Starta WebDriver-hanteraren. Detta steg kör WebDriver-hanteraren i bakgrunden och lyssnar på alla tester som körs via pro.tracthor.

När ett test körs laddar WebDriver det automatiskt i relevant webbläsare. Starta hanteraren med kommandot nedan.

webdriver-manager start

Konsolen rapporterar lyssningsadressen.

Om du nu går till följande URL (http://localhost:4444/wd/hub/static/resource/hub.html) i din webbläsare kommer du faktiskt att se WebDriver-hanteraren köras i bakgrunden.

Exempel på AngularJS-applikationstestning med Protractor

Med drivrutinshanteraren igång, Protractor behöver två filer för att köras, en spec fil och konfiguration fil.

1. InställningsfilDen här filen hjälper proffstractor till var testfilerna är placerade (specs.js) och för att prata med Selenium server (Selenium Adress). Chrome är standardwebbläsaren för Protracthor.
2. Spec fil: Den här filen innehåller logiken och lokaliseringarna för att interagera med applikationen.

Steg 1) Vi måste öppna https://angularjs.org och skriv in texten som "GURU99" i textrutan "Ange ett namn här".

Steg 2) I detta steg

1. Angav namnet "Guru99 "
2. I utmatningstexten "Hej Guru99″ syns.

Steg 3) Nu måste vi fånga texten från webbsidan efter att ha angett namnet och måste verifiera med den förväntade texten.

Code:

Vi måste förbereda konfigurationsfilen (conf.js) och spec-fil (spec.js) som nämnts ovan.

Logik för 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 Förklaring av spec.js:

1. beskriva('Ange GURU99-namn', function()Beskrivningssyntaxen är från Jasmine-ramverketHär definierar "beskriv" ('Enter GURU99 Name') vanligtvis komponenter i en applikation, vilka kan vara en klass eller funktion etc. I kodsviten som kallas "Enter GURU99" är det bara en sträng och inte en kod.
2. it('ska lägga till ett namn som GURU99', function()
3. browser.get('https://angularjs.org')Som som i Selenium WebDriver browser.get öppnar en ny webbläsarinstans med nämnda URL.
4. elementet(by.model('dittNamn')).skicka nycklar('GURU99') Här söker vi efter webbelementet med modellnamnet "dittNamn", vilket är värdet för "ng-modell” på webbsidan. Kolla skärmdumpen nedan-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Här hittar vi webbelementet med XPath och lagra dess värde i en variabel "guru".
6. förvänta(guru.getText()).till Lika('Hej GURU99!') Slutligen verifierar vi texten som vi har fått från webbsidan (med hjälp av gettext() ) med förväntad text .

Logik för conf.js:

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

Code Förklaring av conf.js

1. seleniumAdress: 'http://localhost:4444/wd/hub'Konfigurationsfilen talar om för Protracför platsen för Selenium Adress att prata med Selenium WebDriver.
2. specifikationer: ['spec.js']Denna rad talar om för Protracför platsen för testfiler spec.js

Utförande av Code

Navigera först till mappen där conf.js och spec.js finns och följ sedan stegen nedan..

Steg 1) Öppna kommandotolken.

Steg 2) Se till Selenium WebDriver-hanteraren är igång. För att göra det, ge kommandot "webdriver-manager start" och tryck Enter..

(Om Selenium WebDriver fungerar inte, vi kan inte fortsätta med ett test som Protractor kan inte hitta webbdrivrutinen för att hantera webbapplikationen)

Steg 3) Öppna en ny kommandotolk och ge kommandot som "protractor conf.js” för att köra konfigurationsfilen. Körningen avslutas enligt nedan.

Förklaring:

• Här Protractor kommer att köra konfigurationsfilen med den givna spec-filen i.
• Vi kan se Selenium servern som körs på "http://localhost:4444/wd/hub” som vi har angett i filen conf.js.
• Här kan också se resultatet hur många som godkänts och misslyckanden som i skärmdumpen ovan.

Ett godkänt resultat har nu verifierats. Titta sedan på ett misslyckat resultat.

Steg 1) Öppna och ändringen förväntas resultera i spec.js till “'Hello change GURU99” som nedan.

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

Steg 2) Spara spec.js-filen och upprepa ovanstående steg i "Utförande av Code" sektion

Utför nu stegen ovan.

Resultat:

Vi kan se resultatet som misslyckat indikerat med 'F' i skärmdumpen med anledningen som "Väntade 'Hej GURU99!' till lika med 'Hej ändra GURU99!'. Den visar också hur många fel som uppstår när kod körs.

Kan vi uppnå samma sak med Selenium WebDriver?

Ibland kan AngularJS-element hittas med XPath- eller CSS-selektorer från Selenium WebDriver. Emellertid genereras och återställs dessa element dynamiskt, så Protractor var det säkrare alternativet för AngularJS-sviter.

Generera rapporter med Jasmine Reporters

Protractor stöder Jasmine-reportrar. Det här avsnittet använder JUnitXmlReporter för att generera testkörningsrapporter automatiskt i XML-format genom att följa stegen nedan.

Installation av Jasmine Reporter

Det finns två alternativ, lokalt eller globalt

1. Öppna kommandotolken, kör följande kommando för att installera lokalt

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

Kommandot ovan installerar jasmine-reporters lokalt, inuti katalogen där det körs.

2. Öppna kommandotolken, kör följande kommando för global installation

npm install –g jasmine-reporters@^2.0.0

Här är reportrarna installerade lokalt.

Steg 1) Utför kommandot.

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

från kommandotolken som nedan.

Steg 2) Kontrollera installationsmapparna i katalogen. ”Node_modules” bör vara tillgänglig om den är framgångsrikt installerad som i ögonblicksbilden nedan.

Steg 3) Lägg till följande färgade kod till en existerande 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)
          );
     }
   };

Förklaring av kod:

I kod genererar vi rapporten "JUnitXmlReporter” och ange sökvägen där rapporten ska lagras.

Steg 4) Öppna kommandotolken och kör kommandot förtractor conf.js.

Steg 5) När du kör ovanstående kod kommer junitresults.xml att genereras i nämnda sökväg.

Steg 6) Öppna XML och verifiera resultatet. Felmeddelandet visas i resultatfilen som vår Testfall är misslyckad. Testfallet misslyckades eftersom det förväntade resultatet från "spec.js" inte matchar det faktiska resultatet från en webbsida.

Steg 7) Använd filen junitresult.xml för bevis eller resultatfiler.

Protractor vs Modern Test Automation Alternativ

Sedan ProtracTor får inte längre uppdateringar, team som planerar nya programsviter behöver veta hur det står sig mot de ramverk som Angular-projekt nu migrerar till. Tabellen nedan jämför Protracmed de tre alternativen som förekommer oftast i FAQ:na nedan.

Lag med en befintlig proffstractor-sviten rör sig generellt snabbast till WebdriverIO, eftersom dess kommandostil och Selenium-baserad förarhantering håller sig nära vad Protractor-testare vet redan. Team som börjar om på nytt, eller behöver de snabbaste testkörningarna, väljer oftare Cypress eller dramatiker istället.

Vanliga frågor