Protraktori testimise õpetus: automaatika tööriista raamistik

Lang L: none (table-of-contents):

Anonim

Mis on protraktori testimine?

PROTRACTOR on automatiseerimise ja otsast lõpuni käitumispõhine testimisvahend, mis mängib AngularJS-rakenduste testimisel olulist rolli ja töötab lahenduse integraatorina, mis ühendab endas võimsaid tehnoloogiaid nagu seleen, jasmiin, veebidraiver jne. Protractor Testing eesmärk ei ole mitte ainult AngularJS-i rakenduste testimine, vaid ka tavaliste veebirakenduste automatiseeritud regressioonitestide kirjutamine.

Selles algaja õpetuses saate teada

  • Miks on meil vaja protraktori raamistikku?
  • Protraktori paigaldamine
  • Rakenduse AngularJS testimise näidis Protractori abil
  • Koodeksi täitmine
  • Looge aruandeid Jasmine Reporterite abil

Miks on meil vaja protraktori raamistikku?

JavaScripti kasutatakse peaaegu kõigis veebirakendustes. Rakenduste kasvades suureneb ka JavaScripti suurus ja keerukus. Sellisel juhul on testijate jaoks keeruline ülesanne testida veebirakendust erinevate stsenaariumide jaoks.

Mõnikord on JUniti või Selenium WebDriveri abil keeruline veebielemente jäädvustada rakendustes AngularJS.

Protractor on NodeJS-i programm, mis on kirjutatud JavaScripti abil ja töötab koos Node'iga veebielementide tuvastamiseks AngularJS-i rakendustes. Samuti kasutab see veebidraiverit brauseri juhtimiseks kasutaja toimingutega.

Okei, nüüd arutame, mis täpselt on AngularJS-i rakendus?

AngularJS-rakendused on veebirakendused, mis kasutavad laiendatud HTML-i süntaksit veebirakenduse komponentide väljendamiseks. Seda kasutatakse peamiselt dünaamiliste veebirakenduste jaoks. Need rakendused kasutavad tavaliste veebirakendustega võrreldes vähem ja paindlikumat koodi.

Miks me ei leia nurk JS-i veebielemente, kasutades tavalise seleeni veebidraiverit?

Nurga all asuvatel JS-i rakendustel on mõned täiendavad HTML-atribuudid, nagu ng-repeater, ng-controller, ng-model ... jne, mis ei kuulu Seleeni lokaatorite hulka. Seleen ei suuda seleeni koodi abil neid veebielemente tuvastada. Niisiis saab seleeni ülaosas olev kraadiklaas neid atribuute veebirakendustes hallata ja juhtida.

Protraktor on nurga JS-põhiste rakenduste testimise raamistik. Kui enamik raamistikke keskendub JK rakenduste ühikutestide läbiviimisele, siis Protractor keskendub rakenduse tegeliku funktsionaalsuse testimisele.

Enne Protractori käivitamist peame installima järgmise:

  1. Seleen

    Seleeni installimise sammud leiate järgmistelt linkidelt (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    NodeJS-i installimine, peame Protractori installimiseks installima NodeJS-i. Selle installimise sammud leiate järgmiselt lingilt. (https://www.guru99.com/download-install-node-js.html)

Protraktori paigaldamine

Samm 1) Avage käsuviip ja tippige "npm install -g protractor" ja vajutage sisestusklahvi .

Ülaltoodud käsk laadib alla vajalikud failid ja installib Protractori kliendisüsteemi.

2. samm. Kontrollige installimist ja versiooni, kasutades käsku " Protractor --version ". Kui see õnnestub, näitab see versiooni nagu allpool oleval ekraanipildil. Kui ei, siis tehke 1. toiming uuesti.

(3. ja 4. etapp on valikuline, kuid soovitatakse parema tava saamiseks)

Samm 3) Värskendage veebidraiverihaldurit. Veebidraiverihaldurit kasutatakse nurgelise veebirakenduse testide käivitamiseks konkreetses brauseris. Pärast Protractori installimist tuleb veebidraiverihaldur uuendada uusimale versioonile. Seda saab teha, käivitades käsureal järgmise käsu.

webdriver-manager update

4. samm. Käivitage veebidraiverihaldur. See samm käivitab taustal veebidraiverihalduri ja kuulab kõiki protraktori kaudu käivitatavaid teste.

Kui Protractorit on mis tahes testi käivitamiseks kasutatud, laadib veebidraiver automaatselt testi ja käivitab selle vastavas brauseris. Veebidraiverihalduri käivitamiseks tuleb käsuviibalt käivitada järgmine käsk.

webdriver-manager start

Kui te lähete oma brauseris järgmisele URL- ile ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), näete tegelikult taustal töötavat veebidraiverihaldurit .

Rakenduse AngularJS testimise näidis Protractori abil

Protraktor vajab käivitamiseks kahte faili, spetsifaili ja konfiguratsioonifaili .

  1. Konfiguratsioonifail : see fail aitab protraktorit testfailide asukohta (specs.js) ja seleeniserveriga (seleeniaadress) suhelda. Chrome on Protractori vaikebrauser.
  1. Spetsifail: see fail sisaldab loogikat ja lokaatoreid rakendusega suhtlemiseks .

Samm 1) Peame sisse logima https://angularjs.org ja sisestama tekstikasti "Sisesta nimi siia" teksti "GURU99".

2. samm. Selles etapis

  1. Sisestatud nimi "Guru99"
  2. Väljundtekstis on näha "Hello Guru99".

Samm 3) Nüüd peame pärast nime sisestamist veebisaidilt teksti jäädvustama ja peame eeldatava tekstiga kinnitama .

Kood:

Peame valmistama konfiguratsioonifaili (conf.js) ja spec-faili (spec.js), nagu eespool mainitud.

Spec.js loogika:

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

Kood Spec.js selgitus:

  1. kirjeldage ('Sisestage GURU99 nimi', funktsioon ()

    Kirjeldav süntaks pärineb Jasmine raamistikust. Siin kirjeldab kirjeldus ('Enter GURU99 nimi') tavaliselt rakenduse komponente, mis võivad olla klass või funktsioon jne. Koodikomplektis, mida nimetatakse "Enter GURU99", on see lihtsalt string, mitte kood.

  2. it ('peaks lisama nime kui GURU99', funktsioon ()
  3. browser.get ('https://angularjs.org')

    Sarnaselt Seleniumi veebidraiveriga avab brauser.get uue brauseri eksemplari mainitud URL-iga.

  4. element (by.model ('teieNimi')). sendKeys ('GURU99')

    Siit leiame veebielemendi, mis kasutab mudeli nime kui "teieNimi", mis on veebisaidil "ng-model" väärtus. Kontrollige allolevat ekraanipilti-

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

    Siit leiame XPathi abil veebielemendi ja salvestame selle väärtuse muutujasse "guru" .

  2. oodata (guru.getText ()). toEqual ('Tere, GURU99!')

    Lõpuks kontrollime veebisaidilt saadud teksti (kasutades gettext ()) oodatava tekstiga.

Conf.js loogika:

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

Kood conf.js selgitus

  1. seleenAadress: "http: // localhost: 4444 / wd / hub"

    Konfiguratsioonifail ütleb Protractorile seleeniaadressi, et seleeni WebDriveriga rääkida.

  2. tehnilised andmed: ['spec.js']

    See rida ütleb Protractorile katsefailide spec.js asukoha

Koodeksi täitmine

Kõigepealt muudame kataloogi teed või navigeerime kausta, kus confi.js ja spec.js meie süsteemis asuvad .

Järgige järgmist sammu.

Samm 1) Avage käsuviip.

2. samm. Veenduge, et seleeni veebidraiverihaldur oleks töökorras. Selleks andke käsk "webdriver-manager start" ja vajutage Enter .

(Kui seleeni veebidraiver pole üleval ja töötab, ei saa me katset jätkata, kuna Protractor ei leia veebidraiverit veebirakenduse haldamiseks)

Samm 3) Avage uus käsuviip ja määrake konfiguratsioonifaili käivitamiseks käsk "protractor conf.js" .

Selgitus:

  • Siin käivitab Protractor konfiguratsioonifaili selles sisalduva spetsifailiga.
  • Näeme seleeniserverit töötamas aadressil " http: // localhost: 4444 / wd / hub ", mille oleme andnud faili conf.js.
  • Samuti näete siin tulemust, kui palju on läbitud ja ebaõnnestumisi, nagu ülaltoodud ekraanipildil .

Hea, oleme tulemuse kontrollinud, kui see on läbitud või nagu oodatud. Vaatame nüüd ka ebaõnnestunud tulemusi.

Samm 1) Avage ja muutke eeldatavasti spec.js nimega "'Tere, muuda GURU99" nagu allpool.

Pärast spec.js muutmist :

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

Samm 2) Salvestage fail spec.js ja korrake jaotise "Koodi täitmine" ülaltoodud samme

Nüüd tehke ülaltoodud toimingud.

Tulemus:

Näeme tulemust ebaõnnestunud, tähistades ekraanipildil tähega „F” põhjusega „Oodatud” Tere GURU99! ” võrdseks 'Tere, muuda GURU99!'. Samuti näitab see, kui palju tõrkeid on koodi käivitamisel ette tulnud.

Kas suudame sama saavutada ka Seleniumi veebidraiveriga?

Mõnikord suudame AngularJS-i rakenduste veebielemendid tuvastada, kasutades Seleniumi veebidraiveri valijat XPath või CSS. Kuid AngularJS-i rakendustes genereeritakse ja muudetakse elemente dünaamiliselt. Seega on Protractor parem tava AngularJS-rakendustega töötamiseks.

Looge aruandeid Jasmine Reporterite abil

Protractor toetab Jasmiini reportereid testiaruannete loomisel. Selles jaotises kasutame testi täitmise aruannete loomiseks XML-vormingus JunitXMLReporterit.

XML-vormingus aruannete loomiseks toimige järgmiselt.

Jasmiini reporteri installimine

Kohalikult või globaalselt saate seda teha kahel viisil

  1. Ava käsuviip käivitage järgmine käsk kohalikult installimiseks
npm install --save-dev jasmine-reporters@^2.0.0

Ülal olev käsk installib jasmiini aruanded sõlmpoodulid kohalikult kataloogist, kus käsku käsus käivitame.

  1. Ava käsuviip täidab globaalse installimise jaoks järgmise käsu
npm install -g jasmine-reporters@^2.0.0

Selles õpetuses installime jasmiini reporterid kohapeal .

Samm 1) Käivitage käsk.

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

käsurealt nagu allpool.

2. samm. Kontrollige kataloogi installikaustu . "Node_modules" peaks olema saadaval, kui see on edukalt installitud nagu allpool olevas hetktõmmis.

Samm 3) Lisage järgmine värviline kood olemasolevasse faili 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));}};

Koodi selgitus:

Koodis genereerime aruande " JUnitXmlReporter " ja anname tee, kuhu aruanne salvestada.

Samm 4) Avage käsuviip ja käivitage käsklüliti conf.js.

Samm 5) Kui käivitate ülaltoodud koodi, genereeritakse mainitud teekonnal junitresults.xml.

Samm 6) Avage XML ja kontrollige tulemust. Rikke teadet kuvatakse tulemuse failis, kuna meie testjuhtum ebaõnnestus. Testjuhtum ebaõnnestus, kuna "spec.js" oodatava tulemuse tõttu ei sobinud veebilehe tegelik tulemus

7. samm . Tõendite või tulemuste failide jaoks kasutage faili junitresult.xml.

Kokkuvõte:

Kuigi seleen suudab teha mõningaid asju, mida protraktor teeb, on protraktor AngularJS-i rakenduste testimiseks tööstuslik standard ja parim tava. Protraktor saab hallata ka selle mitut võimalust ja hallata veebielementide dünaamilisi muutusi, kasutades ng-mudelit, ng-click… jne (mida seleen ei saa teha).

Selle artikli autor on Ranjith Kumar Enishetti