Výukový program pre testovanie uhlomerov: Rámec automatizačného nástroja

Obsah:

Anonim

Čo je testovanie uhlomeru?

PROTRACTOR je automatizačný a end-to-end testovací nástroj riadený chovaním, ktorý hrá dôležitú úlohu pri testovaní aplikácií AngularJS a pracuje ako integrátor riešení kombinujúci výkonné technológie ako selén, jasmín, webový ovládač atď. Účel testovania uhlomeru je nielen na testovanie aplikácií AngularJS, ale aj na písanie automatizovaných regresných testov aj pre bežné webové aplikácie.

V tomto tutoriáli pre začiatočníkov sa naučíte -

  • Prečo potrebujeme uhlomer?
  • Inštalácia uhlomeru
  • Ukážka testovania aplikácií AngularJS pomocou nástroja Protractor
  • Vykonanie kódexu
  • Generujte správy pomocou reportérov Jasmine

Prečo potrebujeme uhlomer?

JavaScript sa používa takmer vo všetkých webových aplikáciách. S pribúdajúcimi aplikáciami rastie aj veľkosť a zložitosť JavaScriptu. V takom prípade sa pre testerov stane náročnou úlohou testovať webovú aplikáciu pre rôzne scenáre.

Niekedy je ťažké zachytiť webové prvky v aplikáciách AngularJS pomocou JUnit alebo Selenium WebDriver.

Protractor je program NodeJS, ktorý je napísaný v JavaScripte a pracuje s Node na identifikáciu webových prvkov v aplikáciách AngularJS. Na kontrolu prehľadávača pomocou akcií používateľa tiež používa WebDriver.

Dobre, dobre, poďme teraz diskutovať o tom, čo presne je aplikácia AngularJS?

Aplikácie AngularJS sú webové aplikácie, ktoré používajú rozšírenú syntax HTML na vyjadrenie komponentov webových aplikácií. Používa sa hlavne pre dynamické webové aplikácie. Tieto aplikácie používajú v porovnaní s bežnými webovými aplikáciami menej pružného kódu.

Prečo nemôžeme nájsť webové prvky Angular JS pomocou webového ovládača Normal Selenium?

Uhlové aplikácie JS majú niektoré ďalšie atribúty HTML, ako sú ng-repeater, ng-controller, ng-model ... atď., Ktoré nie sú obsiahnuté v lokátoroch selénu. Selén nedokáže tieto webové prvky identifikovať pomocou kódu selénu. Takže uhlomer na vrchole selénu dokáže tieto atribúty spracovať a ovládať vo webových aplikáciách.

Uhlomer je rámec pre komplexné testovanie aplikácií založených na Angular JS. Zatiaľ čo sa väčšina rámcov zameriava na vykonávanie jednotkových testov pre aplikácie Angular JS, Protractor sa zameriava na testovanie skutočnej funkčnosti aplikácie.

Predtým, ako spustíme Protractor, musíme nainštalovať nasledovné:

  1. Selén

    Kroky na inštaláciu selénu nájdete na nasledujúcich odkazoch (https://www.guru99.com/installing-selenium-webdriver.html).

  2. NPM (Node.js)

    Inštalácia NodeJS, na inštaláciu Protractora si musíme nainštalovať NodeJS. Tieto kroky inštalácie nájdete na nasledujúcom odkaze. (https://www.guru99.com/download-install-node-js.html)

Inštalácia uhlomeru

Krok 1) Otvorte príkazový riadok a zadajte príkaz „npm install -g úhloměr“ a stlačte kláves Enter .

Vyššie uvedený príkaz stiahne potrebné súbory a nainštaluje Protractor do klientskeho systému.

Krok 2) Skontrolujte inštaláciu a verziu pomocou nástroja „ Protractor --version “. Ak bude úspešný, zobrazí sa verzia ako na nasledujúcom obrázku. Ak nie, vykonajte krok 1 znova.

(Kroky 3 a 4 sú voliteľné, ale odporúčajú sa pre lepšiu prax.)

Krok 3) Aktualizujte správcu webových ovládačov. Správca webových ovládačov sa používa na vykonávanie testov oproti hranatej webovej aplikácii v konkrétnom prehliadači. Po nainštalovaní aplikácie Protractor je potrebné aktualizovať správcu webových ovládačov na najnovšiu verziu. To je možné vykonať spustením nasledujúceho príkazu v príkazovom riadku.

webdriver-manager update

Krok 4) Spustite správcu webových ovládačov. Tento krok spustí správcu webových ovládačov na pozadí a bude počúvať všetky testy, ktoré bežia cez uhlomer.

Keď sa na vykonanie ľubovoľného testu použije uhlomer, webový ovládač sa automaticky načíta a spustí test v príslušnom prehliadači. Ak chcete spustiť správcu webových ovládačov, je potrebné vykonať z príkazového riadka nasledujúci príkaz.

webdriver-manager start

Ak teraz vo svojom prehliadači prejdete na nasledujúcu adresu URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), v skutočnosti uvidíte na pozadí bežať správcu webových ovládačov.

Ukážka testovania aplikácií AngularJS pomocou nástroja Protractor

Protractor potrebuje na spustenie dva súbory, súbor spec a konfiguračný súbor.

  1. Konfiguračný súbor : Tento súbor pomáha uhlomeru pri umiestnení testovacích súborov (specs.js) a pri komunikácii so serverom Selenium (Selenium Address). Chrome je predvolený prehliadač pre Protractor.
  1. Súbor so špecifikáciami : Tento súbor obsahuje logiku a lokátory interakcie s aplikáciou .

Krok 1) Musíme sa prihlásiť https://angularjs.org a do textového poľa „Sem zadajte meno“ zadajte text ako „GURU99“.

Krok 2) V tomto kroku

  1. Zadal názov "Guru99"
  2. Vo výstupnom texte je vidieť „Hello Guru99“.

Krok 3) Teraz musíme po zadaní názvu zachytiť text z webovej stránky a musíme ho overiť pomocou očakávaného textu .

Kód:

Ako je uvedené vyššie, musíme pripraviť konfiguračný súbor (conf.js) a súbor spec (spec.js) .

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

Vysvetlenie kódu spec.js:

  1. popísať („Zadajte názov GURU99“, funkcia ()

    Syntax popisu je z rámca Jasmine. Tu „description“ („Zadajte názov GURU99“) zvyčajne definuje komponenty aplikácie, ktorými môžu byť trieda alebo funkcia atď. V kódovej skupine nazývanej „Zadajte GURU99“ je to iba reťazec a nie kód.

  2. it („malo by sa pridať meno ako GURU99“, funkcia ()
  3. browser.get ('https://angularjs.org')

    Rovnako ako v Selenium Webdriver, browser.get otvorí novú inštanciu prehliadača so spomínanou URL.

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

    Tu nachádzame webový prvok, ktorý používa názov modelu ako „yourName“, čo je hodnota „ng-model“ na webovej stránke. Skontrolujte snímku obrazovky nižšie -

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

    Tu nájdeme webový prvok pomocou XPath a jeho hodnotu uložíme do premennej „guru“ .

  2. očakávať (guru.getText ()). toEqual („Dobrý deň, GURU99!“)

    Nakoniec overíme text, ktorý sme dostali z webovej stránky (pomocou gettext ()) s očakávaným textom.

Logika conf.js:

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

Vysvetlenie kódu conf.js

  1. seleniumAddress: 'http: // localhost: 4444 / wd / hub'

    Konfiguračný súbor informuje Protractor o umiestnení adresy Selenium Address, aby mohol hovoriť so serverom Selenium WebDriver.

  2. špecifikácie: ['spec.js']

    Tento riadok oznamuje uhlomeru umiestnenie testovacích súborov spec.js

Vykonanie kódexu

Tú prvú, zmeníme cestu k adresáru alebo prejdite do priečinka, kde sa confi.js a spec.js sú umiestnené v našom systéme .

Postupujte podľa nasledujúceho kroku.

Krok 1) Otvorte príkazový riadok.

Krok 2) Skontrolujte, či je správca webového ovládača selénu funkčný. Zadajte príkaz ako „webdriver-manager start“ a stlačte kláves Enter .

(Ak webový ovládač selénu nie je funkčný, nemôžeme pokračovať v teste, pretože uhlomer nemôže nájsť webový ovládač na spracovanie webovej aplikácie)

Krok 3) Otvorte nový príkazový riadok a spustite konfiguračný súbor príkazom ako „protractor conf.js“ .

Vysvetlenie:

  • Tu uhlomer vykoná konfiguračný súbor, v ktorom je daný špecifikovaný súbor.
  • Vidíme, že selénový server beží na adrese „ http: // localhost: 4444 / wd / hub “, ktorú sme uviedli v súbore conf.js.
  • Tu tiež môžete vidieť výsledok, koľko je odovzdaných a zlyhaní, ako na obrázku vyššie .

Fajn, výsledok sme overili, keď bude splnený alebo podľa očakávania. Teraz sa pozrime aj na výsledok zlyhania.

Krok 1) Otvorenie a zmena, ktorej výsledkom bude pravdepodobne súbor spec.js na „Ahoj zmena GURU99“, ako je uvedené nižšie.

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

Krok 2) Uložte súbor spec.js a zopakujte vyššie uvedené kroky v časti „Vykonanie kódu“

Teraz vykonajte vyššie uvedené kroky.

Výsledok:

Výsledok môžeme vidieť ako neúspešný, na snímke obrazovky označený znakom „F“, pričom dôvod je „Očakávaný“, Hello GURU99! rovná sa „Ahoj zmena GURU99!“. Tiež ukazuje, koľko zlyhaní sa vyskytlo pri vykonávaní kódu.

Môžeme dosiahnuť to isté s webovým ovládačom selénu?

Niekedy môžeme identifikovať webové prvky aplikácií AngularJS pomocou selektora XPath alebo CSS z webového ovládača Selenium. Ale v aplikáciách AngularJS sa prvky budú generovať a meniť dynamicky. Lepšou praxou pri práci s aplikáciami AngularJS je teda Protractor.

Generujte správy pomocou reportérov Jasmine

Protractor podporuje reportérov Jasmine pri generovaní testovacích správ. V tejto časti použijeme program JunitXMLReporter na automatické generovanie správ o vykonaní testu vo formáte XML.

Podľa nasledujúcich pokynov vygenerujete správy vo formáte XML.

Inštalácia Jasmine Reporter

Existujú dva spôsoby, ako to urobiť, lokálne alebo globálne

  1. Otvorte príkazový riadok, vykonajte nasledujúci príkaz a nainštalujte ho miestne
npm install --save-dev jasmine-reporters@^2.0.0

Vyššie uvedený príkaz nainštaluje jasmínové správy uzlové moduly lokálne znamená z adresára, kde spúšťame príkaz v príkazovom riadku.

  1. Otvorte príkazový riadok a vykonajte nasledujúci príkaz pre globálnu inštaláciu
npm install -g jasmine-reporters@^2.0.0

V tomto tutoriáli nainštalujeme lokálne reportérov jasmínu .

Krok 1) Vykonajte príkaz.

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

z príkazového riadku, ako je uvedené nižšie.

Krok 2) Skontrolujte inštalačné priečinky v adresári . „Node_modules“ by mal byť k dispozícii, ak je úspešne nainštalovaný ako v nasledujúcom snímku.

Krok 3) Pridajte nasledujúci farebný kód do existujúceho súboru 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));}};

Vysvetlenie kódu:

V kóde generujeme prehľad „ JUnitXmlReporter “ a poskytujeme Ceste, kam sa má prehľad uložiť.

Krok 4) Otvorte príkazový riadok a spustite príkazový uhlomer conf.js.

Krok 5) Po vykonaní vyššie uvedeného kódu sa v uvedenej ceste vygeneruje junitresults.xml.

Krok 6) Otvorte XML a overte výsledok. Správa o zlyhaní sa zobrazí v súbore s výsledkami, pretože náš testovací prípad zlyhal. Testovací prípad zlyhal, pretože očakávaný výsledok zo súboru „spec.js“ sa nezhoduje so skutočným výsledkom z webovej stránky.

Krok 7) Použite súbor junitresult.xml na dôkazy alebo súbory s výsledkami.

Zhrnutie:

Aj keď selén dokáže niektoré z vecí, ktoré robí uhlomer, uhlomer je priemyselný štandard a najlepšia prax na testovanie aplikácií AngularJS. Uhlomer môže v ňom tiež spravovať viac funkcií a zvládať dynamické zmeny webových prvkov pomocou ng-modelu, ng-kliknutia ... atď ... (Čo selén nedokáže).

Do tohto článku prispieva Ranjith Kumar Enishetti