JavascriptTuts

E2E testování v Angularu 2 od nuly k hrdinovi (závěrečná část)

Vážení budoucí mistři E2E testování v Angularu 2.
To je ono. Na konci této lekce budete mít konečně všechny nástroje pro vytváření funkčních testů pro své aplikace v Angularu 2. Už žádné výmluvy:

Nejprve se seznámíme s Locators, pak si ukážeme, jak úžasné mohou být Page Objects, následovat bude práce s asynchronností a nakonec ta nejjednodušší část, kterou je spouštění Actions.

Pokud nemáte základy v pořádku, zamiřte tam, jinak budete trochu ztraceni.

Lokátory

Jednou, ne-li nejdůležitější věcí při testování E2E je najít ve svém pohledu prvky, které chcete testovat. Většinou si budete klást otázku „proč nemohu najít tento prvek ****?“, po které bude následovat „oooohhhhh“.

Máte mnoho způsobů, jak to udělat. Většina z nich závisí na vaší aplikaci. Abyste získali své prvky, použijete řadu lokátorů. Většinou můžete své prvky najít pomocí:

Název třídy.
Id.
Model.
Vazba.

Pro nadcházející testy použijeme tuto šablonu.html:

<div class="parent2"> <div class="parent1"> <div class="nested-class" style="color:blue;"> I am a nested element </div> </div></div>

Soustředíme se na vnořenou třídu a vnořené id.

Podle třídy:

Uchopíme zde náš element pomocí element(by.css(selector)) a pak testujeme, zda je přítomen nebo ne.

By Id:

it("should find the nested id", () => { let elem = element(by.id("nested-id")); expect(elem.getText()).toBe("I am a nested element");});

Uchopíme zde náš element pomocí element(by.id(elem-id)) a pak testujeme, zda je přítomen nebo ne.

Následující lokátory a velmi užitečné v AngularJS, ale ještě nejsou implementovány v Angular 2, takže je zatím nechte stranou.

Podle modelu:

it("should find the model", () => { let elem = element(by.model("modelToFind")); expect(elem.isPresent()).toBeTruthy();});

Podle vazeb:

it("should find the binding", () => { let elem = element(by.model("bindingToFind")); expect(elem.isPresent()).toBeTruthy();});

Pro ladění testů stačí do testu přidat „browser.pause()“, budete moci spustit všechny předchozí instrukce a zastavit se kdekoli budete chtít.

Jakmile dojde k vašemu pozastavení, objeví se obrazovka podobná této:

Jak vidíte na tomto obrázku, abyste se dostali na místo řidiče, musíte zadat repl.

Teď řekněme, že nemáte žádný test a chcete si jen pohrát s Protractor. Stačí zadat do terminálu:

protractor --elementExplorer

Pokud máte nějaké problémy s cestou, můžete zadat:

./node_modules/protractor/bin/elementexplorer.js

Tentokrát nemusíte zadávat repl, stačí použít objekt prohlížeče a můžete vyplout!“

Objekty stránek

Co když máte testy, které mají stejný scénář? Budete všude kopírovat a vkládat svůj kód? Co když se tento scénář změní? Teď musíte projít všechny soubory a provést úpravy.

Tady se objekty stránek stávají velmi užitečnými. Napište jednou, sdílejte všude!

Objekt stránky je objekt, který obsahuje prvky a scénáře týkající se stránky.

Nejprve velmi jednoduchý objekt Page Object:

export class HomePage { nestedClass; constructor() { this.nestedClass = element(by.css(".nested-class")); }}

Poté jej použijeme v našem testu:

importujeme objekt Page Object, vytvoříme jeho instanci a poté použijeme jeho vlastnost.

Asynchronní dobrodružství

Nyní, přátelé, můžete přistupovat k libovolným prvkům na stránce! Tedy téměř :).

Budou existovat některé speciální případy.

Pokud jste měli to (ne)štěstí pracovat s jQuery, jistě znáte funkci document.ready().

V důsledku asynchronní povahy JavaScriptu budou existovat případy, kdy se budete snažit přistoupit k prvku dříve, než se na stránce ještě objeví.

Abyste si s tím poradili, budete muset použít funkci Protractoru, abyste před vyhledáním prvku počkali, až bude připraven.

Uvedeme příklad zobrazení tlačítka po vypršení časového limitu.

Nejprve třída, která obsahuje timeout:

export class Home { isHidden = true; triggerTimeOut = ((){ setTimeout(() => this.isHidden = false, 2250) })}

Poté šablona.html:

Máme zde tlačítko, které spustí náš timeout, po vypršení timeoutu se zobrazí text.

Tady jsou testy.

Najdeme naše tlačítko, klikneme na něj, zkusíme najít náš text, ALE očekáváme, že nebude přítomen.

A zde je způsob, jakým tento případ řešíme ;).

Použijeme „browser.wait“ v kombinaci s „browser.isElementPresent“ testující náš Locator. Po 5 sekundách se provede zbytek kódu. Nezapomeňte sem dát časovač, jinak budou vaše testy navždy zablokované!“

Takže pokud zde má být jeden z vašich prvků, ale vy ho nemůžete dostat, váš instinkt by vám měl napovědět, abyste si vzpomněli na to, co jste si právě přečetli zde.

Akce

Teď, když máte svůj drahocenný prvek, jste udělali 90 % práce!

Pokud ho nemůžete najít, znamená to, že vaše aplikace buď nefunguje, jak by měla (proto děláme testy), nebo se musíte zlepšit v testování a trávit méně času na Pokemon GO lovením dratinů u řeky v jednu ráno (všichni jsme to zažili …).

Pokračujme v akcích, které můžete na prvku použít. Zde jsou:

Používáme Protractor, který se spoléhá na WebDriver. Pokud potřebujete vymakanější akce, můžete se podívat na to, co je k dispozici zde.

Pojďme si některé z nich vyzkoušet.

Pro šablonu.html:

<input type="text" />

Trošku si pohrajeme s textovým vstupem. Rychlý kvíz, co dělá tento test (nečtěte popis)?

Řešení:

Můžeme si položit otázku, jaký je nejlepší způsob spouštění akcí? Tento odkaz zde ukazuje jednu z chyb používání JavaScriptu místo WebDriveru.
Jistě, psaní v JavaScriptu je mnohem kompaktnější, ale nese s sebou určitá rizika!

S elementem můžete dělat cokoli, co chcete. Nejlepší způsob, jak to otestovat, je použít matchery, které jsou k dispozici. Proč? Protože jsou elegantní a blízké lidskému jazyku, příklad:

expect(apples.length !== 0).toBe(true);

expect(apples).not.toBeEmpty();

Závěr

Toto byl poslední příspěvek tohoto seriálu, právě teď máte 90 % dovedností pro testování aplikací Angular 2. Zbývajících 10 % získáte zkušenostmi. Nezapomeňte, že nejprve získáte své elementy pomocí Locatorů, pak vložíte ten, který by mohl být replikován do Page Object, pokud nemůžete najít svůj element a jste si jisti, že zde je, může to být proto, že se ještě neobjevil a je třeba ošetřit asynchronnost. Nakonec otestujte **** z vašich prvků pomocí Actions.