JavascriptTuts

Testarea E2E în Angular 2 De la zero la erou (Partea finală)

Dragii viitori maeștri ai testării E2E în Angular 2.
Aceasta este. La sfârșitul acestei lecții veți avea în sfârșit toate instrumentele necesare pentru a crea teste funcționale pentru aplicațiile dumneavoastră Angular 2. Gata cu scuzele: Aveți puterea!

Prima dată ne vom familiariza cu Locators, apoi vom vedea cât de grozave pot fi Page Objects, urmat de cum să gestionăm asincronismul și în cele din urmă cea mai ușoară parte care este declanșarea Actions.

Dacă nu aveți noțiunile de bază corecte, mergeți acolo, altfel veți fi puțin pierduți.

Locatori

Unul dacă nu cel mai important lucru în testarea E2E este găsirea elementelor pe care doriți să le testați în vizualizarea dumneavoastră. De cele mai multe ori, vă veți pune întrebarea „de ce nu pot găsi acest element ****?”, urmată de un „oooohhhhh”.

Aveți mai multe modalități de a face acest lucru. Cele mai multe dintre ele depind de aplicația dumneavoastră. Pentru a obține elementele, veți utiliza o serie de Locatori. De cele mai multe ori, vă puteți găsi elementele prin:

• Numele clasei.
• Id.
• Model.
• Binding.

Pentru testele următoare, vom folosi acest șablon.html:

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

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

Să ne concentrăm pe nested-class și nested-id.

Pe clasă:

Primim aici elementul nostru folosind element(by.css(selector)) și apoi testăm dacă este prezent sau nu.

By Id:

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

Primim aici elementul nostru folosind element(by.id(elem-id)) și apoi testăm dacă este prezent sau nu.

Următoarele localizatoare sunt foarte utile în AngularJS, dar nu sunt încă implementate în Angular 2, așa că păstrați-le deocamdată la o parte.

By Model:

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

By Bindings:

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

Pentru a vă depana testele, puteți adăuga pur și simplu „browser.pause()” în testul dumneavoastră, veți putea rula toate instrucțiunile anterioare și vă veți putea opri unde doriți.

După ce ajunge la pauză, veți avea un ecran asemănător cu acesta:

După cum puteți vedea în această imagine, pentru a intra în scaunul șoferului trebuie să tastați repl.

Acum să spunem că nu aveți nici un test și doriți doar să vă jucați cu Protractor. Puteți doar să tastați în terminal:

protractor --elementExplorer

Dacă aveți probleme cu calea de acces, puteți tasta:

./node_modules/protractor/bin/elementexplorer.js

Nu este nevoie să tastați repl de data aceasta, doar folosiți obiectul browser și sunteți gata să navigați!

Obiecte de pagină

Ce se întâmplă dacă aveți teste care împărtășesc același scenariu? Aveți de gând să copiați și să lipiți codul peste tot? Ce se întâmplă dacă acest scenariu se schimbă? Acum trebuie să parcurgeți fiecare fișier și să faceți modificările.

Atunci obiectele Pages devin foarte utile. Scrieți o singură dată, partajați peste tot!

Un Page Object este un obiect care conține elementele și scenariile referitoare la o pagină.

Prima dată un Page Object foarte simplu:

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

Apoi îl folosim în testul nostru:

Importăm Page Object, creăm o instanță apoi folosim proprietatea acestuia.

Aventuri asincrone

Acum, prietenii mei, puteți accesa orice elemente din pagina voastră! Adică aproape :).

Vor exista câteva cazuri speciale.

Dacă ați fost (ne)suficient de norocoși să lucrați cu jQuery, trebuie să fiți familiarizați cu document.ready().

Prin natura asincronă a JavaScript, vor exista cazuri în care veți încerca să accesați un element înainte ca acesta să fi apărut încă în pagină.

Pentru a gestiona acest lucru, va trebui să utilizați o caracteristică a Protractorului pentru a aștepta ca elementul să fie gata înainte de a-l căuta.

Iată un exemplu de afișare a unui buton după expirarea unui timp de așteptare.

În primul rând clasa care conține timeout-ul:

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

Apoi șablonul.html:

Avem aici un buton care va declanșa timeout-ul nostru, odată ce timeout-ul expiră, textul este afișat.

Iată testele.

Găsim butonul nostru, dăm click pe el, încercăm să găsim textul nostru DAR ne așteptăm ca acesta să nu fie prezent.

Și iată modul în care tratăm acest caz ;).

Utilizăm „browser.wait” combinat cu „browser.isElementPresent” testând Locatorul nostru. După 5 secunde se execută restul codului. Nu uitați să puneți un timer aici, altfel testele dvs. vor fi blocate pentru totdeauna!

Acum, dacă unul dintre elementele dvs. ar trebui să fie aici, dar nu îl puteți obține, instinctul dvs. ar trebui să vă spună să vă amintiți ce tocmai ați citit aici.

Acțiuni

Acum că aveți prețiosul dvs. element, ați făcut 90% din muncă!

Dacă nu îl găsiți, înseamnă fie că aplicația dvs. nu funcționează așa cum ar trebui (de aceea facem teste), fie că trebuie să deveniți mai bun la teste și să petreceți mai puțin timp pe Pokemon GO vânând draci lângă un râu la ora 1 noaptea (cu toții am fost acolo…).

Să continuăm cu acțiunile pe care le puteți folosi pe un element. Iată-le aici:

Noi folosim Protractor care se bazează pe WebDriver. Dacă aveți nevoie de acțiuni mai fanteziste, puteți arunca o privire la ceea ce este disponibil aici.

Să testăm câteva dintre ele.

Pentru șablonul.html:

<input type="text" />

Ne vom juca un pic cu intrarea de text. Întrebare rapidă, ce face acest test (nu citiți descrierea)?

Soluție: Primim input-ul nostru, scriem „Some text” înăuntru, testăm că avem valoarea setată, îl ștergem și, în final, testăm că valoarea este goală.

În ultimă instanță ne putem întreba care este cel mai bun mod de a declanșa acțiuni? Acest link de aici arată unul dintre defectele utilizării JavaScript în loc de WebDriver.
Sigur că scrierea în JavaScript este mult mai compactă, dar vine cu unele riscuri!

Puteți face orice doriți cu un element. Cel mai bun mod de a-l testa este să folosiți potrivitorii care sunt disponibili. De ce? Pentru că sunt eleganți și apropiați de limbajul uman, exemplu:

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

expect(apples).not.toBeEmpty();

Concluzie

Aceasta a fost ultima postare din această serie, în acest moment aveți 90% din abilitățile necesare pentru a vă testa aplicațiile Angular 2. Celelalte 10% le veți obține prin experiență. Țineți minte, mai întâi obțineți elementele folosind Locators, apoi puneți-l pe cel care ar putea fi replicat într-un Page Object, dacă nu vă puteți găsi elementul și sunteți sigur că este aici, s-ar putea să fie pentru că nu a apărut încă și trebuie să vă ocupați de asincronie. În cele din urmă, testați **** din elementele dvs. cu Actions.

.