Menu

Vinkelmåler testværktøj til end-to-end test af AngularJS applikationer

protractor testing tool

Prøv Vores Instrument Til At Fjerne Problemer

Hvad er vinkelmåler?

Vinkelmåleren er et værktøj til automatiseringstest til test af webapplikationer; kombinerer kraftfulde teknologier som Jasmine, Selen Webdriver, Node.js osv.

Protractor testværktøjet er en ende til slut adfærd-drevet testramme designet med tanke på Angular JS applikationer. Selvom det måske lyder som, at Protractor ikke fungerer med ikke-vinklede JS-applikationer, gør det det.

Det fungerer lige så godt med både kantede og ikke-kantede JS-applikationer.

Du er velkommen til at udforske hele AngularJS-serien af ​​tutorials . I vores tidligere tutorial forskellen mellem vinkelversioner blev forklaret detaljeret.

Vinkelmåler test tutorial

Hvad du lærer:

Vinkelmåler mod Selen WebDriver

Hvad gør vinkelmåler forskellig fra traditionel Selen WebDriver ?

Brug et øjeblik på at besvare disse spørgsmål:

  • Er det en kamp for at bestemme, hvornår websiden nøjagtigt indlæses (Alle de asynkrone elementer er klar og behandlet)?
  • Er du træt af at tilføje ventetid og sove til din kode?
  • Vil du slippe af med den besværlige indsats for at lokalisere de vinklede elementer?
  • Frustreret med at finde elementer med skiftende id'er?
  • Vil du oprette din egen locator?
  • Skriver du lang kode selv for de enkleste påstande?
  • Er du en JavaScript-entusiast / fan?

Hvis du svarede ja på disse spørgsmål, Vinkelmåler kan hjælpe.

Det er en indpakning bygget oven på Selenium Webdriver og giver dermed alle Seleniums muligheder sammen med mange nyttige tilføjelser. Det tilbyder:

Funktioner

Det tilbyder:

1) WaitForAngular

testcases til webapplikation i manuel test

Fra dokumentation:

' Instruer WebDriver om at vente, indtil Angular er færdig med gengivelsen og ikke har nogen udestående $ http- eller $ timeout-opkald, før du fortsætter. Bemærk, at Vinkelmåler automatisk anvender denne kommando før hver WebDriver-handling. '

Hvad dette betyder er, at der ikke er behov for manuelt at tilføje ventetid til dit script, og Vinkelmåler venter automatisk på, at webelementerne indlæses, og først derefter udfører de næste trin.

to) Det har evnen til at eksportere en global funktion element , der tager en lokalisering og returnerer en ElementFinder. Denne ElementFinder har et sæt handlingsmetoder, såsom klik (), getText (), sendKeys () osv. Dette er kernen i, hvordan man interagerer med elementet og får information fra det.

Denne globale funktion hjælper med at reducere elementets lokalisering af syntaks. Se på følgende udsagn for at finde elementet i både Selen WebDriver og Protractor:

Selen Webdriver :

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

Vinkelmåler :

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

Syntaksen ser kompakt ud, ikke?

3) Nogle nye lokaliseringsstrategier og funktioner, der leveres til at hjælpe med at lokalisere de vinklede elementer, er: Af.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , etc.

Hvordan kan vinkelmåler hjælpe mig?

Se på følgende fremtrædende funktioner:

  • Enkel syntaks til at skrive testsager
  • Evnen til at køre flere browsere på én gang ved hjælp af Selen Grid
  • Vinkelspecifikke placeringer
  • Støtte til adfærdsdrevet udvikling såsom Jasmine / Mocha
  • Ingen grund til at tilføje sove / venter
  • Understøttet integration med Jenkins / Browser Stack / Grunt osv.
  • Slip af med at håndtere synkroniseringsproblemer på Angular JS-websteder
  • Understøttelse af flere browsere (Firefox, Chrome, Safari, Internet explorer)
  • Evne til at køre de samme scripts i mobile browsere også uden behov for at ændre koden

Hvilken ramme skal du bruge?

Det understøtter to adfærdsstyrede udvikling (BDD) testrammer lige ud af kassen:

  • Jasmin: Jasmin er standardtestrammen, når Protractor er installeret. Vi bruger Jasmine i denne artikel.
  • Mokka: Mokka er en JavaScript-testramme, der kører på Node.js. Hvis du ønsker at bruge Mocha som din testramme, bliver du nødt til at konfigurere det med din vinkelmåler og skal også bruge Behavior Driven Development interface og Chai Assertions med Chai som lovet (se dette link for flere detaljer ).

Sådan downloades og konfigureres vinkelmåler

Da det er et node.js-program, skal du installere node.js for at få det til at køre. Node.js kan downloades fra denne URL ved at vælge operativsystemet: Node.js download

Med node.js får du også Vinkelmåler over havets overflade pakke, som nu kan bruges til at installere Protractor.

Nu er node.js installeret på din maskine, skal du åbne kommandoprompten (cmd) og trykke på nedenstående kommando for at installere den globalt:

npm install -g protractor

'-G' bruges til at installere dette værktøj globalt. Fjern det, hvis du ikke ønsker at installere det globalt. Denne kommando installerer også Protractor API sammen med en standard selen-server, hvilket betyder at du ikke nødvendigvis behøver at starte en enkeltstående server.

Nu skal vi installere selen-serveren og ChromeDriver. Brug følgende kommando (leveres også med vinkelmåler) i cmd:

webdriver-manager update

Dette er alt, hvad vi har brug for for at starte med vores første test case skrivning ved hjælp af denne ramme. Hvis du ønsker det, kan du installere en hvilken som helst IDE / editor til at skrive din kode. Eclipse IDE er den populære, men der er også nogle flere seje redaktører at overveje. Personligt foretrækker jeg 'Atom' -editor til min skrivning af vinkelmåler.

Klar til at oprette din første testsag?

Det har brug for to filer for at køre:

  • Konfigurationsfil
  • Spec-fil.

Det Konfigurationsfil er den, der fortæller Protractor, hvor testfilerne (specifikationerne) skal findes / hvilken browser der skal vælges / hvilken ramme der skal bruges (Jasmine / Mocha) / hvor man skal tale med din Selenium-browser og andre konfigurationer. Hvis en konfiguration ikke er defineret i konfigurationsfiler, bruger den standardindstillinger.

Spec-filen er den, hvor vi skriver vores faktiske testkode. Alle vores testfunktionelle flow / påstande findes i denne specifikke fil. Der kan være flere spec-filer baseret på antallet af testcases, men kun 1 spec-fil kan køre hele testpakken med flere specs.

Eksempel TESTSAG:

Nu skriver vi en simpel testtilfælde, hvor vi navigerer til en URL og kontrollerer sidetitlen.

Her er trinene:

  • Opret en ny mappe til din testpakke.
  • Opret en ny fil med navn som ‘ js (Ethvert navn vil gøre) Alle spec / konfigurationsfilerne vil være af '.js' udvidelse.
  • Opret en ny fil med navnet angivet 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 er vi klar til at starte med vores kodning. Se nedenstående kode for 'testCaseNameSpec.js' fil.

Her ser konfigurationsfilen ud:

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

Lad os nu bryde disse 2 filer og se, hvordan det fungerer.

# 1) Spec.js

  • Alle kommandoer på browserniveau håndteres af ' browser ', En global oprettet af Protractor.
  • Når vi følger Jasmine-rammen, ' beskrive ' og ' det 'Er syntakserne for Jasmine. Beskriv vil indeholde hele slutningen for at afslutte strømmen af ​​din test sag, mens 'det' kan indeholde nogle af test trin / scenarier osv. Du kan have flere ' det 'Blokke i dit program, hvis du ønsker det.
  • browser.get er en simpel Selen-syntaks, som fortæller Protractor at ramme en bestemt URL i browseren.
  • Da det websted, vi prøver at ramme, er et ikke-vinklet websted, indstiller vi ignorere synkronisering tag til ' sand 'Som vist på linje nr. 4. Hvis du ikke gør dette mærke sandt, mislykkes din test med fejlen 'Vinkel kunne ikke findes på siden'. Årsagen bag dette er, at Protractor forventer at arbejde med kantede websteder som standard, og hvis vi bruger Protractor til at validere det ikke-kantede websted, skal vi udtrykkeligt fortælle dette til Protractor. Men hvis du arbejder på kantede websteder, er der ingen grund til at bruge denne erklæring, da Vinkelmåler som standard betragter websiden for at være kantet.
  • 'Forvent' er intet andet end påstanden, hvor vi sammenligner websides titel til at være lig med nogle foruddefinerede data. Vi vil diskutere flere påstande detaljeret.

#to) conf.js

  • Som diskuteret tidligere er konfigurationsfilen den, der fortæller Protractor kerneoplysningerne. Som vist i koden er rammen 'Jasmine'.
  • Inde i kapaciteten sektion er browser konfigurationer indstillet. Du kan definere browsernavnet, f.eks. Firefox / chrome osv. Du kan også indstille de maksimale forekomster af browserne, så du på én gang kan køre flere testcases i forskellige tilgængelige browservinduer.
  • I ' specifikationer Sektion, giver vi stien til spec-filen, dvs. nøjagtigt hvor spec-filen er placeret i forhold til konfigurationsfilen.
  • Der er også mange andre seje funktioner, du kan vedhæfte til din konfigurationsfil, såsom rapportering / onPrepare-funktion / tærskel-timeout osv. Vi vil dække få af disse i denne vejledning.

Hvordan køres dine testcases?

Vi har skrevet koden, og nu er alt, hvad vi har brug for, et lille skub for at få vores kode til at køre. Tryk på følgende kommando i cmd for at køre dit program:

protractor conf.js

Denne kommando begynder at køre selen-serveren efterfulgt af at køre dit test-script. Du kan se logfilerne i cmd selv, eller hvis du ønsker det, kan logfiler også fanges i en .txt-fil (bare tilføj >> textFileName.txt efter ovenstående kommando gemmes logfilerne i tekstfilen i samme bibliotek som i konfigurationsfilen).

Et kromvindue åbnes, hvor SoftwareTestingHelp.com webstedet skal åbnes. Outputtet ville være '1 spec, 0 fail', når du kører koden. Hvad dette betyder er, at vi havde 1 'it' -blokke, der blev udført med 0 fejl.

Overvej nu nedenstående spec-fil, hvor vi udfører nogle handlinger på en webside, der bygger på AngularJS, så du kan se vinkelmåler tage på Selen, når det kommer til test af Angular-webstedet:

hvilket af følgende er en fase i sdlc?
// 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 også bruge den samme conf.js til at køre denne spec. Bare sørg for at opdatere specifikationsfilnavnet.

Nu, i denne spec-fil, spiller vi med et kantet JS-websted, så du kan se, hvad nøjagtigt Protractor er i stand til.

Hvis du kører denne fil ligesom vi gjorde tidligere, åbnes en webside med 2 tekstfelter, en rullemenu, en knap og få andre webelementer. Som du måske allerede har gættet, er det en lommeregningsside. Vi giver 2 heltal som input og udfører en multiplikationsoperation.

Som vi allerede diskuterede, er en af ​​de største fordele ved at bruge dette værktøj dets unikke teknikker til at lokalisere de vinklede elementer. 'By.model' er en sådan måde at lokalisere elementer på. '.SendKeys ()' er almindelig Selen-syntaks for at sende værdier i tekstfelter og '. Klik ()' bruges til at klikke på knapper.

Som diskuteret tidligere, 'forventer' er en påstand, der beder Vinkelmåler om at indfange resultatet af multiplikationen af ​​tal og sammenligne det med '10' og '25' i rækkefølge. Enkel matematik fortæller os, at output skal være '25', og derfor mislykkes den første påstand, og den anden passerer.

Som et resultat får du ' 1 Specifikation, 1 Fejl 'I logfilerne, når du kører koden, hvilket forventes.

Nogle flere seje funktioner i Protractor

# 1) Påstande og kommentarer

Påstande er en vigtig del af automatiseringsskripterne. Kommentarer er også meget nyttige til effektivt at tagge bestemte metoder i en klasse for at have særlig betydning.

Det giver en række påstande & bemærkninger, og derudover giver det også mulighed for at oprette dine egne påstande.

Overvej nedenstående eksempel:

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 ovenstående eksempel bruger vi 2 annoteringer, 'Før hver' og 'EfterEach' . Disse kommentarer er også tilgængelige i TestNG (traditionelt selen). Disse kommentarer sørger for, at et bestemt stykke kode udføres før / efter henholdsvis udførelsen af ​​den resterende kode.

Så her er hvordan udførelsen af ​​koden finder sted,

  1. Vinkelmåler når ind i ' før hver 'Blokere først, og den rammer' http://juliemr.github.io/protractor-demo/ URL i browseren.
  2. Nu flytter strømmen til 'it'-blokken og fungerer' multiplicereNumre vil blive kaldt, som igen vil udføre de specificerede handlinger i det, der sender kontrollen tilbage til det sted, hvor funktionen blev kaldt.
  3. Endelig vil påstanden gøre sit job. Nu, hvis vi ønsker at tackle flere elementer på samme tid, kan du bruge 'element.all' en funktion i dette værktøj. Det identificerer alle de tilgængelige elementer med den angivne locator (i dette tilfælde af repeater). Det er op til dig, hvad du ønsker at gøre med de identificerede elementer. I dette tilfælde sammenligner vi beregningshistorikken med et givet tal.
  4. Da vi i den første påstand sammenligner beregningshistorikantallet med '2', selvom vi udførte beregningen kun en gang, vil påstanden mislykkes. Den anden påstand vil imidlertid bestå, da historiktællingen efter den anden beregning ville være '2'.

Der er mange flere tilgængelige påstande. Nogle af dem er angivet nedenfor:

a) Få tekst fra et webelement, og sammenlign det med en bestemt værdi:

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

b) Kontroller, om et webelement vises på siden eller ej:

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

# 2) Håndtering af flere browsere / windows / faner

Der kan være flere tilfælde, når det gælder håndtering af browseren. Nogle af disse sager fremhæves nedenfor:

a) En ny fane åbnes ved at klikke på et hvilket som helst link

Nogle gange, når du klikker på et hvilket som helst link, åbnes en ny fane, og resten af ​​handlingerne skal finde sted i det nyåbnede vindue. I dette tilfælde, når du skriver koden til det punkt, hvor en ny fane åbnes, skal du implementere Window Handler på følgende måde:

//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å først et optælling af alle de tilgængelige vinduer, og brug derefter indeksering til at skifte kontrol mellem vinduerne. Det oprindelige vindue, der startede det nye vindue, vil have indeks 0, mens de efterfølgende vinduer vil have stigende indekser.

b) Åbning af en helt ny browser med ny session

Når du har brug for at udføre nogle handlinger i en browser og har brug for at udføre yderligere handlinger på en anden session i browseren, skal vi bruge forkNewDriverInstance . I dette tilfælde opretter vi en ny browserinstans med et nyt browsernavn på følgende måde:

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ørsel af din testcase i flere browsere:

At køre din testcase i 2 browsere ad gangen er noget, som konfigurationsfilen kan gøre for dig. Bare tilføj nedenstående kode i din konfigurationsfil:

Så snart du kører denne konfigurationsfil, vil du se tests, der kører i både Firefox og Chrome samtidigt, og kørende logfiler vises separat i kommandoprompten.

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

# 3) Brug sideobjekter til at gøre dine rammer endnu bedre

Dette værktøj er godt alene, men det bliver uovervindeligt, når det kombineres med Page Object Model (POM). De fleste af dens mangler (hvis nogen) overvindes med sideobjektmodellen. Desuden hjælper POM også med at vedligeholde dit projekt på en mere struktureret måde.

Hvis du ikke ved hvad POM er, er du ikke bekymret. POM er en måde at adskille din testsag på baggrund af siderne.

Tag dette eksempel:

Der er et shoppingwebsted. Din test sag er at vælge et produkt, tilføje det i indkøbskurven og derefter købe det.

Nu er der to måder at administrere din testscript-kode til dette:

  1. Skriv en almindelig testkasse med alle lokalisatorerne på den samme side, din logik er skrevet i,
  2. Skriv al din strøm af testcase, din logik i din spec-fil, og adskill dine locators og testdata i forskellige filer. Hver webside har en tilsvarende .js-sidefil. På denne måde vil din kode være struktureret, og hvis der er en anden testtilfælde, der kræver den samme lokalisator, behøver du ikke at skrive disse lokaliseringer igen, bare importer denne locator-fil og brug den efter dine behov.

Vedligeholdelse af dine testsager kan være en virkelig smerte. Hvis du bruger POM, vil din kode være på en meget mere struktureret måde.

hvordan man åbner en .apk fil

Her er et eksempel på brug af sideobjektmodellen:

side objekt model

Dette er strømmen i ovenstående øjebliksbillede:

  1. Der er en test sag, der køber bærbar computer. Koden for flowet og logikken findes i købLaptopSpec.js.
  2. Alle sider, der findes for at købe den bærbare computer, vil have 1 '.js' -fil med en korrekt titel. Alle de elementer, der kræves for at blive brugt til køb af den bærbare computer, deres lokaliseringer vil være inde i den respektive sidefil.
  3. De krævede data til denne testtilstand kan gemmes i mappen TestData enten i '.json'-format eller i excel-format.
  4. Når du er færdig med siderne og lokalisatorerne, skal du bare importere disse filer i din spec-fil for at bruge lokaliserings- / testdata, og du er klar med din testcase.

# 4) Rapportering

NPM (Node Package Manager) leverer forskellige rapporteringspakker, hvor skærmbillede af hvert testtrin kan fanges, og når testkørslen er afsluttet, genererer den en HTML-rapport til dig. Alt hvad du skal gøre er at installere disse pakker ved at åbne en kommandoprompt og trykke på nedenstående kommandoer:

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

Når disse pakker er installeret, gemmes alle skærmbillederne i dine testsager, hver gang du kører din konfigurationsfil, og der genereres også en HTML-rapport, der viser test- / pass-fail-resultatet.

# 5) Integrer med andre kraftfulde værktøjer som Git / Jenkins / Browserstack / Grunt

Der er flere værktøjer til rådighed på markedet for at gøre dine testsager endnu bedre. Git / Jenkins / BrowserStack / Grunt er nogle af disse værktøjer, der tilføjer væsentlig værdi til dine normale Protractor-testscripts. Og det bedste er, at du ikke behøver at røre ved din spec-fil for at integrere din vinkelmåler med nogen af ​​disse værktøjer. Det er din konfigurationsfil, som tager alle disse ting for dig.

Gå er et meget kraftfuldt versionskontrolværktøj. Det er altid en god praksis at opbevare din kode i Git, hvis der er flere udviklere involveret.

Jenkins er et kontinuerligt integrationsværktøj, hvormed du kan planlægge dine testsager og køre det efter dine behov. Vinkelmåler-scripts kan også konfigureres med Jenkins. Den bedste brug af at køre dine testsager på Jenkins er, at det er meget hurtigt, og at du også kan køre flere testsager ad gangen.

BrowserStack er et værktøj til testning på tværs af browsere, som også kan bruges til at teste dine applikationer på tværs af forskellige browsere. Det kan også integreres med Protractor ved at tilføje browserStack-legitimationsoplysninger i din konfigurationsfil.

Jord er en JavaScript-opgaveløber. Det giver dig mulighed for at udføre flere opgaver for dig. Dens fantastiske er, at der er mere end 4000 opgaver, og du kan oprette endnu flere opgaver i henhold til dine krav. Følgende er få af de vigtige daglige opgaver, vi kan bruge Grunt til:

  1. Noter alle kodningens bedste praksis, og informer straks, når du overtræder nogen af ​​disse.
  2. At oprette flere spec-filer på kørselstidspunktet. For eksempel , hvis der er nogen testtilfælde, som du ønsker at køre flere gange (fra 1 til et hvilket som helst tal). Dette kan synes unødvendigt på dette tidspunkt, men tænk på at køre ethvert flow på shoppingwebsite, der skal køres i hvert eneste tilgængelige land. Det ville være kedeligt at oprette flere specifikationer manuelt. Så lad Grunt gøre dette for dig.
  3. Urfunktionen. Du skriver en test sag, og hver gang så snart du gemmer din kode efter at have foretaget nogen ændring i den, vil du have din test sag til at køre, Grunt har den.
  4. Sammenkædning af flere filer.

Bare prøv det, så vil du elske det.

Konklusion

Du kan få Selen til at fungere som en vinkelmåler, men hvorfor genopfinde hjulet? Hvis Google har gjort så meget for at få Vinkelmåler til at fungere som en charme, så brug det til fulde. I det mindste for AngularJS-webstederne vil det gøre dit liv meget lettere.

Også, denne artikel handler ikke kun om vinkelmåler. Der er en stor verden af ​​vinkelmåler derude, og der findes hundredvis af pakker på markedet, der tilbydes af NPM for at tilføje flere funktioner til din test ud over enkle testscenarier. Du er velkommen til at bruge disse pakker og gøre det endnu bedre.

Om forfatteren: Dette er et gæstepost fra Deshansh. Han arbejder som softwareudviklingsingeniør i test med en af ​​de førende MNC'er. Han har stor erfaring med at arbejde med automatiseringstest på selen og vinkelmåler.

Vores kommende tutorial hjælper dig med at rydde ethvert AngularJS-interview med succes.

PREV-vejledning | NÆSTE vejledning

Anbefalet læsning

^