kohtitracTor-testausopas: Automaatiotyökalukehys

Miksi tarvitsemme ammattilaistatractor-kehys?

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.

kohtitractor on NodeJS-ohjelma, joka on kirjoitettu 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, Protractor päällä Selenium pystyy käsittelemään ja hallitsemaan näitä määritteitä Web-sovelluksissa.

Ammattilainentractor on kokonaisvaltainen testauskehys Angular JS -pohjaisille sovelluksille. Vaikka useimmat kehykset keskittyvät yksikkötestien suorittamiseen Angular JS -sovelluksille, Protractor keskittyy sovelluksen todellisen toiminnallisuuden testaamiseen.

Ennen kuin aloitamme Prontractor, 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 Prontractor. Löydät asennusohjeet seuraavasta linkistä. ( https://www.guru99.com/download-install-node-js.html )

kohtitracTor-asennus

Vaihe 1) Avaa komentokehote ja kirjoita "npm-asennus – g protractor” ja paina Enter.

Yllä oleva komento lataa tarvittavat tiedostot ja asentaa Prontractor asiakasjärjestelmässä.

Vaihe 2) Tarkista asennus ja versio käyttämällä "kohtitractor-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ä verkkoajurinhallinta. Verkkoajurinhallintaa käytetään testien suorittamiseen Angular-verkkosovellusta vastaan ​​tietyssä selaimessa. After Protractor on asennettu, web-ajurinhallinta on päivitettävä uusimpaan versioon. Tämä voidaan tehdä suorittamalla seuraava komento komentokehotteessa.

webdriver-manager update

Vaihe 4) Käynnistä web-ajurinhallinta. Tämä vaihe suorittaa web-ajurihallinnan taustalla ja kuuntelee kaikkia Pron kautta suoritettavia testejä.tracthor.

Kerran ammattilainentracKun tor-tiedostoa käytetään minkä tahansa testin suorittamiseen, verkkoajuri latautuu ja suorittaa testin automaattisesti kyseisessä selaimessa. Verkkoajurien hallinnan käynnistämiseksi on suoritettava seuraava komento komentokehotteesta.

webdriver-manager start

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

Näyte AngularJS-sovellusten testauksesta ProllatracTor

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

1. AsetustiedostoTämä tiedosto auttaa ammattilaisiatractor, johon testitiedostot sijaitsevat (specs.js) ja kommunikoida sen kanssa Selenium palvelin (Selenium Osoite). Chrome on Pron oletusselain.tracthor.

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. Tulostetekstissä ”Hei” Guru99″ näkyy.

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

Code:

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

Code Spec.js:n selitys:

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 selaininstanssin, jossa mainitaan URL.
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']
};

Code conf.js:n selitys

1. seleniumAddress: 'http://localhost:4444/wd/hub' Konfiguraatiotiedosto kertoo Prolletracsijainnin mukaan Selenium Osoite, jonka kanssa keskustella Selenium WebDriver.
2. specs: ['spec.js']Tämä rivi kertoo Prolletractestitiedostojen sijainnin (spec.js)

Suoritus Code

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 selenium-verkkoajuri ei ole toiminnassa, emme voi jatkaa testiä Pro-tasolla)tractor ei löydä verkkosovellusta käsittelevää verkkoajuria)

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

Selitys:

• Here Protractor suorittaa määritystiedoston annetun spesifikaatiotiedoston kanssa.
• 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 vaiheet kohdassa ”Suoritus”. Code”

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-ajuri. Mutta AngularJS-sovelluksissa elementit luodaan ja muutetaan dynaamisesti. Joten Protractor on parempi käytäntö AngularJS-sovellusten kanssa työskentelyyn.

Luo raportteja Jasmine Reportersin avulla

kohtitractor tukee Jasmine Reportersia testiraporttien luomiseen. Tässä osiossa käytämme JunitXMLReporteria testisuoritusraporttien automaattiseen luomiseen 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 vartentractor-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ä joitakin samoja asioita kuin ammattilainentractor tekee, ammattilainentractor on teollisuusstandardi ja paras käytäntö AngularJS-sovellusten testaamiseen. A Protractor voi myös hallita useita ominaisuuksia ja käsitellä verkkoelementtien dynaamisia muutoksia käyttämällä ng-malli, ng-click... jne.. (Mitä seleeni ei voi tehdä).