Výukový program pro testování úhloměru: Framework Automation Tool

Obsah:

Anonim

Co je testování úhloměru?

PROTRACTOR je automatizační a end-to-end testovací nástroj založený na chování, který hraje důležitou roli při testování aplikací AngularJS a funguje jako integrátor řešení kombinující výkonné technologie jako selen, jasmín, webový ovladač atd. Účel testování úhloměru je nejen testovat aplikace AngularJS, ale také psát automatizované regresní testy i pro běžné webové aplikace.

V tomto tutoriálu pro začátečníky se naučíte-

  • Proč potřebujeme Protractor Framework?
  • Instalace úhloměru
  • Ukázkové testování aplikací AngularJS pomocí úhloměru
  • Provádění Kodexu
  • Generujte zprávy pomocí reportérů Jasmine

Proč potřebujeme Protractor Framework?

JavaScript se používá téměř ve všech webových aplikacích. Jak aplikace rostou, zvyšuje se také velikost a složitost JavaScriptu. V takovém případě se pro testery stává obtížným úkolem otestovat webovou aplikaci pro různé scénáře.

Někdy je obtížné zachytit webové prvky v aplikacích AngularJS pomocí JUnit nebo Selenium WebDriver.

Protractor je program NodeJS, který je napsán v JavaScriptu a běží s Node k identifikaci webových prvků v aplikacích AngularJS, a také používá WebDriver k ovládání prohlížeče pomocí akcí uživatele.

Dobře, pojďme nyní probrat, co přesně je aplikace AngularJS?

Aplikace AngularJS jsou webové aplikace, které k vyjádření komponent webových aplikací používají rozšířenou syntaxi HTML. Používá se hlavně pro dynamické webové aplikace. Tyto aplikace používají méně a pružnější kód ve srovnání s běžnými webovými aplikacemi.

Proč nemůžeme najít webové prvky Angular JS pomocí webového ovladače Normal Selenium?

Angular JS applications have some extra HTML attributes like ng-repeater, ng-controller, ng-model…, etc. which are not included in Selenium locators. Selen není schopen tyto webové prvky identifikovat pomocí selenového kódu. Protractor na vrcholu selenu tedy může tyto atributy zpracovávat a ovládat ve webových aplikacích.

Úhloměr je end-to-end testovací rámec pro aplikace založené na Angular JS. Zatímco většina rámců se zaměřuje na provádění testů jednotek pro aplikace Angular JS, Protractor se zaměřuje na testování skutečné funkčnosti aplikace.

Než spustíme Protractor, musíme nainstalovat následující:

  1. Selen

    Kroky instalace selenu najdete v následujících odkazech (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    Instalace NodeJS, musíme nainstalovat NodeJS pro instalaci Protractor. Tento instalační postup najdete na následujícím odkazu. (https://www.guru99.com/download-install-node-js.html)

Instalace úhloměru

Krok 1) Otevřete příkazový řádek a zadejte „npm install -g úhloměr“ a stiskněte klávesu Enter .

Výše uvedený příkaz stáhne potřebné soubory a nainstaluje Protractor do klientského systému.

Krok 2) Zkontrolujte instalaci a verzi pomocí „ Protractor --verze “. Pokud bude úspěšný, zobrazí se verze jako na níže uvedeném snímku obrazovky. Pokud ne, proveďte krok 1 znovu.

(Kroky 3 a 4 jsou volitelné, ale pro lepší praxi se doporučují)

Krok 3) Aktualizujte správce webových ovladačů. Správce webových ovladačů se používá ke spuštění testů proti úhlové webové aplikaci v konkrétním prohlížeči. Po instalaci Protractor je třeba aktualizovat správce webových ovladačů na nejnovější verzi. To lze provést spuštěním následujícího příkazu v příkazovém řádku.

webdriver-manager update

Krok 4) Spusťte správce webových ovladačů. Tento krok spustí správce webových ovladačů na pozadí a bude poslouchat všechny testy, které běží přes úhloměr.

Jakmile se k provedení jakéhokoli testu použije úhloměr, webový ovladač automaticky načte a spustí test v příslušném prohlížeči. Chcete-li spustit správce webových ovladačů, je třeba provést následující příkaz z příkazového řádku.

webdriver-manager start

Nyní, pokud ve svém prohlížeči přejdete na následující adresu URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), ve skutečnosti uvidíte správce webového ovladače spuštěného na pozadí.

Ukázkové testování aplikací AngularJS pomocí úhloměru

Protractor potřebuje ke spuštění dva soubory, soubor spec a konfigurační soubor.

  1. Konfigurační soubor : Tento soubor pomáhá úhloměru k umístění testovacích souborů (specs.js) a ke komunikaci se selenovým serverem (Selenium Address). Chrome je výchozí prohlížeč pro Protractor.
  1. Soubor se specifikacemi: Tento soubor obsahuje logiku a lokátory pro interakci s aplikací .

Krok 1) Musíme se přihlásit https://angularjs.org a zadat text jako „GURU99“ do textového pole „Sem zadejte jméno“.

Krok 2) V tomto kroku

  1. Zadal název "Guru99"
  2. Ve výstupním textu je vidět „Hello Guru99“.

Krok 3) Nyní musíme po zadání názvu zachytit text z webové stránky a je třeba jej ověřit očekávaným textem .

Kód:

Musíme připravit konfigurační soubor (conf.js) a spec soubor (spec.js), jak je uvedeno výše.

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

Vysvětlení kódu spec.js:

  1. popsat ('Enter GURU99 Name', function ()

    Syntaxe popisu pochází z rámce Jasmine. Zde „description“ („Enter GURU99 Name“) obvykle definuje komponenty aplikace, kterými mohou být třída nebo funkce atd. V kódové sadě zvané „Enter GURU99“ je to jen řetězec a ne kód.

  2. it ('should add a Name as GURU99', function ()
  3. browser.get ('https://angularjs.org')

    Stejně jako v Selenium Webdriver browser.get otevře novou instanci prohlížeče se zmíněnou adresou URL.

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

    Zde nacházíme webový prvek používající název modelu jako „yourName“, což je hodnota „ng-model“ na webové stránce. Zkontrolujte snímek obrazovky níže -

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

    Zde nacházíme webový prvek pomocí XPath a ukládáme jeho hodnotu do proměnné „guru“ .

  2. expect (guru.getText ()). toEqual („Ahoj GURU99!“)

    Nakonec ověříme text, který jsme dostali z webové stránky (pomocí gettext ()) s očekávaným textem.

Logika conf.js:

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

Vysvětlení kódu conf.js

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

    Konfigurační soubor informuje Protractor o umístění adresy Selenium, aby mohl mluvit se Selenium WebDriver.

  2. specifikace: ['spec.js']

    Tento řádek informuje Protractor o umístění testovacích souborů spec.js

Provádění Kodexu

Tu první, změníme cestu k adresáři nebo přejděte do složky, kde se confi.js a spec.js jsou umístěny v našem systému .

Postupujte podle následujícího kroku.

Krok 1) Otevřete příkazový řádek.

Krok 2) Zkontrolujte, zda je správce webových ovladačů selenu funkční. Za tímto účelem zadejte příkaz jako "webdriver-manager start" a stiskněte klávesu Enter .

(Pokud webový ovladač selenu není funkční, nemůžeme pokračovat v testu, protože Protractor nemůže najít webový ovladač pro zpracování webové aplikace)

Krok 3) Otevřete nový příkazový řádek a příkazem „protractor conf.js“ spusťte konfigurační soubor.

Vysvětlení:

  • Zde úhloměr provede konfigurační soubor s daným specifikačním souborem.
  • Vidíme server selenu spuštěný na adrese „ http: // localhost: 4444 / wd / hub “, kterou jsme uvedli v souboru conf.js.
  • Zde také vidíte výsledek, kolik jich bylo předáno a selhání jako na výše uvedeném snímku obrazovky .

Dobře, ověřili jsme výsledek, když je předán nebo podle očekávání. Nyní se podívejme také na výsledek selhání.

Krok 1) Otevřete a očekávejte změnu, která bude mít za následek spec.js na "'Hello change GURU99" jako níže.

Po změně 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 soubor spec.js a opakujte výše uvedené kroky v části „Provedení kódu“

Nyní proveďte výše uvedené kroky.

Výsledek:

Výsledek vidíme jako neúspěšný, na snímku obrazovky označený 'F' s důvodem "Očekávaný 'Ahoj GURU99!' rovná se „Hello change GURU99!“. Také ukazuje, kolik selhání došlo při provádění kódu.

Můžeme dosáhnout stejného s webovým ovladačem Selenium?

Někdy můžeme identifikovat webové prvky aplikací AngularJS pomocí selektoru XPath nebo CSS z webového ovladače Selenium. Ale v aplikacích AngularJS budou prvky generovány a dynamicky měněny. Protractor je tedy lepší praxe pro práci s aplikacemi AngularJS.

Generujte zprávy pomocí reportérů Jasmine

Protractor podporuje reportéry Jasmine při generování testovacích zpráv. V této části použijeme JunitXMLReporter k automatickému generování zpráv o provedení testu ve formátu XML.

Podle následujících pokynů vygenerujte sestavy ve formátu XML.

Instalace Jasmine Reporter

Existují dva způsoby, jak to udělat, lokálně nebo globálně

  1. Otevřete příkazový řádek a proveďte následující příkaz k místní instalaci
npm install --save-dev jasmine-reporters@^2.0.0

Výše uvedený příkaz nainstaluje jasmínové zprávy uzlové moduly lokálně znamená z adresáře, kde spouštíme příkaz v příkazovém řádku.

  1. Otevřete příkazový řádek a proveďte následující příkaz pro globální instalaci
npm install -g jasmine-reporters@^2.0.0

V tomto tutoriálu nainstalujeme reportéry jasmínu lokálně .

Krok 1) Proveďte příkaz.

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

z příkazového řádku, jak je uvedeno níže.

Krok 2) Zkontrolujte instalační složky v adresáři . „Node_modules“ by měl být k dispozici, pokud je úspěšně nainstalován jako v níže uvedeném snímku.

Krok 3) Přidejte následující barevný kód do existujícího souboru 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));}};

Vysvětlení kódu:

V kódu generujeme sestavu „ JUnitXmlReporter “ a dáváme Cestě, kam sestavu uložit.

Krok 4) Otevřete příkazový řádek a spusťte příkazový úhloměr conf.js.

Krok 5) Když spustíte výše uvedený kód, v uvedené cestě se vygeneruje junitresults.xml.

Krok 6) Otevřete XML a ověřte výsledek. Zpráva o selhání se zobrazí v souboru výsledků, protože náš testovací případ selhal. Testovací případ se nezdařil, protože očekávaný výsledek ze souboru „spec.js“ neodpovídá skutečnému výsledku z webové stránky

Krok 7) Použijte soubor junitresult.xml pro soubory důkazů nebo výsledků.

Souhrn:

Ačkoli selen může dělat některé z věcí, které dělá úhloměr, úhloměr je průmyslovým standardem a osvědčenou praxí pro testování aplikací AngularJS. Úhloměr může také spravovat více funkcí a zpracovávat dynamické změny webových prvků pomocí ng-modelu, ng-click… atd. (Což selen nedokáže).

K tomuto článku přispěl Ranjith Kumar Enishetti