Kas yra transporterio testavimas?
„PROTRACTOR“ yra automatizavimo ir „nuo galo iki galo“ elgesio testavimo įrankis, kuris vaidina svarbų vaidmenį tikrinant „AngularJS“ programas ir veikia kaip sprendimų integratorius, derinantis tokias galingas technologijas kaip „Selenium“, „Jasmine“, žiniatinklio tvarkyklė ir kt. yra ne tik „AngularJS“ programų testavimas, bet ir automatinių regresijos testų rašymas įprastoms žiniatinklio programoms.
Šioje pradedančiųjų pamokoje sužinosite
- Kodėl mums reikalinga matuoklio sistema?
- Skydelio montavimas
- Pavyzdinis „AngularJS“ programos bandymas naudojant „Protractor“
- Kodekso vykdymas
- Generuokite ataskaitas naudodami „Jasmine Reporters“
Kodėl mums reikalinga matuoklio sistema?
„JavaScript“ naudojamas beveik visose žiniatinklio programose. Augant programoms, „JavaScript“ taip pat didėja ir tampa sudėtingesnė. Tokiu atveju bandytojams tampa sudėtinga užduotis išbandyti žiniatinklio programą pagal įvairius scenarijus.
Kartais sunku užfiksuoti žiniatinklio elementus „AngularJS“ programose naudojant „JUnit“ arba „Selenium WebDriver“.
„Protractor“ yra „NodeJS“ programa, parašyta „JavaScript“ ir veikia kartu su „Node“, kad būtų galima nustatyti žiniatinklio elementus „AngularJS“ programose. Be to, jis naudoja „WebDriver“ valdydamas naršyklę su vartotojo veiksmais.
Gerai, gerai, dabar aptarkime, kas yra „AngularJS“ programa?
„AngularJS“ programos yra žiniatinklio programos, kurios naudoja išplėstinę HTML sintaksę žiniatinklio programų komponentams išreikšti. Jis daugiausia naudojamas dinaminėms interneto programoms. Šios programos naudoja mažiau ir lanksčiau kodą, palyginti su įprastomis žiniatinklio programomis.
Kodėl negalime rasti „Angular JS“ žiniatinklio elementų naudodami „Normal Selenium“ žiniatinklio tvarkyklę?
Kampinės JS programos turi keletą papildomų HTML atributų, tokių kaip „ng-reteater“, „ng-controller“, „ng-model“ ir kt., Kurie nėra įtraukti į „Selenium“ lokatorius. Selenas negali nustatyti tų žiniatinklio elementų naudodamas „Selenium“ kodą. Taigi, „Selenium“ viršuje esantis matuoklis gali tvarkyti ir valdyti tuos atributus žiniatinklio programose.
Žibintuvėlis yra „Angular JS“ pagrįstų programų testavimo sistema. Nors daugumoje sistemų daugiausia dėmesio skiriama „Angular JS“ programų vieneto bandymams atlikti, „Protractor“ sutelkia dėmesį į tikrąjį programos funkcionalumą.
Prieš pradėdami „Protractor“, turime įdiegti:
- Selenas
„Selenium“ diegimo veiksmus galite rasti šiose nuorodose (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM („Node.js“)
„NodeJS“ diegimas, norėdami įdiegti „Protractor“, turime įdiegti „NodeJS“. Šiuos diegimo veiksmus rasite šioje nuorodoje. (https://www.guru99.com/download-install-node-js.html)
Skydelio montavimas
1 žingsnis) Atidarykite komandų eilutę ir įveskite „npm install -g protractor“ ir paspauskite Enter .
Pirmiau nurodyta komanda atsisiųs reikiamus failus ir įdiegs „Protractor“ į kliento sistemą.
2 žingsnis) Patikrinkite diegimą ir versiją naudodami „ Protractor --version “. Jei tai bus sėkminga, bus rodoma versija, kaip parodyta žemiau esančiame ekrano kopijoje. Jei ne, dar kartą atlikite 1 veiksmą.
(3 ir 4 žingsniai yra neprivalomi, tačiau rekomenduojami geresnei praktikai)
3 žingsnis. Atnaujinkite žiniatinklio tvarkyklių tvarkyklę. Žiniatinklio tvarkyklių tvarkyklė naudojama atliekant bandymus su kampine interneto programa konkrečioje naršyklėje. Įdiegus „Protractor“, reikia atnaujinti žiniatinklio tvarkyklių tvarkyklę į naujausią versiją. Tai galima padaryti paleisdami šią komandą komandų eilutėje.
webdriver-manager update
4 žingsnis) Paleiskite žiniatinklio tvarkyklių tvarkyklę. Šis žingsnis veiks žiniatinklio tvarkyklių tvarkyklę fone ir išklausys visus bandymus, vykdomus per sklendę.
Kai „Protractor“ bus naudojamas bet kokiam bandymui atlikti, žiniatinklio tvarkyklė automatiškai įkels ir vykdys testą atitinkamoje naršyklėje. Norint paleisti žiniatinklio tvarkyklių tvarkyklę, komandinėje eilutėje reikia vykdyti šią komandą.
webdriver-manager start
Dabar, jei naršyklėje eisite į šį URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), fone pamatysite žiniatinklio tvarkyklių tvarkyklę, veikiančią fone.
Pavyzdinis „AngularJS“ programos bandymas naudojant „Protractor“
Protraktoriui paleisti reikia dviejų failų, spec failo ir konfigūracijos failo.
- Konfigūracijos failas : Šis failas padeda matuokliui nukreipti bandomuosius failus (specs.js) ir kalbėtis su „Selenium“ serveriu („Selenium“ adresas). „Chrome“ yra numatytoji „Protractor“ naršyklė.
- Spec failas: Šiame faile yra logika ir lokatoriai, skirti sąveikauti su programa .
1 žingsnis) Turime prisijungti https://angularjs.org ir įvesti tekstą kaip „GURU99“ teksto laukelyje „Įveskite vardą čia“.
2 žingsnis) Šiame žingsnyje
- Įvedėte pavadinimą „Guru99“
- Išvesties tekste matomas „Hello Guru99“.
3 žingsnis) Dabar mes turime užfiksuoti tekstą iš tinklalapio, įvedę pavadinimą ir patvirtinti tikėtinu tekstu .
Kodas:
Turime paruošti konfigūracijos failą (conf.js) ir spec failą (spec.js), kaip minėta aukščiau.
Spec.js logika:
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!');});});
Spec.js kodo paaiškinimas:
- aprašyti ('Įveskite GURU99 pavadinimą', funkcija ()
Aprašoma sintaksė yra iš „Jasmine“ sistemos. Čia „aprašykite“ („Įveskite GURU99 pavadinimą“) paprastai apibrėžiamos programos dalys, kurios gali būti klasė ar funkcija ir pan. Kodo rinkinyje, vadinamame „Įveskite GURU99“, tai tik eilutė, o ne kodas.
- it ('turėtų pridėti pavadinimą kaip GURU99', funkcija ()
- browser.get ('https://angularjs.org')
Kaip ir „Selenium Webdriver browser.get“ atidarys naują naršyklės egzempliorių su nurodytu URL.
- elementas (by.model ('tavo vardas')). sendKeys ('GURU99')
Čia randame žiniatinklio elementą, kurio modelio pavadinimas naudojamas kaip „jūsų vardas“, o tai yra „ng-model“ vertė tinklalapyje. Patikrinkite toliau pateiktą ekrano kopiją
- var guru = elementas (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Čia mes randame žiniatinklio elementą naudodami XPath ir saugome jo vertę kintamajame „guru“ .
- tikėtis (guru.getText ()). toEqual ('Sveiki, GURU99!')
Galiausiai patikriname tekstą, kurį gavome iš tinklalapio (naudodami gettext ()) su numatomu tekstu.
„Conf.js“ logika:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Kodas Paaiškinimas conf.js
- selenas Adresas: „http: // localhost: 4444 / wd / hub“
Konfigūracijos failas „Protractor“ nurodo „Selenium“ adreso vietą kalbėti su „Selenium WebDriver“.
- specifikacijos: ['spec.js']
Ši eilutė matuokliui nurodo bandomųjų failų vietą spec.js
Kodekso vykdymas
Pirmiausia pakeisime katalogo kelią arba pereisime į aplanką, kuriame yra „confi.js“ ir „spec.js“ mūsų sistemoje .
Atlikite šį veiksmą.
1 žingsnis) Atidarykite komandų eilutę.
2 žingsnis. Įsitikinkite, kad seleno žiniatinklio tvarkyklių tvarkyklė veikia ir veikia. Už tai duokite komandą kaip „webdriver-manager start“ ir paspauskite Enter .
(Jei seleno žiniatinklio tvarkyklė neveikia ir veikia, mes negalime tęsti bandymo, nes „Protractor“ negali rasti žiniatinklio tvarkyklės, kuri galėtų tvarkyti žiniatinklio programą)
3 žingsnis. Atidarykite naują komandų eilutę ir nurodykite komandą kaip „protractor conf.js“, kad paleistumėte konfigūracijos failą.
Paaiškinimas:
- Čia „Protractor“ vykdys konfigūracijos failą su jame pateiktu specifikacijos failu.
- Mes galime pamatyti seleno serverį, veikiantį „ http: // localhost: 4444 / wd / hub “, kurį pateikėme faile conf.js.
- Be to, čia galite pamatyti rezultatą, kiek perduota ir nesėkmių, kaip nurodyta aukščiau esančioje ekrano kopijoje .
Puiku, mes patikrinome rezultatą, kai jis bus išlaikytas arba kaip tikėtasi. Dabar panagrinėkime ir nesėkmingą rezultatą.
1 žingsnis. Atidarykite ir pakeiskite, kaip tikimasi, kad spec.js bus „Sveiki, pakeiskite GURU99“, kaip nurodyta toliau.
Pakeitus 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!');});});
2 žingsnis) Išsaugokite failą spec.js ir pakartokite aukščiau nurodytus skyriaus „Kodo vykdymas“ veiksmus
Dabar atlikite aukščiau nurodytus veiksmus.
Rezultatas:
Rezultatą galime pamatyti kaip nepavykusį, ekrano kopijoje pažymėtą „F“ su priežastimi kaip „Tikėtasi“ Sveiki, GURU99! lygi „Sveiki, pakeiskite GURU99!“. Be to, tai parodo, kiek gedimų įvyko vykdant kodą.
Ar galime pasiekti tą patį su „Selenium“ žiniatinklio tvarkykle?
Kartais galime nustatyti „AngularJS“ programų žiniatinklio elementus naudodami „XPath“ arba CSS selektorių iš „Selenium“ žiniatinklio tvarkyklės. Bet „AngularJS“ programose elementai bus generuojami ir dinamiškai keičiami. Taigi „Protractor“ yra geresnė praktika dirbant su „AngularJS“ programomis.
Generuokite ataskaitas naudodami „Jasmine Reporters“
„Protractor“ padeda „Jasmine“ žurnalistams kurti bandymų ataskaitas. Šiame skyriuje mes naudosime „JunitXMLReporter“, kad bandymo vykdymo ataskaitos būtų generuojamos automatiškai XML formatu.
Norėdami sukurti ataskaitas XML formatu, atlikite toliau nurodytus veiksmus.
„Jasmine Reporter“ diegimas
Tai galite padaryti dviem būdais - vietiniu ar pasauliniu mastu
- Atidarykite komandų eilutę vykdykite šią komandą, kad įdiegtumėte vietoje
npm install --save-dev jasmine-reporters@^2.0.0
Aukščiau komanda įdiegs „jasmine“ ataskaitas mazgų moduliai lokaliai reiškia iš katalogo, kuriame vykdome komandą komandų eilutėje.
- Atidarykite komandų eilutę vykdydami šią komandą visuotiniam diegimui
npm install -g jasmine-reporters@^2.0.0
Šioje pamokoje jazminų žurnalistus įdiegsime vietoje .
1 žingsnis) Vykdykite komandą.
npm install --save-dev jasmine-reporters@^2.0.0
iš komandų eilutės, kaip nurodyta toliau.
2 žingsnis) Patikrinkite kataloge esančius diegimo aplankus . "Mazgo_moduliai" turėtų būti prieinami, jei jis sėkmingai įdiegtas, kaip parodyta toliau pateiktoje momentinėje nuotraukoje.
3 žingsnis) Įtraukite šį spalvotą kodą į egzistuojantį failą conf.js
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));}};
Kodo paaiškinimas:
Kode generuojame ataskaitą „ JUnitXmlReporter “ ir nurodome kelią, kur išsaugoti ataskaitą.
4 žingsnis. Atidarykite komandų eilutę ir vykdykite komandos protraktorių conf.js.
5 žingsnis) Kai vykdysite aukščiau nurodytą kodą, junitresults.xml bus sugeneruotas minėtame kelyje.
6 žingsnis) Atidarykite XML ir patikrinkite rezultatą. Gedimo pranešimas rodomas rezultatų faile, nes mūsų bandymo atvejis nepavyko. Bandomasis atvejis nepavyko, nes laukiamas „spec.js“ rezultatas neatitinka tikrojo tinklalapio rezultato
7 žingsnis. Įrodymams ar rezultatų failams naudokite failą junitresult.xml.
Santrauka:
Nors selenas gali atlikti kai kuriuos dalykus, kuriuos daro transporteris, jis yra pramoninis standartas ir geriausia praktika išbandyti „AngularJS“ programas. Darbalaukis taip pat gali valdyti kelias jo galimybes ir valdyti dinaminius žiniatinklio elementų pokyčius naudodamas ng modelį, ng paspaudimą… ir kt.
Prie šio straipsnio prisidėjo Ranjithas Kumaras Enishetti
