Handledning för vinkelmätare: Automation Tool Framework

Varför behöver vi Protractor Framework?

JavaSkript används i nästan alla webbapplikationer. När 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.

Gradskiva är ett NodeJS-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.

Okej, nu ska vi diskutera vad en AngularJS-applikation egentligen är?

AngularJS-applikationer är webbapplikationer som använder utökad HTMLs syntax för att uttrycka webbapplikationskomponenter. Det används främst för dynamiska webbapplikationer. Dessa applikationer använder mindre och flexibel kod jämfört med vanliga webbapplikationer.

Varför kan vi inte hitta Angular JS webbelement med Normal Selenium Webbdrivrutin?

Angular JS-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 koda. Så, gradskiva på toppen av Selenium kan hantera och kontrollera dessa attribut i webbapplikationer.

Gradskivan är ett testramverk för Angular JS-baserade applikationer. Medan de flesta ramverk fokuserar på att utföra enhetstester för Angular JS-applikationer, fokuserar Protractor på att testa den faktiska funktionaliteten hos en applikation.

Innan vi startar Protractor måste vi installera följande:

1. SeleniumDu kan hitta Selenium Installationssteg i följande länkar, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js)NodeJS-installation, vi måste installera NodeJS för att installera Protractor. Du hittar dessa installationssteg i följande länk. ( https://www.guru99.com/download-install-node-js.html )

Installation av gradskivor

Steg 1) Öppna kommandotolken och skriv "npm installera –g gradskiva" och tryck på Enter.

Ovanstående kommando kommer att ladda ner de nödvändiga filerna och installera Protractor på klientsystemet.

Steg 2) Kontrollera installationen och versionen med "Gradskiva –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 webbdrivrutinshanteraren. Webbdrivrutinshanteraren används för att köra testen mot den kantiga webbapplikationen i en specifik webbläsare. Efter att Protractor har installerats måste webbdrivrutinshanteraren uppdateras till den senaste versionen. Detta kan göras genom att köra följande kommando i kommandotolken.

webdriver-manager update

Steg 4) Starta webbdrivrutinshanteraren. Detta steg kommer att köra webbdrivrutinshanteraren i bakgrunden och kommer att lyssna på alla tester som körs via gradskivan.

När Protractor väl har använts för att köra ett test, kommer webbdrivrutinen automatiskt att ladda och köra testet i den relevanta webbläsaren. För att starta webbdrivrutinshanteraren måste följande kommando köras från kommandotolken.

webdriver-manager start

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 webbdrivrutinshanteraren köra i bakgrunden.

Prova AngularJS-applikationstestning med gradskiva

Gradskiva behöver två filer för att köras, en spec fil och konfiguration fil.

1. Inställningsfil: Denna fil hjälper gradskivan till var testfilerna är placerade (specs.js) och att prata med Selenium server (Selenium Adress). Chrome är standardwebbläsaren för Protractor.

2. Spec fil: Den här filen innehåller logiken och lokaliseringarna för att interagera med applikationen.

Steg 1) Vi måste logga in 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 utgångstexten syns "Hello Guru99".

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.

Koda:

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

Kod Förklaring av spec.js:

1. beskriva('Ange GURU99 Name', function()Describe-syntaxen kommer från Jasmine-ramverket. Här definierar "describe" ('Ange GURU99 Name') vanligtvis komponenter i en applikation, som kan vara en klass eller funktion etc. I kodsviten kallas "Enter GURU99", det är 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 kommer att öppna en ny webbläsarinstans med nämnda URL.
4. elementet(by.model('dittNamn')).skicka nycklar('GURU99') Här hittar vi webbelementet som använder modellnamnet som "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']
};

Kod Förklaring av conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' Konfigurationsfilen talar om för gradskivan var Selenium Adress att prata med Selenium WebDriver.
2. specs: ['spec.js']Denna rad talar om för Protractor var testfilerna finns spec.js

Genomförande av Koden

Här kommer vi först att ändra katalogsökvägen eller navigera till mappen där confi.js och spec.js är placerade i vårt system.

Följ följande steg.

Steg 1) Öppna kommandotolken.

Steg 2) Se till att selenium web driver manager är igång. För det, ge kommandot som "webdriver-manager start" och tryck på Enter.

(Om selenwebbdrivrutinen inte är igång kan vi inte fortsätta med ett test eftersom gradskivan inte kan hitta webbdrivrutinen för att hantera webbapplikationen)

Steg 3) Öppna en ny kommandotolk och ge kommandot som "gradskiva conf.js" för att köra konfigurationsfilen.

Förklaring:

• Här kommer Protractor att köra konfigurationsfilen med en given spec-fil i den.
• Vi kan se selenservern köra 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.

Okej, vi har verifierat resultatet när det är godkänt eller som förväntat. Låt oss nu titta på misslyckade resultat också.

Steg 1) Öppna och ändra 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 stegen ovan i avsnittet "Utförande av koden".

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!'. Det visar också hur många fel som uppstår när koden körs.

Kan vi uppnå samma sak med Selenium webbdrivrutin?

Ibland kan vi identifiera webbelementen i AngularJS-applikationer med hjälp av XPath eller CSS-väljare från Selenium webbdrivrutin. Men i AngularJS-applikationer kommer elementen att genereras och ändras dynamiskt. Så Protractor är den bästa metoden att arbeta med AngularJS-applikationer.

Generera rapporter med Jasmine Reporters

Gradskiva stödjer Jasmine-reporter för att generera testrapporter. I det här avsnittet kommer vi att använda JunitXMLReporter för att generera testkörningsrapporter automatiskt i XML-format.

Följ stegen nedan för att generera rapporter i XML-format.

Installation av Jasmine Reporter

Det finns två sätt du kan göra detta på, 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

Ovan kommando kommer att installera jasmine reports nod-moduler lokalt betyder från katalogen där vi kör kommandot i kommandotolken.

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

npm install –g jasmine-reporters@^2.0.0

I den här handledningen kommer vi att installera jasminreportrarna 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 gradskiva 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 matchas med det faktiska resultatet från en webbsida

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

Sammanfattning

Även Selenium kan göra några av de saker som gradskivan gör, är gradskivan den industriella standarden och bästa praxis för att testa AngularJS-applikationer. En gradskiva kan också hantera flera funktioner i den och hantera de dynamiska förändringarna av webbelement med hjälp av ng-modell, ng-klicka.., etc.. (Vilket selen inte kan göra).