Vadnica za testiranje kotomerja: ogrodje orodij za avtomatizacijo

Kazalo:

Anonim

Kaj je testiranje kotomerja?

PROTRACTOR je orodje za avtomatizacijo in vedenje, ki temelji na vedenju, ki igra pomembno vlogo pri testiranju aplikacij AngularJS in deluje kot integrator rešitev, ki združuje močne tehnologije, kot so selen, jasmin, spletni gonilnik itd. ni samo testiranje aplikacij AngularJS, temveč tudi pisanje avtomatiziranih regresijskih testov tudi za običajne spletne aplikacije.

V tej vadnici za začetnike boste izvedeli-

  • Zakaj potrebujemo okvir kotomer?
  • Namestitev kotomera
  • Vzorčno preizkušanje aplikacij AngularJS z uporabo transtraktorja
  • Izvajanje kodeksa
  • Ustvari poročila z Jasmine Reporters

Zakaj potrebujemo okvir kotomer?

JavaScript se uporablja v skoraj vseh spletnih aplikacijah. Ko se aplikacije razvijajo, se tudi JavaScript povečuje v velikosti in zapletenosti. V takem primeru postane preizkuševalec težko opravilo preizkusiti spletno aplikacijo za različne scenarije.

Včasih je težko zajeti spletne elemente v aplikacijah AngularJS z uporabo JUnit ali Selenium WebDriver.

Protractor je program NodeJS, ki je napisan v JavaScript in deluje z Node za prepoznavanje spletnih elementov v aplikacijah AngularJS, uporablja pa tudi WebDriver za nadzor brskalnika z uporabniškimi dejanji.

V redu, zdaj se pogovorimo, kaj točno je aplikacija AngularJS?

Aplikacije AngularJS so spletne aplikacije, ki uporabljajo razširjeno sintakso HTML za izražanje komponent spletnih aplikacij. Uporablja se predvsem za dinamične spletne aplikacije. Te aplikacije uporabljajo manj in prilagodljivo kodo v primerjavi z običajnimi spletnimi aplikacijami.

Zakaj ne moremo najti spletnih elementov Angular JS z uporabo spletnega gonilnika Normal Selenium?

Kotne JS aplikacije imajo nekaj dodatnih atributov HTML, kot so ng-repeater, ng-controller, ng-model… itd., Ki niso vključeni v lokatorje Selenium. Selenium teh spletnih elementov ne more prepoznati s pomočjo kode Selenium. Torej, Protractor na vrhu Selenium lahko obdeluje in nadzoruje te atribute v spletnih aplikacijah.

Kratomer je okvir za preskušanje aplikacij, ki temeljijo na Angular JS. Medtem ko se večina okvirov osredotoča na izvajanje preskusov enot za aplikacije Angular JS, se Protractor osredotoča na testiranje dejanske funkcionalnosti aplikacije.

Preden zaženemo Protractor, moramo namestiti naslednje:

  1. Selen

    Korake za namestitev selena najdete na naslednjih povezavah (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    Namestitev NodeJS, za namestitev Protraktorja moramo namestiti NodeJS. Te korake namestitve najdete na naslednji povezavi. (https://www.guru99.com/download-install-node-js.html)

Namestitev kotomera

Korak 1) Odprite ukazni poziv in vnesite "npm install -g protractor" in pritisnite Enter .

Zgornji ukaz bo prenesel potrebne datoteke in namestil Protractor v odjemalski sistem.

Korak 2) Preverite namestitev in različico z uporabo " Protractor --version ." Če bo uspešna, bo prikazana različica, kot na spodnjem posnetku zaslona. V nasprotnem primeru znova izvedite 1. korak.

(3. in 4. korak sta neobvezna, vendar priporočljiva za boljšo prakso)

Korak 3) Posodobite upravitelja spletnega gonilnika. Upravitelj spletnih gonilnikov se uporablja za izvajanje preskusov proti kotni spletni aplikaciji v določenem brskalniku. Po namestitvi Protractorja je treba upravitelja spletnega gonilnika posodobiti na najnovejšo različico. To lahko storite tako, da v ukaznem pozivu zaženete naslednji ukaz.

webdriver-manager update

Korak 4) Zaženite upravitelja spletnega gonilnika. Ta korak bo zagnal upravitelja spletnega gonilnika v ozadju in poslušal morebitne preizkuse, ki se izvajajo preko kotomera.

Ko je Protractor uporabljen za izvajanje katerega koli preskusa, ga spletni gonilnik samodejno naloži in zažene v ustreznem brskalniku. Če želite zagnati upravitelja spletnega gonilnika, morate v ukaznem pozivu izvesti naslednji ukaz.

webdriver-manager start

Če zdaj v brskalniku odprete naslednji URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), boste v ozadju dejansko videli upravitelja spletnih gonilnikov.

Vzorčno preizkušanje aplikacij AngularJS z uporabo transtraktorja

Za zagon transtraktorja potrebujete dve datoteki, datoteko spec in konfiguracijsko datoteko.

  1. Konfiguracijska datoteka : Ta datoteka pomaga pomikalniku, kamor so nameščene preizkusne datoteke (specs.js) in se pogovarja s strežnikom Selenium (naslov Selenium). Chrome je privzeti brskalnik za Protractor.
  1. Datoteka s specifikacijami: Ta datoteka vsebuje logiko in lokatorje za interakcijo z aplikacijo .

Korak 1) Prijavite se na https://angularjs.org in v besedilno polje »Vnesite ime tukaj« vnesite besedilo kot »GURU99«.

Korak 2) V tem koraku

  1. Vnesel ime "Guru99"
  2. V izhodnem besedilu je viden "Hello Guru99".

Korak 3) Zdaj moramo po vnosu imena zajeti besedilo s spletne strani in preveriti s pričakovanim besedilom .

Koda:

Kot smo že omenili, moramo pripraviti konfiguracijsko datoteko (conf.js) in datoteko s specifikacijami (spec.js) .

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

Razlaga kode spec.js:

  1. opišite ('Vnesite ime GURU99', funkcija ()

    Opisana sintaksa je iz okvira Jasmine. Tu opis "(" Enter GURU99 Name ") običajno določa komponente aplikacije, ki so lahko razred ali funkcija itd. V zbirki kod, imenovani" Enter GURU99 ", gre samo za niz in ne za kodo.

  2. it ('naj doda ime kot GURU99', funkcija ()
  3. browser.get ('https://angularjs.org')

    Tako kot v programu Selenium Webdriver bo browser.get odprl nov primerek brskalnika z omenjenim URL-jem.

  4. element (by.model ('vašeIme')). sendKeys ('GURU99')

    Tu najdemo spletni element z imenom modela kot "yourName", kar je vrednost "ng-model" na spletni strani. Preverite spodnji posnetek zaslona -

  1. var guru = element (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))

    Tu najdemo spletni element z uporabo XPath in njegovo vrednost shranimo v spremenljivko "guru" .

  2. pričakujte (guru.getText ()). toEqual ('Pozdravljeni GURU99!')

    Končno preverjamo besedilo, ki smo ga dobili s spletne strani (z uporabo gettext ()) s pričakovanim besedilom.

Logika conf.js:

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

Razlaga kode conf.js

  1. seleniumAddress: 'http: // localhost: 4444 / wd / hub'

    Datoteka z nastavitvami sporoča Protraktorju lokacijo naslova Selenium za pogovor s programom Selenium WebDriver.

  2. očala: ['spec.js']

    Ta vrstica pove Protraktorju lokacijo testnih datotek spec.js

Izvajanje kodeksa

Tukaj prvič, bomo spremenili pot imenika ali pojdite v mapo, kjer so confi.js in spec.js postavljen v našem sistemu .

Sledite naslednjim korakom.

Korak 1) Odprite ukazni poziv.

Korak 2) Prepričajte se, da je upravljalnik upravljavcev spletnih gonilnikov selena nameščen in deluje. Za to podajte ukaz kot "webdriver-manager start" in pritisnite Enter .

(Če spletni gonilnik selena ne deluje, ne moremo nadaljevati s testom, saj Protractor ne najde spletnega gonilnika za obdelavo spletne aplikacije)

Korak 3) Odprite nov ukazni poziv in podajte ukaz kot "protractor conf.js" za zagon konfiguracijske datoteke.

Pojasnilo:

  • Tu bo Protractor izvedel konfiguracijsko datoteko z dano datoteko s specifikacijami.
  • Strežnik selena lahko vidimo na " http: // localhost: 4444 / wd / hub ", ki smo ga podali v datoteki conf.js.
  • Tukaj je prikazan tudi rezultat, koliko jih je bilo prenesenih in napak, kot na zgornjem posnetku zaslona .

V redu, rezultat smo preverili, ko je bil sprejet ali kot je bilo pričakovano. Zdaj pa poglejmo tudi rezultat neuspeha.

Korak 1) Odprite in spremenite pričakovani rezultat spec.js v "'Hello change GURU99", kot je prikazano spodaj.

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

Korak 2) Shranite datoteko spec.js in ponovite zgornje korake v razdelku "Izvajanje kode"

Zdaj izvedite zgornje korake.

Rezultat:

Rezultat lahko vidimo kot neuspešen in na posnetku zaslona označen z "F" z razlogom "Pričakovano" Pozdravljeni GURU99! " enako "Pozdravljeni, spremenite GURU99!". Poleg tega prikazuje, koliko napak je pri izvajanju kode.

Ali lahko enako dosežemo s spletnim gonilnikom Selenium?

Včasih lahko s pomočjo izbirnika XPath ali CSS iz spletnega gonilnika Selenium prepoznamo spletne elemente aplikacij AngularJS. Toda v aplikacijah AngularJS se bodo elementi generirali in spreminjali dinamično. Torej je Protractor najboljša praksa za delo z aplikacijami AngularJS.

Ustvari poročila z Jasmine Reporters

Protractor podpira novinarje Jasmine pri pripravi poročil o testih. V tem razdelku bomo uporabili JunitXMLReporter za samodejno generiranje poročil o izvajanju preizkusov v obliki XML.

Sledite spodnjim korakom za ustvarjanje poročil v obliki XML.

Namestitev Jasmine Reporter

To lahko storite lokalno ali globalno na dva načina

  1. Odprti ukazni poziv za lokalno namestitev izvedite naslednji ukaz
npm install --save-dev jasmine-reporters@^2.0.0

Zgoraj ukaz bo namestil jasmine report node-module lokalno, kar pomeni iz imenika, kjer izvajamo ukaz v ukaznem pozivu.

  1. Odprti ukazni poziv izvedite naslednji ukaz za globalno namestitev
npm install -g jasmine-reporters@^2.0.0

V tej vadnici bomo novinarje jasmina namestili lokalno .

Korak 1) Izvedite ukaz.

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

iz ukaznega poziva, kot je spodaj.

Korak 2) Preverite namestitvene mape v imeniku . "Node_modules" bi morali biti na voljo, če je uspešno nameščen, kot na spodnjem posnetku.

Korak 3) V obstoječo datoteko conf.js dodajte naslednjo barvno kodo 

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

Pojasnilo kode:

V kodi ustvarjamo poročilo " JUnitXmlReporter " in podajamo pot, kam shraniti poročilo.

Korak 4) Odprite ukazni poziv in zaženite pomični ukaz conf.js.

Korak 5) Ko zaženete zgornjo kodo, se na omenjeni poti ustvari junitresults.xml.

Korak 6) Odprite XML in preverite rezultat. Sporočilo o napaki je prikazano v datoteki z rezultati, ker testni primer ni uspel. Testni primer ni uspel, ker se zaradi pričakovanega rezultata iz "spec.js" ne ujema z dejanskim rezultatom s spletne strani

Korak 7) Za dokaze ali datoteke z rezultati uporabite datoteko junitresult.xml.

Povzetek:

Čeprav lahko selenij naredi nekaj, kar naredi kotomera, je kot industrijski standard in najboljša praksa za testiranje aplikacij AngularJS. Kratomer lahko v njem upravlja tudi več zmogljivosti in obvladuje dinamične spremembe spletnih elementov z uporabo ng-modela, ng-klika ... itd ... (česar selen ne more narediti).

Ta članek prispeva Ranjith Kumar Enishetti