Mikä on astelevyn testaus?
PROTRACTOR on automaatio- ja end-to-end-käyttäytymisohjattu testaustyökalu, jolla on tärkeä rooli AngularJS-sovellusten testauksessa ja joka toimii ratkaisuintegraattorina, joka yhdistää tehokkaita tekniikoita, kuten seleeni, Jasmine, web-ohjain jne. ei ole vain AngularJS-sovellusten testaaminen, vaan myös automaattisten regressiotestien kirjoittaminen normaaleille verkkosovelluksille.
Tässä aloittelijan opetusohjelmassa opit-
- Miksi tarvitsemme astelevykehystä?
- Astelevyn asennus
- Näyte AngularJS-sovellustestauksesta Protractorilla
- Säännöstön toteutus
- Luo raportteja Jasmine-toimittajien avulla
Miksi tarvitsemme astelevykehystä?
JavaScriptiä käytetään melkein kaikissa verkkosovelluksissa. Sovellusten kasvaessa myös JavaScript kasvaa kooltaan ja monimutkaisuudeltaan. Tällöin testaajien on vaikea tehtävä testata verkkosovellusta erilaisissa tilanteissa.
Joskus on vaikea kaapata verkkoelementtejä AngularJS-sovelluksissa käyttämällä JUnit- tai Selenium WebDriver -ohjelmaa.
Protractor on NodeJS-ohjelma, joka on kirjoitettu JavaScript-muodossa ja toimii Noden kanssa tunnistamaan verkkoelementit AngularJS-sovelluksissa, ja se käyttää myös WebDriveria ohjaamaan selainta käyttäjän toimilla.
Okei, keskustellaan nyt, mikä on AngularJS-sovellus?
AngularJS-sovellukset ovat verkkosovelluksia, jotka käyttävät laajennettua HTML: n syntaksia verkkosovellusten komponenttien ilmaisemiseen. Sitä käytetään pääasiassa dynaamisissa verkkosovelluksissa. Nämä sovellukset käyttävät vähemmän ja joustavaa koodia kuin tavalliset verkkosovellukset.
Miksi emme löydä kulmikkaita JS-verkkoelementtejä Normal Selenium Web -ohjaimen avulla?
Kulmallisissa JS-sovelluksissa on joitain ylimääräisiä HTML-määritteitä, kuten ng-toistin, ng-ohjain, ng-malli ... jne., Jotka eivät sisälly Selenium-paikannimiin. Selenium ei pysty tunnistamaan näitä verkkoelementtejä Selenium-koodilla. Joten seleenin päällä oleva astelevy pystyy käsittelemään ja hallitsemaan näitä määritteitä Web-sovelluksissa.
Astelevy on end-to-end-testikehys Angular JS -perusteisille sovelluksille. Vaikka suurin osa kehyksistä keskittyy yksikkötestien suorittamiseen Angular JS -sovelluksille, Protractor keskittyy sovelluksen todellisen toiminnallisuuden testaamiseen.
Ennen kuin aloitamme Protractorin, meidän on asennettava seuraavat:
- Seleeni
Selenium-asennusvaiheet löytyvät seuraavista linkeistä (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
NodeJS-asennus, meidän on asennettava NodeJS Protractorin asentamiseksi. Löydät nämä asennusvaiheet seuraavasta linkistä. (https://www.guru99.com/download-install-node-js.html)
Astelevyn asennus
Vaihe 1) Avaa komentokehote ja kirjoita "npm install -g protractor" ja paina Enter .
Yllä oleva komento lataa tarvittavat tiedostot ja asentaa Protractorin asiakasjärjestelmään.
Vaihe 2) Tarkista asennus ja versio " Protractor --version " -toiminnolla . Jos se onnistuu, se näyttää version kuten alla olevassa kuvakaappauksessa. Jos ei, suorita vaihe 1 uudelleen.
(Vaiheet 3 ja 4 ovat valinnaisia, mutta suositeltavia parempien käytäntöjen saavuttamiseksi)
Vaihe 3) Päivitä Web-ohjaimen hallinta. Verkkoajurien hallintaa käytetään testien suorittamiseen kulmaista verkkosovellusta vastaan tietyssä selaimessa. Kun Protractor on asennettu, verkkoajurien hallinta on päivitettävä uusimpaan versioon. Tämä voidaan tehdä suorittamalla seuraava komento komentokehotteessa.
webdriver-manager update
Vaihe 4) Käynnistä web-ohjaimen hallinta. Tämä vaihe suorittaa web-ohjaimen hallinnan taustalla ja kuuntelee asteikon kautta suoritettavia testejä.
Kun Protractoria käytetään minkä tahansa testin suorittamiseen, verkkoajuri lataa ja suorittaa testin automaattisesti asianomaisessa selaimessa. Web-ohjaimen hallinnan käynnistäminen edellyttää seuraavaa komentoa komentokehotteesta.
webdriver-manager start
Jos nyt siirryt selaimesi seuraavaan URL-osoitteeseen ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), näet itse asiassa Web-ohjaimen hallinnan käynnissä taustalla.
Näyte AngularJS-sovellustestauksesta Protractorilla
Suorituskulma tarvitsee kaksi tiedostoa, spec- tiedoston ja määritystiedoston .
- Kokoonpanotiedosto : Tämä tiedosto auttaa astelevyä testitiedostojen sijoituspaikkaan (specs.js) ja puhumaan Selenium-palvelimen (Selenium-osoite) kanssa. Chrome on Protractorin oletusselain.
- Spec-tiedosto: Tämä tiedosto sisältää logiikan ja paikantimet, jotka ovat vuorovaikutuksessa sovelluksen kanssa .
Vaihe 1) Meidän on kirjauduttava sisään osoitteessa https://angularjs.org ja kirjoitettava teksti "GURU99" -kenttään "Kirjoita nimi tähän" -tekstikenttään.
Vaihe 2) Tässä vaiheessa
- Annettiin nimi "Guru99"
- Lähtötekstissä näkyy "Hello Guru99".
Vaihe 3) Nyt meidän on siepattava teksti verkkosivulta kirjoittamisen jälkeen nimi ja tarkistettava odotetulla tekstillä .
Koodi:
Meidän on valmisteltava määritystiedosto (conf.js) ja spec-tiedosto (spec.js) edellä mainitulla tavalla.
Spec.js: n logiikka:
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!');});});
Koodi Selitys spec.js: lle:
- kuvaa ('Syötä GURU99-nimi', funktio ()
Kuvattu syntakse on peräisin Jasmine-kehyksestä. Tässä "description" ('Enter GURU99 Name') määrittelee tyypillisesti sovelluksen komponentit, jotka voivat olla luokka tai funktio jne. "Enter GURU99" -nimisessä koodipaketissa se on vain merkkijono eikä koodi.
- se ('pitäisi lisätä nimi nimellä GURU99', funktio ()
- browser.get ('https://angularjs.org')
Kuten Selenium Webdriver browser.get -sovelluksessa, se avaa uuden selaininstanssin mainitulla URL-osoitteella.
- elementti (jonka malli ('sinun nimesi')). sendKeys ('GURU99')
Täältä löydämme verkkoelementin, joka käyttää mallinimeä nimellä "omaNimesi", joka on verkkosivun "ng-malli" -arvo. Tarkista alla oleva näyttökuva-
- var guru = elementti (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Täältä löydämme verkkoelementin XPathin avulla ja tallennamme sen arvon muuttujaan "guru" .
- odottaa (guru.getText ()). toEqual ('Hei GURU99!')
Lopuksi tarkistamme verkkosivulta saamamme tekstin (käyttäen gettext ()) odotetulla tekstillä.
Conf.js: n logiikka:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Koodi Selitys conf.js: lle
- seleeniosoite: 'http: // localhost: 4444 / wd / hub'
Määritystiedosto kertoo Protractorille Selenium-osoitteen sijainnin puhuakseen Selenium WebDriverin kanssa.
- tekniset tiedot: ['spec.js']
Tämä rivi kertoo Protractorille testitiedostojen sijainnin spec.js
Säännöstön toteutus
Tässä muutetaan ensin hakemistopolku tai navigoidaan kansioon, johon confi.js ja spec.js sijoitetaan järjestelmäämme .
Noudata seuraavaa vaihetta.
Vaihe 1) Avaa komentokehote.
Vaihe 2) Varmista, että seleeni-web-ohjaimen hallinta on käynnissä. Anna tällöin komento "webdriver-manager start" ja paina Enter .
(Jos seleeni-web-ohjain ei ole käynnissä, emme voi jatkaa testiä, koska Protractor ei löydä verkko-ohjainta käsittelemään verkkosovellusta)
Vaihe 3) Avaa uusi komentokehote ja anna komento "protractor conf.js" suorittaaksesi määritystiedoston.
Selitys:
- Tässä Protractor suorittaa määritystiedoston, jossa on annettu spec-tiedosto.
- Voimme nähdä selenium-palvelimen käynnissä osoitteessa " http: // localhost: 4444 / wd / hub ", jonka olemme antaneet conf.js-tiedostossa.
- Täältä näet myös tuloksen kuinka monta ohitettua ja epäonnistumista kuten yllä olevassa kuvakaappauksessa .
Hienoa, olemme tarkistaneet tuloksen, kun se on läpäissyt tai odotetusti. Katsotaan nyt myös epäonnistuneita tuloksia.
Vaihe 1) Avaa ja muutos, jonka odotetaan aiheuttavan spec.js: n "" Hei vaihda GURU99 ", kuten alla.
Muutoksen jälkeen 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!');});});
Vaihe 2) Tallenna spec.js-tiedosto ja toista yllä "Koodin suorittaminen" -osion vaiheet
Suorita nyt yllä olevat vaiheet.
Tulos:
Voimme nähdä tuloksen epäonnistuneena, ja kuvakaappauksessa on merkitty 'F': llä syynä "Odotettu" Hei GURU99! " "Hei vaihda GURU99!". Se osoittaa myös kuinka monta vikaa on tapahtunut koodia suoritettaessa.
Voimmeko saavuttaa saman Selenium-verkkoajurilla?
Joskus voimme tunnistaa AngularJS-sovellusten verkkoelementit käyttämällä XPath- tai CSS-valitsinta Selenium-verkkoajurista. Mutta AngularJS-sovelluksissa elementit luodaan ja niitä muutetaan dynaamisesti. Joten Protractor on parempi käytäntö työskennellä AngularJS-sovellusten kanssa.
Luo raportteja Jasmine-toimittajien avulla
Protractor tukee Jasmine-toimittajia testausraporttien luomisessa. Tässä osassa käytämme JunitXMLReporteria testauksen suoritusraporttien luomiseen automaattisesti XML-muodossa.
Luo raportit XML-muodossa noudattamalla seuraavia ohjeita.
Jasmine Reporterin asennus
Voit tehdä tämän kahdella tavalla, paikallisesti tai maailmanlaajuisesti
- Avaa komentokehote suorittamalla seuraava komento asentaaksesi paikallisesti
npm install --save-dev jasmine-reporters@^2.0.0
Yllä oleva komento asentaa jasmiiniraportit solmumoduulit paikallisesti tarkoittaa hakemistosta, jossa suoritamme komentoa komentokehotteessa.
- Avaa komentokehote suorita seuraava komento globaalia asennusta varten
npm install -g jasmine-reporters@^2.0.0
Tässä opetusohjelmassa asennamme jasmiinitoimittajat paikallisesti .
Vaihe 1) Suorita komento.
npm install --save-dev jasmine-reporters@^2.0.0
komentokehotteesta kuten alla.
Vaihe 2) Tarkista hakemiston asennuskansiot . "Solmumoduulien" pitäisi olla käytettävissä, jos se on asennettu onnistuneesti kuten alla olevassa tilannekuvassa.
Vaihe 3) Lisää seuraava värillinen koodi olemassa olevaan conf.js-tiedostoon
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));}};
Koodin selitys:
Koodina luomme raportin " JUnitXmlReporter " ja annamme polun, johon raportti tallennetaan.
Vaihe 4) Avaa komentokehote ja suorita komentosensori conf.js.
Vaihe 5) Kun suoritat yllä olevan koodin, junitresults.xml luodaan mainitulle polulle.
Vaihe 6) Avaa XML ja tarkista tulos. Epäonnistumisviesti näkyy tulostiedostossa, koska testitapauksemme epäonnistui. Testitapaus epäonnistui, koska "spec.js": n odotettua tulosta ei ole sovitettu verkkosivun todelliseen tulokseen
Vaihe 7) Käytä junitresult.xml-tiedostoa todisteisiin tai tulostiedostoihin.
Yhteenveto:
Vaikka seleeni voi tehdä joitain asioita, joita astelevy tekee, astelevy on teollisuusstandardi ja paras käytäntö AngularJS-sovellusten testaamiseen. Astelevy voi myös hallita useita ominaisuuksia siinä ja käsitellä verkkoelementtien dynaamisia muutoksia käyttämällä ng-mallia, ng-napsautusta… jne. (Mitä seleeni ei voi tehdä).
Tämän artikkelin on kirjoittanut Ranjith Kumar Enishetti