Meny

Protractor Test Tool för End-to-End Testing av AngularJS-applikationer

protractor testing tool

Prova Vårt Instrument För Att Eliminera Problem

Vad är gradskiva?

Gradskivan är ett automatiseringsprovningsverktyg för testning av webbapplikationer; kombinerar kraftfulla tekniker som Jasmine, Selen Webdriver, Node.js etc.

Protractor-testverktyget är ett slut-till-slut-beteendestyrt testramverk utformat med tanke på Angular JS-applikationer. Även om det kanske låter som Protractor inte fungerar med icke-vinklade JS-applikationer, så gör det det.

Det fungerar lika bra med både vinklade och icke-vinklade JS-applikationer.

Utforska gärna hela AngularJS-serien av handledning . I vår tidigare handledning, skillnaden mellan vinkelversioner förklarades i detalj.

Tutorial för gradskyddstestning

Vad du kommer att lära dig:

Gradskiva mot Selen WebDriver

Vad gör Protractor annorlunda än traditionellt Selen WebDriver ?

Ta en stund att svara på dessa frågor:

  • Är det en kamp för att avgöra när exakt webbsidan slutligen laddas (alla asynkrona element är klara och bearbetade)?
  • Är du trött på att lägga till väntetider och sovplatser i din kod?
  • Vill du bli av med den besvärliga ansträngningen att hitta vinkelelementen?
  • Frustrerad med att hitta element med förändrade ID?
  • Vill du skapa din egen lokaliserare?
  • Skriver du lång kod även för de enklaste påståendena?
  • Är du en JavaScript-entusiast / fan?

Om du svarade ja på dessa frågor, Gradskiva kan hjälpa.

Det är ett omslag byggt ovanpå Selenium Webdriver och ger därmed alla funktioner i Selenium tillsammans med många användbara tillägg. Det ger:

Funktioner

Det ger:

1) WaitForAngular

vilken typ av e-postmeddelanden finns det

Från dokumentation:

' Be WebDriver att vänta tills Angular har slutfört rendering och har inga utestående $ http- eller $ timeout-samtal innan du fortsätter. Observera att Protractor automatiskt tillämpar detta kommando före varje WebDriver-åtgärd. '

Vad det betyder är att det inte finns något behov av att manuellt lägga till väntetider i ditt skript och att Gradskiva automatiskt väntar på att webbelementen laddas och först sedan utför nästa steg.

två) Det har förmågan att exportera en global funktion element , som tar en sökare och returnerar en ElementFinder. Denna ElementFinder har en uppsättning åtgärdsmetoder, till exempel click (), getText (), sendKeys () etc. Detta är kärnan i hur man interagerar med elementet och får information från det.

Denna globala funktion hjälper till att minska syntaxen för elementlokalisering. Ta en titt på följande uttalande för att lokalisera elementet i både Selen WebDriver och Gradskiva:

Selen Webdriver :

driver.findElement(By.cssSelector('css selector'));

Gradskiva :

element(by.css('some-css'));

Syntaxen ser kompakt ut, eller hur?

3) Några nya lokaliseringsstrategier och funktioner som tillhandahålls för att hjälpa till att lokalisera vinkelelementen är: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , etc.

Hur kan Gradskiva hjälpa mig?

Ta en titt på följande framträdande funktioner:

  • Enkel syntax för att skriva testfall
  • Möjligheten att köra flera webbläsare samtidigt med Selen Grid
  • Vinkelspecifika lokalisatorer
  • Stöd för beteendedriven utveckling som Jasmine / Mocha
  • Du behöver inte lägga till sovplatser / väntetider
  • Integrerad support med Jenkins / Browser Stack / Grunt etc.
  • Bli av med att hantera synkroniseringsproblem på Angular JS-webbplatser
  • Stöd för flera webbläsare (Firefox, Chrome, Safari, Internet Explorer)
  • Möjlighet att köra samma skript i mobilwebbläsare också utan att behöva ändra koden

Vilket ramverk ska man använda?

Den stöder två beteendestyrda utvecklingsramar (BDD) direkt ur lådan:

  • Jasmin: Jasmin är standardtestramverket när Protractor installeras. Vi kommer att använda Jasmine i den här artikeln.
  • Mocka: Mocka är ett JavaScript-testramverk som körs på Node.js. Om du vill använda Mocha som ditt testramverk måste du ställa in det med din gradskiva och måste också använda beteendedrivet utvecklingsgränssnitt och Chai-påståenden med Chai som utlovat (se den här länken för mer detaljer ).

Hur man laddar ner och installerar graden

Eftersom det är ett node.js-program måste du installera node.js för att få det att köras. Node.js kan laddas ner från denna URL genom att välja operativsystem: Node.js nedladdning

Med node.js får du också Gradskiva över havet paket, som nu kan användas för att installera Protractor.

Nu när node.js är installerat på din maskin, öppna kommandotolken (cmd) och tryck på kommandot nedan för att installera det globalt:

npm install -g protractor

'-G' används för att installera detta verktyg globalt. Ta bort det om du inte vill installera det globalt. Detta kommando installerar också Protractor API tillsammans med en standard selen-server, vilket innebär att du inte nödvändigtvis behöver starta en fristående server.

Nu måste vi installera selen-servern och ChromeDriver. Använd följande kommando (kommer också med Gradskiva) i cmd:

webdriver-manager update

Det här är allt vi behöver för att börja med vår första testfallshandling med hjälp av detta ramverk. Om du vill kan du installera valfri IDE / editor för att skriva din kod. Eclipse IDE är den populära, men det finns också några fler coola redaktörer att tänka på. Personligen föredrar jag 'Atom' -redigeraren för min skrivskiva.

Redo att skapa ditt första testfall?

Det krävs två filer för att kunna köras:

  • Konfigurationsfil
  • Spec-fil.

De Konfigurationsfil är den som berättar Protractor var du hittar testfilerna (specifikationer) / vilken webbläsare du ska välja / vilken ram som ska användas (Jasmine / Mocha) / var du ska prata med din Selen-webbläsare och andra konfigurationer. Om någon konfiguration inte definieras i konfigurationsfilerna kommer den att använda standardvärden.

Spec-filen är den där vi skriver vår faktiska testkod. Alla våra testfunktionsflöden / påståenden finns i den här specifika filen. Det kan finnas flera spec-filer baserat på antalet testfall men bara en spec-fil kan köra hela testpaketet med flera specifikationer.

Exempel TESTFALL:

Nu ska vi skriva ett enkelt testfall där vi navigerar till en URL och söker efter sidrubrik.

Här är stegen:

  • Skapa en ny mapp för din testsvit.
  • Skapa en ny fil med namn som ” js (Alla namn kommer att göra) Alla specifikations- / konfigurationsfiler kommer att ha '.js' förlängning.
  • Skapa en ny fil med det namn som anges som ” js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Nu är vi redo att börja med vår kodning. Se nedanstående kod för filen 'testCaseNameSpec.js'.

Så här ser konfigurationsfilen ut:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Låt nu bryta dessa 2 filer och se hur det fungerar.

# 1) Spec.js

  • Alla kommandon på webbläsarenivå hanteras av ' webbläsare ”, En global skapad av Protractor.
  • När vi följer Jasmine-ramen, ” beskriva ' och ' den Är syntaxerna för Jasmine. Beskriv kommer att innehålla hela slutet för att avsluta flödet av ditt testfall, medan 'det' kan innehålla några teststeg / scenarier etc. Du kan ha flera ' den Blockerar i ditt program om du vill.
  • browser.get är en enkel Selen-syntax som berättar Protractor att slå en specifik URL i webbläsaren.
  • Eftersom webbplatsen vi försöker träffa är en icke-vinklad webbplats, ställer vi in ignorera synkronisering tagga till ‘ Sann ”Som visas på rad nr 4. Om du inte gör denna tagg sann, kommer ditt test att misslyckas med felet” Vinkel kunde inte hittas på sidan ”. Anledningen bakom detta är att Protractor förväntar sig att arbeta med vinklade webbplatser som standard, och om vi använder Protractor för att validera den icke-vinklade webbplatsen, måste vi berätta detta till Protractor uttryckligen. Men om du arbetar på vinklade webbplatser finns det inget behov av att använda detta uttalande eftersom Gradskiva som standard anser att webbsidan är vinklad.
  • 'Förvänta' är inget annat än påståendet där vi jämför webbsidans titel för att motsvara vissa fördefinierade data. Vi kommer att diskutera fler påståenden i detalj.

#två) conf.js

  • Som diskuterats tidigare är konfigurationsfilen den som berättar för Protractor kärninformation. Som visas i koden är ramverket ”Jasmine”.
  • Inuti kapitel för funktioner är webbläsarkonfigurationer inställda. Du kan definiera webbläsarens namn som Firefox / Chrome etc. Du kan också ställa in maximala instanser för webbläsarna så att du samtidigt kan köra flera testfall i olika tillgängliga webbläsarfönster.
  • I specifikationer Avsnittet ger vi sökvägen till spec-filen, dvs. exakt var spec-filen finns med avseende på konfigurationsfilen.
  • Det finns också många andra coola funktioner som du kan bifoga till din konfigurationsfil, till exempel rapportering / onPrepare-funktion / tröskelns timeout etc. Vi kommer att täcka några av dessa i denna handledning.

Hur kör jag dina testfall?

Vi har skrivit koden och nu behöver vi bara en liten push för att få vår kod igång. Tryck på följande kommando i cmd för att köra ditt program:

protractor conf.js

Detta kommando börjar köra selen-servern följt av att köra ditt testskript. Du kan se loggarna i cmd själv eller om du vill kan loggarna också fångas i en .txt-fil (bara lägg till >> textFileName.txt efter ovanstående kommando och loggarna sparas i textfilen i samma katalog som i konfigurationsfilen).

Ett kromfönster öppnas, var SoftwareTestingHelp.com webbplatsen bör öppnas. Utgången skulle vara '1 spec, 0 failure' när du kör koden. Vad detta betyder är att vi hade 1 ”it” -block, som kördes med 0 fel.

Tänk på nedanstående specifikationsfil där vi utför några åtgärder på en webbsida som bygger på AngularJS så att du kan se gradskiva ta på Selen när det gäller att testa Angular-webbplatsen:

intervjufrågor och svar för mobil testning
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

Du kan också använda samma conf.js för att köra denna specifikation. Se bara till att uppdatera specifikationsfilnamnet.

Nu, i denna spec-fil, spelar vi med en vinklad JS-webbplats så att du kan se vad exakt Protractor kan.

Om du kör den här filen precis som vi gjorde tidigare öppnas en webbsida med två textrutor, en rullgardinsmeny, en knapp och några andra webbelement. Som du kanske redan har gissat är det en miniräknarsida. Vi ger två heltal som inmatning och utför en multiplikationsoperation.

Som vi redan har diskuterat är en av de största fördelarna med att använda detta verktyg dess unika tekniker för att lokalisera vinkelelementen. 'By.model' är ett sådant sätt att lokalisera element. '.SendKeys ()' är vanlig Selen-syntax för att skicka värden i textrutor och '.klick()' används för att klicka på knapparna.

Som diskuterats tidigare, 'förvänta' är ett påstående som frågar Gradskiva att fånga resultatet av multipliceringen av siffror och jämföra det med '10' och '25' i följd. Enkel matematik berättar för oss att produktionen ska vara '25' och därför misslyckas det första påståendet och det andra passerar.

Som ett resultat får du 1 specifikation, 1 fel 'I loggarna när du kör koden, vilket förväntas.

Några fler coola funktioner i Protractor

# 1) Påståenden och anteckningar

Påståenden är en viktig del av automatiseringsskripten. Kommentarer är också mycket användbara för att effektivt märka vissa metoder i en klass för att få särskild betydelse.

Det ger en mängd olika påståenden och anteckningar och ger dessutom möjligheten att skapa dina egna påståenden.

Tänk på exemplet nedan:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

I exemplet ovan använder vi två anteckningar, 'Före varje' och 'AfterEach' . Dessa anteckningar finns också i TestNG (traditionellt selen). Dessa anteckningar ser till att en viss kod kommer att exekveras före / efter respektive körning av återstående kod.

Så här är hur exekveringen av koden kommer att ske,

  1. Gradskiva sträcker sig inuti före varje Blockera först och det kommer att slå “ http://juliemr.github.io/protractor-demo/ URL i webbläsaren.
  2. Nu kommer flödet att flyttas till 'it' -blocket och fungera ' multiplicera nummer kommer att anropas som i sin tur kommer att utföra de angivna åtgärderna i den som skickar kontrollen tillbaka till där funktionen anropades.
  3. Äntligen kommer påståendet att göra sitt jobb. Nu, om vi vill ta itu med flera element samtidigt kan du använda 'element.all' en funktion i detta verktyg. Det kommer att identifiera alla tillgängliga element med den angivna sökaren (av. Repeater i det här fallet). Det är upp till dig vad du vill göra med de identifierade elementen. I det här fallet jämför vi beräkningshistoriken med ett givet nummer.
  4. Eftersom vi i det första påståendet jämför beräkningshistorikantalet med '2' trots att vi utförde beräkningen bara en gång, kommer påståendet att misslyckas. Det andra påståendet kommer dock att passera som efter den andra beräkningen, skulle historien räknas vara '2'.

Det finns många fler tillgängliga påståendetyper. Några av dem ges nedan:

a) Få text från ett webbelement och jämför det med ett visst värde:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b) Kontrollera om ett webbelement visas på sidan eller inte:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Hantering av flera webbläsare / windows / flikar

Det kan finnas flera fall när det gäller hantering av webbläsaren. Några av dessa fall markeras nedan:

a) En ny flik öppnas genom att klicka på valfri länk

Ibland, när du klickar på någon länk, öppnas en ny flik och resten av åtgärderna måste ske i det nyöppnade fönstret. I det här fallet, när du skriver koden till den punkt där en ny flik öppnas, måste du implementera Window Handler på följande sätt:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

Först räkna alla tillgängliga fönster och använd sedan indexering för att växla kontroll mellan fönstren. Det ursprungliga fönstret som initierade det nya fönstret kommer att ha index 0, medan de efterföljande fönstren har ökande index.

b) Öppna en helt ny webbläsare med ny session

När du behöver utföra några åtgärder i en webbläsare och behöver göra ytterligare åtgärder på en annan session i webbläsaren, måste vi använda forkNewDriverInstance . I det här fallet skapar vi en ny webbläsarinstans med ett nytt webbläsarnamn på följande sätt:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c) Köra ditt testfall i flera webbläsare:

Att köra ditt testfall i två webbläsare åt gången är något som konfigurationsfilen kan göra för dig. Lägg bara till koden nedan i din konfigurationsfil:

Så snart du kör den här konfigurationsfilen ser du test som körs i både Firefox och Chrome samtidigt och körloggar visas separat i kommandotolken.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Använd sidobjekt för att göra ditt ramverk ännu bättre

Det här verktyget är bra i sig men blir oövervinnligt när det kombineras med Page Object Model (POM). De flesta av dess brister (om några) övervinns med sidobjektmodellen. Dessutom hjälper POM till att underhålla ditt projekt på ett mer strukturerat sätt.

Om du inte vet vad POM är, oroa dig inte. POM är ett sätt att separera ditt testfall på grundval av sidorna.

Ta detta exempel:

Det finns en shoppingwebbplats. Ditt testfall är att välja en produkt, lägga till den i kundvagnen och sedan köpa den.

Nu finns det två sätt att hantera din testskriptkod för detta:

  1. Skriv ett vanligt testfall med alla lokaliserare på samma sida som din logik är skriven i,
  2. Skriv hela ditt flöde av testfall, din logik i din spec-fil och segregera dina sökare och testdata i olika filer. Varje webbsida kommer att ha en motsvarande .js-sidfil. På det här sättet kommer din kod att struktureras och om det finns något annat testfall som kräver samma sökare behöver du inte skriva dessa sökare igen, bara importera den här sökfilen och använd den enligt dina behov.

Att behålla dina testfall kan vara en verklig smärta. Om du använder POM kommer din kod att vara på ett mycket mer strukturerat sätt.

bästa mjukvaran för att optimera Windows 10

Här är ett exempel på hur du använder sidobjektmodellen:

sidobjektmodell

Detta är flödet i ovanstående ögonblicksbild:

  1. Det finns ett testfall som köper bärbar dator. Koden för flödet och logiken finns i köpLaptopSpec.js.
  2. Alla sidor som du stöter på för att köpa den bärbara datorn har en '.js' -fil med rätt titel. Alla element som krävs för att köpa den bärbara datorn, deras sökare kommer att finnas i respektive sidfil.
  3. De uppgifter som krävs för detta testfall kan sparas i TestData-mappen antingen i '.json' -format eller i Excel-format.
  4. När du väl är klar med sidorna och lokalisatorerna, importerar du bara dessa filer i din spec-fil för att använda locator / testdata så är du klar med ditt testfall.

# 4) Rapportering

NPM (Node Package Manager) tillhandahåller olika rapporteringspaket, med vilken skärmdump av varje teststeg kan tas och när testkörningen är klar genererar den en HTML-rapport åt dig. Allt du behöver göra är att installera dessa paket genom att öppna en kommandotolk och trycka på kommandona nedan:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

När dessa paket har installerats sparas alla skärmdumpar i dina testfall varje gång du kör din konfigurationsfil och det kommer också att genereras en HTML-rapport som visar testfallets pass / fail-resultat.

# 5) Integrera med andra kraftfulla verktyg som Git / Jenkins / Browserstack / Grunt

Det finns flera verktyg tillgängliga på marknaden för att göra dina testfall ännu bättre. Git / Jenkins / BrowserStack / Grunt är några sådana verktyg som ger ett betydande värde för dina normala Protractor-testskript. Och det bästa är att du inte behöver röra din spec-fil för att integrera din gradskiva med något av dessa verktyg. Det är din konfigurationsfil som tar alla dessa saker åt dig.

Gå är ett mycket kraftfullt versionskontrollverktyg. Det är alltid en bästa praxis att behålla din kod i Git om det är flera utvecklare inblandade.

Jenkins är ett kontinuerligt integrationsverktyg med vilket du kan schemalägga dina testfall och köra det enligt dina behov. Gradskyddsskript kan också konfigureras med Jenkins. Bästa användningen av att köra dina testfall på Jenkins är att det går väldigt snabbt och att du kan köra flera testfall samtidigt.

BrowserStack är ett testverktyg för webbläsare som också kan användas för att testa dina applikationer i olika webbläsare. Det kan också integreras med Protractor genom att lägga till referenserna för browserStack i din konfigurationsfil.

Jord är en JavaScript-aktivitetslöpare. Det ger dig möjlighet att utföra flera uppgifter åt dig. Dess fantastiska är att det finns mer än 4000 uppgifter och du kan skapa ännu fler uppgifter enligt dina krav. Följande är några av de viktiga dagliga användningsuppgifterna vi kan använda Grunt för:

  1. Lista ner alla kodningsmetoder och informera omedelbart när du bryter mot något av dessa.
  2. Att skapa flera spec-filer vid körning. Till exempel , om det finns något testfall som du vill köra flera gånger (från 1 till valfritt nummer). Det här kan tyckas onödigt vid denna tidpunkt men tänk på att köra alla shoppingwebbplatsers kassaflöden som ska köras i varje enskilt tillgängligt land. Det skulle vara tråkigt att skapa flera specifikationer manuellt. Så låt Grunt göra detta åt dig.
  3. Klockfunktionen. Du skriver ett testfall och varje gång du sparar din kod efter att ha gjort någon ändring i den, vill du att ditt testfall ska köras, Grunt har det.
  4. Sammankoppla flera filer.

Prova bara så kommer du att älska det.

Slutsats

Du kan få Selen att fungera som en gradskiva, men varför uppfinna hjulet igen? Om Google har lagt ned så mycket arbete för att få Protractor att fungera som en charm, låt det användas till fullo. Åtminstone för AngularJS-webbplatser kommer det att göra ditt liv mycket enklare.

Den här artikeln handlar inte bara om Gradskiva. Det finns en stor värld av Protractor där ute och det finns hundratals paket tillgängliga på marknaden som erbjuds av NPM för att lägga till fler funktioner i ditt test förutom enkla testscenarier. Använd gärna dessa paket och gör det ännu bättre.

Om författaren: Detta är ett gästinlägg av Deshansh. Han arbetar som Software Development Engineer i test med en av de ledande MNC: erna. Han har lång erfarenhet av att arbeta med automatiseringstester på selen och gradskiva.

Vår kommande handledning hjälper dig att rensa alla AngularJS-intervjuer framgångsrikt.

PREV-handledning | NÄSTA självstudie

Rekommenderad läsning

^