Protractor Testing Tutorial: Automation Tool Framework

Miksi tarvitsemme astemittarikehyksen?

JavaKomentosarjaa käytetään melkein kaikissa verkkosovelluksissa. Sovellusten kasvaessa, JavaKäsikirjoitus myös koko ja monimutkaisuus kasvavat. Tällaisessa tapauksessa testaajien on vaikea testata verkkosovellusta eri skenaarioissa.

Joskus on vaikea kaapata verkkoelementtejä AngularJS-sovelluksissa käyttämällä JUnit or Selenium WebDriver.

Protractor on NodeJS-ohjelma, joka on kirjoitettu sisään JavaKomentosarja ja toimii Noden kanssa tunnistaakseen verkkoelementit AngularJS-sovelluksissa, ja se käyttää myös WebDriveria ohjaamaan selainta käyttäjän toimilla.

Okei, nyt keskustellaan siitä, mikä AngularJS-sovellus tarkalleen on?

AngularJS-sovellukset ovat verkkosovelluksia, jotka käyttävät laajennettua HTML:n syntaksia web-sovelluskomponenttien ilmaisemiseen. Sitä käytetään pääasiassa dynaamisissa verkkosovelluksissa. Nämä sovellukset käyttävät vähemmän ja joustavaa koodia tavallisiin verkkosovelluksiin verrattuna.

Miksi emme löydä Angular JS -verkkoelementtejä käyttämällä Normaalia Selenium Web-ohjain?

Angular JS -sovelluksissa on joitain ylimääräisiä HTML-attribuutteja, kuten ng-toistin, ng-ohjain, ng-malli jne., jotka eivät sisälly Selenium paikantimet. Selenium ei pysty tunnistamaan näitä verkkoelementtejä käyttämällä Selenium koodi. Joten, astemittari päällä Selenium pystyy käsittelemään ja hallitsemaan näitä määritteitä Web-sovelluksissa.

Astemittari on päästä päähän -testauskehys Angular JS -pohjaisille sovelluksille. Useimmat puitteet keskittyvät Angular JS -sovellusten yksikkötestien suorittamiseen, kun taas Protractor keskittyy sovelluksen todellisen toimivuuden testaamiseen.

Ennen kuin aloitamme Protractorin, meidän on asennettava seuraavat:

1. SeleniumVoit löytää Selenium Asennusvaiheet seuraavissa linkeissä, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js)NodeJS-asennus, meidän on asennettava NodeJS asentaaksemme Protractorin. Löydät nämä asennusvaiheet seuraavasta linkistä. ( https://www.guru99.com/download-install-node-js.html )

Asennuslevyn asennus

Vaihe 1) Avaa komentokehote ja kirjoita "npm install -g astemittari" ja paina Enter.

Yllä oleva komento lataa tarvittavat tiedostot ja asentaa Protractorin asiakasjärjestelmään.

Vaihe 2) Tarkista asennus ja versio käyttämällä "Protractor – versio" Jos onnistuu, se näyttää version kuten alla olevassa kuvakaappauksessa. Jos ei, suorita vaihe 1 uudelleen.

(Vaiheet 3 ja 4 ovat valinnaisia, mutta niitä suositellaan paremman harjoituksen vuoksi)

Vaihe 3) Päivitä Web-ohjainten hallinta. Web-ajurien hallintaa käytetään testien suorittamiseen kulmikkaasta verkkosovelluksesta tietyssä selaimessa. Kun Protractor on asennettu, verkkoohjainten hallinta on päivitettävä uusimpaan versioon. Tämä voidaan tehdä suorittamalla seuraava komento komentokehotteessa.

webdriver-manager update

Vaihe 4) Käynnistä Web-ajurien hallinta. Tämä vaihe suorittaa web-ohjainten hallinnan taustalla ja kuuntelee kaikki testit, jotka suoritetaan astelevyn kautta.

Kun Protractoria on käytetty minkä tahansa testin suorittamiseen, verkkoohjain lataa ja suorittaa testin automaattisesti kyseisessä selaimessa. Web-ajurien hallinnan käynnistämiseksi seuraava komento on suoritettava komentokehotteesta.

webdriver-manager start

Jos nyt siirryt seuraavaan URL-osoitteeseen (http://localhost:4444/wd/hub/static/resource/hub.html) selaimessasi, näet itse asiassa Web-ohjainten hallinnan käynnissä taustalla.

Esimerkki AngularJS-sovelluksen testauksesta Protractorilla

Protractor tarvitsee kaksi tiedostoa toimiakseen, a tekniset tiedot tiedostoon ja kokoonpano tiedosto.

1. Asetustiedosto: Tämä tiedosto auttaa mittaamaan testitiedostojen sijoituspaikkaa (specs.js) ja keskustelemaan niiden kanssa Selenium palvelin (Selenium Osoite). Chrome on Protractorin oletusselain.

2. Spec-tiedosto: Tämä tiedosto sisältää logiikan ja paikantimet vuorovaikutuksessa sovelluksen kanssa.

Vaihe 1) Meidän on kirjauduttava sisään https://angularjs.org ja kirjoita teksti "GURU99" "Anna nimi tähän" -tekstiruutuun.

Vaihe 2) Tässä vaiheessa

1. Syötti nimen "Guru99"
2. Tulostekstinä näkyy ”Hello Guru99”.

Vaihe 3) Nyt meidän on kaapattava teksti verkkosivulta nimen syöttämisen jälkeen ja tarkistettava odotetulla tekstillä.

Koodi:

Meidän on valmisteltava asetustiedosto (conf.js) ja spec-tiedosto (spec.js) kuten yllä mainittu.

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:

1. kuvata('Syötä GURU99-nimi', function()Kuvaussyntaksi on Jasmine-kehyksestä. Tässä "describe" ('Syötä GURU99-nimi') tyypillisesti määrittelee sovelluksen komponentit, jotka voivat olla luokka tai funktio jne. Koodisarjassa jota kutsutaan nimellä "Enter GURU99", se on vain merkkijono eikä koodi.
2. it('pitäisi lisätä nimi muodossa GURU99', function()
3. browser.get('https://angularjs.org') Kuten kohdassa Selenium Webdriver browser.get avaa uuden selaimen esiintymän mainitulla URL-osoitteella.
4. elementti(by.model('omanimi')).sendKeys('GURU99') Täältä löydämme verkkoelementin, joka käyttää mallin nimeä nimellä "yourName", joka on "ng-model"-arvon arvo verkkosivulla. Tarkista kuvakaappaus alta -

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Täältä löydämme verkkoelementin käyttämällä XPath ja tallenna sen arvo muuttujaan "guru".
6. odottaa(guru.getText()).to Equal('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 tiedostolle conf.js

1. selenAddress: 'http://localhost:4444/wd/hub'Asetustiedosto ilmoittaa Protractorille Selenium Osoite, jonka kanssa keskustella Selenium WebDriver.
2. specs: ['spec.js']Tämä rivi kertoo Protractorille testitiedostojen spec.js sijainnin

Säännöstön täytäntöönpano

Tässä ensin muutamme hakemistopolun tai siirrymme kansioon, johon confi.js ja spec.js on sijoitettu järjestelmäämme.

Noudata seuraavaa vaihetta.

Vaihe 1) Avaa komentokehote.

Vaihe 2) Varmista, että seleeniverkkoajurien hallinta on käynnissä. Anna tätä varten komento "webdriver-manager start" ja paina Enter.

(Jos seleeniverkkoajuri ei ole käynnissä, emme voi jatkaa testiä, koska Protractor ei löydä web-ohjainta verkkosovelluksen käsittelemiseksi)

Vaihe 3) Avaa uusi komentokehote ja anna komento nimellä "protractor conf.js" suorittaaksesi asetustiedoston.

Selitys:

• Tässä Protractor suorittaa määritystiedoston, jossa on annettu spesifikaatiotiedosto.
• Voimme nähdä seleenipalvelimen olevan käynnissä osoitteessahttp://localhost:4444/wd/hub” jonka olemme antaneet conf.js-tiedostossa.
• Täältä näet myös tuloksen, kuinka monta läpäisyä ja epäonnistumisia, kuten yllä olevassa kuvakaappauksessa.

Selvä, olemme tarkistaneet tuloksen, kun se on hyväksytty tai odotetusti. Tarkastellaan nyt myös epäonnistunutta tulosta.

Vaihe 1) Avaa ja muuta spec.js-tiedoston odotetaan johtavan muotoon "Hei, vaihda GURU99" kuten alla.

Muutoksen jälkeen spec.js:ssä :

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ä olevat "Koodin suorittaminen" -osion vaiheet

Suorita nyt yllä olevat vaiheet.

Tulos:

Voimme nähdä tuloksen epäonnistuneena, joka on merkitty 'F':llä kuvakaappauksessa ja syynä on "Odotettu "Hei GURU99!" vastaa 'Hei vaihda GURU99!'. Se näyttää myös kuinka monta vikaa koodia suoritettaessa esiintyy.

Voimmeko saavuttaa saman kanssa Selenium web-ohjain?

Joskus voimme tunnistaa AngularJS-sovellusten verkkoelementit XPath- tai CSS-valitsimella Selenium web-ohjain. Mutta AngularJS-sovelluksissa elementit luodaan ja niitä muutetaan dynaamisesti. Protractor on siis parempi käytäntö työskennellä AngularJS-sovellusten kanssa.

Luo raportteja Jasmine Reportersin avulla

Protractor tukee Jasmine-toimittajia testiraporttien luomisessa. Tässä osiossa käytämme JunitXMLReporteria testien suoritusraporttien luomiseen automaattisesti XML-muodossa.

Seuraa alla olevia ohjeita luodaksesi raportit XML-muodossa.

Jasmine Reporterin asennus

Voit tehdä tämän kahdella tavalla, paikallisesti tai maailmanlaajuisesti

1. Avaa komentokehote suorittamalla seuraava komento asentaaksesi paikallisesti

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

Yllä oleva komento asentaa jasmine reports node-moduulit paikallisesti tarkoittaa hakemistosta, jossa käytämme komentoa komentokehotteessa.

2. Avaa komentokehote ja suorita seuraava komento yleistä 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 asennuskansiot hakemistosta. ”Node_modules” pitäisi olla saatavilla, jos se on asennettu onnistuneesti alla olevan kuvan mukaisesti.

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:

Koodissa luomme raportin "JUnitXmlReporter” ja antaa polun, johon raportti tallennetaan.

Vaihe 4) Avaa komentokehote ja suorita komento astemittari conf.js.

Vaihe 5) Kun suoritat yllä olevan koodin, junitresults.xml luodaan mainittuun polkuun.

Vaihe 6) Avaa XML ja tarkista tulos. Vikaviesti näkyy tulostiedostossa meidän Testitapaus on epäonnistunut. Testitapaus epäonnistui, koska "spec.js":n odotettu tulos ei vastaa Web-sivun todellista tulosta

Vaihe 7) Käytä junitresult.xml-tiedostoa todisteita tai tulostiedostoja varten.

Yhteenveto

Vaikka Selenium voi tehdä joitain asioita, mitä astelevy tekee, astelevy on teollinen standardi ja paras käytäntö AngularJS-sovellusten testaamiseen. Protractor voi myös hallita siinä useita ominaisuuksia ja käsitellä verkkoelementtien dynaamisia muutoksia käyttämällä ng-malli, ng-click... jne.. (Mitä seleeni ei voi tehdä).