Menu

Nástroj pro testování úhloměru pro end-to-end testování aplikací AngularJS

protractor testing tool

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

Co je úhloměr?

Protractor je automatizační testovací nástroj pro testování webových aplikací; kombinuje výkonné technologie jako Jasmine, Selenium Webdriver, Node.js atd.

Nástroj pro testování úhloměru je end-to-end testovací rámec založený na chování navržený s ohledem na aplikace Angular JS. I když to může znít, že Protractor nebude fungovat s nehranolovými JS aplikacemi, funguje to.

Funguje stejně dobře s úhlovými i nehranolovými aplikacemi JS.

Nebojte se prozkoumat celá řada výukových programů AngularJS . V našem předchozím tutoriálu rozdíl mezi úhlovými verzemi bylo podrobně vysvětleno.

Výukový program pro testování úhloměru

Co se naučíte:

Protractor vs Selenium WebDriver

Čím se úhloměr liší od tradičního Selenium WebDriver ?

Věnujte chvíli odpovědi na tyto otázky:

  • Je obtížné určit, kdy se konečně načte webová stránka (všechny asynchronní prvky jsou připraveny a zpracovány)?
  • Už vás nebaví přidávat do svého kódu čekání a spánek?
  • Chcete se zbavit těžkopádné snahy lokalizovat hranaté prvky?
  • Frustrovaní vyhledávacími prvky s měnícími se ID?
  • Chcete si vytvořit svůj vlastní vyhledávač?
  • Píšete zdlouhavý kód i pro nejjednodušší tvrzení?
  • Jste nadšencem / fanouškem JavaScriptu?

Pokud jste na tyto otázky odpověděli Ano, Úhloměr může pomoct.

Jedná se o obal postavený na vrcholu selenového webového ovladače, a tak poskytuje všechny možnosti selenu spolu s mnoha užitečnými doplňky. To nabízí:

Funkce

To nabízí:

1) WaitForAngular

ukázkové testovací případy pro webovou aplikaci

Z dokumentace:

' Dejte pokyn WebDriveru, aby před pokračováním počkal, až Angular dokončí vykreslování a nebude mít žádná nevyřízená volání $ http nebo $ timeout. Všimněte si, že úhloměr automaticky použije tento příkaz před každou akcí WebDriver. '

To znamená, že není třeba ručně přidávat čekání do skriptu a Protractor automaticky počká na načtení webových prvků a teprve poté provede další kroky.

dva) Má schopnost exportovat globální funkci živel , který vezme lokátor a vrátí ElementFinder. This ElementFinder has a set of action methods, such as click (), getText (), sendKeys () etc. This is the core of how to interact with the element and get information from it.

Tato globální funkce pomáhá snížit syntaxi lokalizace prvku. Podívejte se na následující příkaz a vyhledejte prvek v Selenium WebDriver i Protractor:

Selénový webdriver :

driver.findElement(By.cssSelector('css selector'));

Úhloměr :

element(by.css('some-css'));

Syntaxe vypadá kompaktně, že?

3) Některé nové strategie a funkce lokátoru, které pomáhají najít úhlové prvky, jsou: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , atd.

Jak mi může Protractor pomoci?

Podívejte se na následující hlavní funkce:

  • Jednoduchá syntaxe pro psaní testovacích případů
  • Možnost spouštět více prohlížečů najednou pomocí Selenium Grid
  • Uhlově specifické lokátory
  • Podpora pro vývoj založený na chování, jako je Jasmine / Mocha
  • Není třeba přidávat spánku / čekání
  • Podporovaná integrace s Jenkins / Browser Stack / Grunt atd.
  • Zbavte se řešení problému synchronizace na webových stránkách Angular JS
  • Podpora více prohlížečů (Firefox, Chrome, Safari, Internet Explorer)
  • Schopnost spouštět stejné skripty v mobilních prohlížečích také bez nutnosti změny kódu

Jaký rámec použít?

Podporuje hned po vybalení dva testovací rámce pro vývoj na základě chování (BDD):

  • Jasmín: Jasmín je výchozí testovací rámec, když je nainstalován Protractor. V tomto článku použijeme Jasmínu.
  • Moka: Moka je testovací framework JavaScriptu, který běží na Node.js. Pokud si přejete použít Mocha jako svůj testovací rámec, budete jej muset nastavit pomocí svého úhloměru a také budete muset používat vývojové rozhraní Behavior Driven Development a Chai Assertions s Chai as Promised (viz tento odkaz Více podrobností ).

Jak stáhnout a nastavit úhloměr

Jelikož se jedná o program node.js, je třeba nainstalovat node.js, aby byl spuštěn. Node.js lze stáhnout z této adresy URL výběrem operačního systému: Stažení Node.js

S node.js také získáte Úhloměr nad hladinou moře balíček, který lze nyní použít k instalaci Protractor.

Nyní, když je node.js nainstalován do vašeho počítače, otevřete příkazový řádek (cmd) a stisknutím následujícího příkazu jej globálně nainstalujte:

npm install -g protractor

'-G' slouží k celosvětové instalaci tohoto nástroje. Odeberte jej, pokud jej nechcete instalovat globálně. Tento příkaz také nainstaluje Protractor API spolu s výchozím serverem selenu, což znamená, že nemusíte nutně spouštět samostatný server.

Nyní musíme nainstalovat server selenu a ChromeDriver. Použijte následující příkaz (také se dodává s úhloměrem) v cmd:

webdriver-manager update

To je vše, co potřebujeme, abychom mohli začít psát první testovací případ pomocí tohoto rámce. Pokud si přejete, můžete si nainstalovat libovolný IDE / editor pro psaní kódu. Eclipse IDE je populární, ale je třeba zvážit i některé další skvělé editory. Osobně dávám přednost psaní „Atom“ pro psaní kódu Protractor.

Jste připraveni vytvořit svůj první testovací případ?

Ke spuštění potřebuje 2 soubory:

  • Konfigurační soubor
  • Spec soubor.

The Konfigurační soubor je ten, který říká Protractoru, kde najít testovací soubory (specifikace) / který prohlížeč vybrat / jaký rámec použít (Jasmine / Mocha) / kde mluvit s vaším selenovým prohlížečem a dalšími konfiguracemi. Pokud některá konfigurace není v konfiguračních souborech definována, použije výchozí hodnoty.

Spec soubor je ten, kde píšeme náš skutečný testovací kód. Všechny naše testovací funkční toky / tvrzení budou v tomto konkrétním souboru. Na základě počtu testovacích případů může být několik souborů spec, ale pouze jeden soubor spec bude schopen spustit celou sadu testů několika specifikací.

Příklad TESTOVACÍHO PŘÍPADU:

Nyní napíšeme jednoduchý testovací případ, kde přejdeme na adresu URL a zkontrolujeme název stránky.

Tady jsou kroky:

  • Vytvořte novou složku pro svou testovací sadu.
  • Vytvořit nový soubor s názvem jako js „. (Libovolný název bude stačit) Všechny soubory spec / konfigurace budou mít příponu„ .js “.
  • Vytvořte nový soubor s názvem uvedeným jako „ js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Nyní jsme všichni připraveni začít s naším kódováním. Viz níže uvedený kód souboru „testCaseNameSpec.js“.

Konfigurační soubor vypadá takto:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Nyní nechte tyto 2 soubory rozbít a uvidíte, jak to funguje.

# 1) Spec.js

  • Všechny příkazy na úrovni prohlížeče budou zpracovány „ prohlížeč “, Globální společnost vytvořená společností Protractor.
  • Když sledujeme rámec Jasmine, „ popsat ' a ' to „Jsou syntaxe Jasmíny. Popsat bude obsahovat celý konec procesu testování, zatímco „to“ může obsahovat některé z testovacích kroků / scénářů atd. Můžete mít více „ to Blokuje váš program, pokud si přejete.
  • browser.get je jednoduchá selenová syntaxe, která říká, že Protractor má zasáhnout konkrétní adresu URL v prohlížeči.
  • Jelikož web, který se snažíme zasáhnout, je neohraný web, nastavili jsme ignoreSynchronization označit „ skutečný 'Jak je zobrazeno na řádku č. 4. Pokud tuto značku neoznačíte jako pravdivou, váš test selže s chybou „Na stránce nebyl nalezen Angular“. Důvodem je to, že Protractor ve výchozím nastavení očekává, že bude pracovat s úhlovými webovými stránkami, a pokud používáme Protractor k ověření nehranatého webu, musíme to Protractoru výslovně sdělit. Pokud však pracujete na hranatých webových stránkách, není nutné toto prohlášení používat, protože Protractor bude ve výchozím nastavení považovat webovou stránku za hranatou.
  • „Očekávejte“ není nic jiného než tvrzení, při kterém porovnáváme název webové stránky s některými předdefinovanými daty. Podrobněji budeme diskutovat o dalších tvrzeních.

#dva) conf.js

  • Jak již bylo řečeno, konfigurační soubor je ten, který sděluje Protractoru základní podrobnosti. Jak je zobrazeno v kódu, rámec je „Jasmine“.
  • V sekci schopností jsou nastaveny konfigurace prohlížeče. Můžete definovat název prohlížeče, jako je Firefox / Chrome atd. Můžete také nastavit maximální počet instancí prohlížečů, takže najednou můžete spustit více testovacích případů v různých dostupných oknech prohlížeče.
  • V „ brejle V této části zadáme cestu k souboru spec, tj. Přesně tam, kde je soubor spec umístěn vzhledem ke konfiguračnímu souboru.
  • Existuje také mnoho dalších skvělých funkcí, které můžete připojit ke svému konfiguračnímu souboru, jako je funkce reporting / onPrepare / časový limit atd. V tomto tutoriálu se budeme věnovat několika z nich.

Jak spustit testovací případy?

Napsali jsme kód a nyní vše, co potřebujeme, je trochu tlačit, aby náš kód fungoval. Stisknutím následujícího příkazu v cmd spustíte program:

protractor conf.js

Tento příkaz spustí server selenu následovaný spuštěním testovacího skriptu. Protokoly si můžete prohlédnout v samotném cmd, nebo pokud si přejete, můžete je také zachytit do souboru .txt (stačí přidat >> textFileName.txt po výše uvedeném příkazu budou protokoly uloženy do textového souboru umístěného ve stejném adresáři jako konfigurační soubor).

Otevře se chromované okno, kde SoftwareTestingHelp.com web by měl být otevřen. Výstupem by při spuštění kódu bylo „1 specifikace, 0 selhání“. To znamená, že jsme měli 1 blok „it“, který byl spuštěn s 0 selháními.

Nyní zvažte níže uvedený soubor se specifikacemi, kde provádíme některé akce na webové stránce sestavené na AngularJS, abyste viděli, jak úhloměr přijal Selenium, pokud jde o testování webové stránky Angular:

web, který převádí videa z youtube na mp4
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

Stejný conf.js můžete použít i pro spuštění této specifikace. Nezapomeňte aktualizovat název souboru specifikace.

Nyní v tomto souboru spec hrajeme s úhlovým webem JS, abyste viděli, čeho přesně je Protractor schopen.

Pokud spustíte tento soubor stejně jako dříve, otevře se webová stránka se 2 textovými poli, rozbalovací nabídkou, tlačítkem a několika dalšími webovými prvky. Jak jste již možná uhodli, je to stránka kalkulačky. Jako vstup dáváme 2 celá čísla a provádíme operaci násobení.

Jak jsme již diskutovali, jednou z největších výhod používání tohoto nástroje jsou jeho jedinečné techniky k lokalizaci hranatých prvků. „By.model“ je jeden takový způsob, jak lokalizovat prvky. „.SendKeys ()“ je obvyklá selenová syntaxe k odesílání hodnot do textových polí a „.Click ()“ se používá ke kliknutí na tlačítka.

Jak již bylo řečeno, 'očekávat' je tvrzení, které požaduje, aby úhloměr zachytil výsledek násobení čísel a porovnal jej postupně s „10“ a „25“. Jednoduchá matematika nám říká, že výstup by měl být „25“, a proto první tvrzení selže a druhé projde.

Výsledkem je, že 1 specifikace, 1 porucha „V protokolech při spuštění kódu, což se očekává.

Některé další skvělé funkce úhloměru

# 1) Tvrzení a poznámky

Tvrzení jsou důležitou součástí automatizačních skriptů. Anotace jsou také velmi užitečné při účinném označování určitých metod ve třídě, aby měly zvláštní význam.

Poskytuje řadu tvrzení a anotací a kromě toho také umožňuje vytvářet vlastní tvrzení.

Zvažte následující příklad:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

Ve výše uvedeném příkladu používáme 2 anotace, 'BeforeEach' a 'AfterEach' . Tyto anotace jsou také k dispozici v TestNG (tradiční selen). Tyto anotace zajišťují, že konkrétní část kódu bude provedena před / po provedení zbývajícího kódu.

Tady je způsob provedení kódu,

  1. Úhloměr dosáhne dovnitř ‚ před každým „Nejprve blokovat a zasáhne“ http://juliemr.github.io/protractor-demo/ „URL v prohlížeči.
  2. Nyní se tok přesune do bloku „it“ a funkce „ znásobit čísla bude voláno, které následně provede zadané akce v něm a odešle ovládací prvek zpět na místo, kde byla funkce volána.
  3. Nakonec tvrzení splní svoji úlohu. Pokud nyní chceme řešit více prvků najednou, můžete použít funkci tohoto prvku „element.all“. Bude identifikovat všechny dostupné prvky se zadaným lokátorem (v tomto případě by.repeater). Je jen na vás, co si přejete s identifikovanými prvky udělat. V tomto případě porovnáváme historii výpočtu s daným číslem.
  4. Protože v prvním tvrzení porovnáváme počet historie výpočtu s číslem „2“, přestože jsme výpočet provedli pouze jednou, tvrzení selže. Druhé tvrzení však přejde, protože po druhém výpočtu bude počet historie „2“.

Existuje mnohem více dostupných typů tvrzení. Některé z nich jsou uvedeny níže:

a) Získejte text z webového prvku a porovnejte ho s určitou hodnotou:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b) Ověřte, zda je na stránce zobrazen webový prvek:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Zpracování více prohlížečů / oken / karet

Při manipulaci s prohlížečem může nastat několik případů. Některé z těchto případů jsou zvýrazněny níže:

a) Kliknutím na libovolný odkaz se otevře nová karta

Někdy, když kliknete na jakýkoli odkaz, otevře se nová karta a v nově otevřeném okně je třeba provést zbývající akce. V tomto případě, když píšete kód do bodu, kde je otevřena nová karta, musíte implementovat Window Handler následujícím způsobem:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

Nejprve získejte počet všech dostupných oken a poté pomocí indexování přepněte ovládání mezi okny. Původní okno, které zahájilo nové okno, bude mít index 0, zatímco následující okna budou mít rostoucí indexy.

b) Otevření zcela nového prohlížeče s novou relací

Pokud potřebujete provést některé akce v prohlížeči a potřebujete provést další akce v jiné relaci prohlížeče, musíme použít forkNewDriverInstance . V tomto případě vytvoříme novou instanci prohlížeče s novým názvem prohlížeče následujícím způsobem:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c) Spuštění testovacího případu ve více prohlížečích:

Spuštění testovacího případu ve 2 prohlížečích najednou je něco, co pro vás může udělat konfigurační soubor. Stačí přidat níže uvedený kód do konfiguračního souboru:

Jakmile spustíte tento konfigurační soubor, uvidíte současně spuštěné testy v prohlížeči Firefox i Chrome a protokoly o spuštění se zobrazí v příkazovém řádku samostatně.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Použijte Objekty stránky, aby byl váš rámec ještě lepší

Tento nástroj je sám o sobě dobrý, ale v kombinaci s POM (Page Object Model) se stává neporazitelným. Většina jeho nedostatků (pokud existují) je překonána objektovým modelem stránky. Kromě toho POM také pomáhá udržovat váš projekt strukturovanějším způsobem.

Pokud nevíte, co je POM, nemusíte mít obavy. POM je způsob, jak oddělit testovací případ na základě stránek.

Vezměte tento příklad:

Existuje nákupní web. Testovacím případem je výběr produktu, přidání do košíku a jeho zakoupení.

Nyní existují dva způsoby, jak spravovat kód testovacího skriptu:

  1. Napište jednoduchý testovací případ se všemi lokátory na stejné stránce, ve které je napsána vaše logika,
  2. Napište veškerý svůj tok testovacího případu, svoji logiku do souboru spec a oddělte své lokátory a testovací data do různých souborů. Každá webová stránka bude mít ekvivalentní soubor stránky .js. Tímto způsobem bude váš kód strukturován a pokud existuje nějaký jiný testovací případ, který vyžaduje stejný lokátor, nemusíte tyto lokátory znovu psát, stačí importovat tento soubor lokátoru a použít jej podle vašich potřeb.

Údržba testovacích případů může být opravdovou bolestí. Pokud používáte POM, bude váš kód mnohem strukturovanější.

co je dev c ++

Zde je příklad použití modelu objektu stránky:

objektový model stránky

Toto je tok ve výše uvedeném snímku:

  1. Existuje testovací případ, který nakupuje notebook. Kód toku a logiky bude v purchaseLaptopSpec.js.
  2. Všechny stránky, které se vyskytnou při nákupu notebooku, budou mít soubor 1 „.js“ se správným názvem. Všechny prvky, které je třeba použít k zakoupení notebooku, budou jejich lokátory uvnitř příslušného souboru stránky.
  3. Data požadovaná pro tento testovací případ lze uložit do složky TestData buď ve formátu „.json“, nebo ve formátu aplikace Excel.
  4. Po dokončení se stránkami a vyhledávači jednoduše importujte tyto soubory do souboru spec, abyste mohli použít vyhledávač / testovací data, a jste připraveni na svůj testovací případ.

# 4) Hlášení

NPM (Node Package Manager) poskytuje různé reportovací balíčky, pomocí kterých lze zachytit snímek obrazovky každého kroku testu a také po dokončení testovacího běhu vygeneruje zprávu HTML. Jediné, co musíte udělat, je nainstalovat tyto balíčky otevřením příkazového řádku a stisknutím následujících příkazů:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

Jakmile jsou tyto balíčky nainstalovány, pokaždé, když spustíte konfigurační soubor, uloží se všechny snímky obrazovky vašich testovacích případů a také se vygeneruje zpráva HTML zobrazující výsledek testovacího případu předat / selhat.

# 5) Integrace s dalšími výkonnými nástroji, jako je Git / Jenkins / Browserstack / Grunt

Na trhu je k dispozici několik nástrojů, které pomohou vaše testovací případy ještě vylepšit. Git / Jenkins / BrowserStack / Grunt jsou některé takové nástroje, které přidávají významnou hodnotu vašim běžným testovacím skriptům úhloměru. A nejlepší na tom je, že se nemusíte dotknout souboru se specifikacemi, abyste integrovali svůj úhloměr s žádným z těchto nástrojů. Je to váš konfigurační soubor, který za vás vezme všechny tyto věci.

Jít je velmi výkonný nástroj pro správu verzí. Pokud je zapojeno více vývojářů, je vždy nejlepším postupem udržovat váš kód v Gitu.

Jenkins je nepřetržitý integrační nástroj, pomocí kterého můžete naplánovat své testovací případy a spustit je podle svých potřeb. Skripty úhloměru lze také konfigurovat pomocí Jenkins. Nejlepším využitím spuštění testovacích případů na Jenkinsovi je to, že je velmi rychlé a také můžete spustit více testovacích případů najednou.

BrowserStack je nástroj pro testování mezi prohlížeči, který lze také použít k testování aplikací v různých prohlížečích. Lze jej také integrovat s Protractorem přidáním pověření browserStack do konfiguračního souboru.

Přízemní je běžec úloh JavaScriptu. Poskytuje vám možnost provádět za vás několik úkolů. Úžasné je, že existuje více než 4 000 úkolů a můžete vytvořit ještě více úkolů podle svého požadavku. Následuje několik důležitých úkolů pro každodenní používání, pro které můžeme Grunt použít:

  1. Seznamte se se všemi osvědčenými postupy pro kódování a okamžitě informujte, kdykoli některý z nich porušíte.
  2. Chcete-li vytvořit více souborů spec v době běhu. Například , pokud existuje testovací případ, který chcete spustit několikrát (od 1 do libovolného čísla). To se v tuto chvíli může zdát zbytečné, ale přemýšlejte o spuštění jakéhokoli platebního toku webových stránek pro nákupy, který bude spuštěn v každé dostupné zemi. Bylo by zdlouhavé vytvářet více specifikací ručně. Nechte to tedy Grunt udělat za vás.
  3. Funkce hodinek. Napíšete testovací případ a pokaždé, když uložíte kód po provedení jakékoli změny, chcete, aby se váš testovací případ spustil, Grunt ho má.
  4. Zřetězení více souborů.

Vyzkoušejte to a budete to milovat.

Závěr

Můžete selenu přimět, aby fungoval jako úhloměr, ale proč znovu vynalézat kolo? Pokud Google vynaložil tolik úsilí, aby Protractor fungoval jako kouzlo, využijte jej naplno. Alespoň pro webové stránky AngularJS vám to výrazně usnadní život.

Tento článek také není jen o úhloměru. Tam je velký svět Protractor a na trhu jsou k dispozici stovky balíčků nabízených NPM, které vám kromě jednoduchých testovacích scénářů přidají do vašeho testu další funkce. Nebojte se použít tyto balíčky a vylepšit je.

O autorovi: Toto je příspěvek od Deshansha. Pracuje jako inženýr vývoje softwaru v Testu u jednoho z předních MNC. Má rozsáhlé zkušenosti s prací na automatizaci testování selenu a úhloměru.

Náš nadcházející výukový program vám pomůže úspěšně vymazat jakýkoli rozhovor AngularJS.

Výukový program PREV | DALŠÍ výuka

Doporučené čtení

^