Protractor Testing Tutorial: Automation Tool Framework

Innehållsförteckning:

Anonim

Vad är gradskyddstestning?

PROTRACTOR är ett automatiserings- och end-to-end-beteendrivet testverktyg som spelar en viktig roll vid testning av AngularJS-applikationer och fungerar som en lösningsintegrator som kombinerar kraftfulla tekniker som Selen, Jasmine, webbdrivrutin etc. Syftet med Protractor Testing är inte bara för att testa AngularJS-applikationer utan också för att skriva automatiserade regressionstester för normala webbapplikationer.

I denna nybörjarhandledning lär du dig-

  • Varför behöver vi en gradskiva?
  • Gradskivainstallation
  • Exempel på AngularJS-applikationstestning med Protractor
  • Utförande av koden
  • Skapa rapporter med Jasmine Reporters

Varför behöver vi en gradskiva?

JavaScript används i nästan alla webbapplikationer. När applikationerna växer ökar JavaScript 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 JUnit eller Selen WebDriver.

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

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

AngularJS-applikationer är webbapplikationer som använder utökad HTML-syntax för att uttrycka webbapplikationskomponenter. Den 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 Selen Web-drivrutin?

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

Gradskivan är ett test-ramverk från början till slut för Angular JS-baserade applikationer. Medan de flesta ramar fokuserar på att genomföra enhetstester för Angular JS-applikationer, fokuserar Protractor på att testa applikationens faktiska funktionalitet.

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

  1. Selen

    Du hittar Selenium-installationsstegen 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 de här installationsstegen i följande länk. (https://www.guru99.com/download-install-node-js.html)

Gradskivainstallation

Steg 1) Öppna kommandotolken och skriv "npm install -g gradskiva" och tryck Enter .

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

Steg 2) Kontrollera installationen och versionen med " Protractor --version ". Om det lyckas kommer det 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 praxis)

Steg 3) Uppdatera webbdrivrutinhanteraren. Webdriverhanteraren används för att köra testerna mot den vinklade webbapplikationen i en specifik webbläsare. När Protractor har installerats måste webbdrivrutinhanteraren uppdateras till den senaste versionen. Detta kan göras genom att köra följande kommando i kommandotolken.

webdriver-manager update

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

När Protractor har använts för att köra ett test, laddas och körs testet automatiskt i relevant webbläsare. För att starta webbdrivrutinhanteraren 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 ser du faktiskt att webbdrivrutinen körs i bakgrunden.

Exempel på AngularJS-applikationstestning med Protractor

Protractor behöver två filer för att köras, en spec- fil och en konfigurationsfil .

  1. Konfigurationsfil : Den här filen hjälper graden till var testfilerna placeras (specs.js) och för att prata med Selen-servern (Selen-adress). Chrome är standardwebbläsaren för Protractor.
  1. Spec-fil: Den här filen innehåller logik och lokaliserare för att interagera med applikationen .

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

Steg 2) I detta steg,

  1. Ange namnet "Guru99"
  2. I utgångstexten "Hello Guru99" ses.

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

Koda:

Vi måste förbereda konfigurationsfilen (conf.js) och spec-filen (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!');});});

Kodförklaring av spec.js:

  1. beskriver (Enter GURU99 Name ", function ()

    Syntaxen beskrivs från Jasmine-ramverket. Här "beskriv" ("Ange GURU99-namn") definieras vanligtvis komponenter i ett program, som kan vara en klass eller funktion etc. I kodsviten som kallas "Ange GURU99" är det bara en sträng och inte en kod.

  2. it ('ska lägga till ett namn som GURU99', funktion ()
  3. browser.get ('https://angularjs.org')

    Som i Selenium Webdriver browser.get öppnar en ny webbläsarinstans med nämnd URL.

  4. element (by.model ('ditt namn')). sendKeys ('GURU99')

    Här hittar vi webbelementet med hjälp av modellnamnet som "ditt namn", vilket är värdet av "ng-modell" på webbsidan. Kontrollera skärmbilden nedan-

  1. 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 lagrar dess värde i en variabel "guru" .

  2. förvänta dig (guru.getText ()). toEqual ('Hej GURU99!')

    Slutligen verifierar vi texten som vi har från webbsidan (med 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. selenAddress: 'http: // localhost: 4444 / wd / hub'

    Konfigurationsfilen berättar för Protractor platsen för Selenium-adressen för att prata med Selenium WebDriver.

  2. specifikationer: ['spec.js']

    Denna rad berättar Protractor var testfilerna spec.js ligger

Utförande av koden

Här först ändrar vi katalogsökvägen eller navigerar till mappen där confi.js och spec.js placeras i vårt system .

Följ följande steg.

Steg 1) Öppna kommandotolken.

Steg 2) Se till att selen web manager för drivrutiner är igång. För att ge kommandot som "webdriver-manager start" och tryck Enter .

(Om selen webbdrivrutin inte är igång kan vi inte fortsätta med ett test eftersom Gradskiva inte kan 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.

Förklaring:

  • Här kommer Protractor att köra konfigurationsfilen med en specifik specifik fil i den.
  • Vi kan se selen-servern som körs på " http: // localhost: 4444 / wd / hub " som vi har gett i conf.js-filen.
  • Här kan också se resultatet hur många som passeras och fel som i ovanstående skärmdump .

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

Steg 1) Öppna och ändra förväntat resultera i spec.js till "'Hej ändra 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 filen spec.js och upprepa ovanstående steg i avsnittet "Utförande av koden"

Utför nu stegen ovan.

Resultat:

Vi kan se resultatet som misslyckats indikeras med "F" på skärmdumpen med anledningen "Förväntat" Hej GURU99! " att motsvara "Hej ändra GURU99!". Det visar också hur många fel som påträffas när kod körs.

Kan vi uppnå samma sak med Selenium-webbdrivrutinen?

Ibland kan vi identifiera webbelementen i AngularJS-applikationer med hjälp av XPath eller CSS-väljaren från Selenium-webbdrivrutinen. Men i AngularJS-applikationer kommer elementen att genereras och ändras dynamiskt. Så Gradskiva är bättre praxis att arbeta med AngularJS-applikationer.

Skapa rapporter med Jasmine Reporters

Protractor stöder Jasmine-reportrar för att generera testrapporter. I det här avsnittet använder vi 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 att göra detta, 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 kommandot kommer att installera jasmine rapporter nodmoduler lokalt medel från katalogen där vi kör kommandot i kommandotolken.

  1. Öppna kommandotolken kör följande kommando för global installation
npm install -g jasmine-reporters@^2.0.0

I den här handledningen installerar vi jasminreporterna 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" borde finnas tillgängligt om det har installerats framgångsrikt som i snapshot nedan.

Steg 3) Lägg till följande färgade kod i 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 ger sökvägen var rapporten ska lagras.

Steg 4) Öppna kommandotolken och kör kommandotraktorn 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 när vårt testfall misslyckades. 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 om selen kan göra några av de saker som gradskiva 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 ng-modell, ng-klick ..., etc ... (Vilket selen inte kan göra).

Denna artikel har bidragit av Ranjith Kumar Enishetti