Testare automată a browserului cu API-ul WebDriver

Făcând clic manual prin diferite browsere în timp ce rulează codul dvs. de dezvoltare, fie local, fie de la distanță, este o modalitate rapidă de a valida codul respectiv. Vă permite să inspectați vizual dacă lucrurile sunt așa cum ați vrut să fie din punct de vedere al aspectului și al funcționalității. Cu toate acestea, nu este o soluție pentru testarea întregii lărgimi a bazei de cod a site-ului dvs. pe sortimentul de browsere și tipuri de dispozitive disponibile clienților dvs. Acesta este locul în care testarea automatizată devine cu adevărat proprie.

Condusă de proiectul Selenium, testarea web automată este o suită de instrumente pentru a crea, gestiona și rula teste pe browsere pe platforme.

API-ul WebDriverJS

API-ul WebDriver este un standard care extrage legăturile specifice dispozitivului/browserului de la dezvoltator, astfel încât scripturile de testare scrise în limba dorită să poată fi scrise o singură dată și rulate pe mai multe browsere diferite prin WebDriver. Unele browsere au capabilități WebDriver încorporate, altele necesită să descărcați un fișier binar pentru combinația browser/OS.

Conducerea browserului prin intermediul API-urilor WebDriver

Specificațiile WebDriver de la W3C documentează API-urile disponibile dezvoltatorilor pentru a controla în mod programatic browserul. Această diagramă arată un exemplu de pagină cu unele dintre colecțiile generale WebDriver și API-uri care pot fi utilizate pentru a obține și a seta proprietățile browserului.

Teste de autor

Aveți o alegere de limbi pe baza legăturilor de limbi acceptate pentru WebDriver. Limbile de bază suportate de proiectul principal Selenium/WebDriverJS includ:

• C#
• Java
• JavaScript (prin Node)
• Piton
• Rubin

Testele pot varia de la verificarea aspectului paginii, valorile returnate de la apelurile pe server, comportamentul așteptat al interacțiunii utilizatorului până la verificarea fluxului de lucru, cum ar fi asigurarea ca fluxul de lucru al coșului de cumpărături să funcționeze conform așteptărilor.

Pentru scopuri ilustrative, să presupunem că testăm aplicația TODOMVC, o aplicație demonstrativă care este implementată în mai multe cadre JavaScript diferite pentru controlul vizualizării modelului. Această aplicație simplă oferă interfață de utilizare pentru a introduce articole de făcut, edita, șterge și marca articole ca complete. Vom folosi exemplul bazat pe React la https://todomvc.com/examples/react/.

Apoi vom putea demonstra rularea testelor pentru exemplul React pe exemplele Backbone.js și Vue.js prin simpla schimbare a adresei URL.

• Esenta fișierului exemplu complet JS

Pentru această demonstrație, vom scrie teste în JavaScript care rulează în node la:

1. Adăugați trei elemente de făcut și verificând ceea ce am introdus a fost creat într-un articol de făcut.
2. Modificați acel element făcând dublu clic, trimițând comenzi de la tastatură înapoi și adăugând mai mult text.
3. Ștergeți acel element folosind API-urile mouse-ului.
4. Bifați un articol din listă ca fiind finalizat.

Configurați mediul dvs. de testare de automatizare de bază

Să începem prin a obține configurarea mașinii noastre Windows 10 pentru a rula WebDriver folosind JavaScript. Apelurile către WebDriver de la nod vor fi aproape întotdeauna asincrone. Pentru a face codul mai ușor de citit, am folosit ES2016 asincron/așteptare peste promisiuni sau apeluri inverse.

Va trebui să instalați node.js mai nou decât v7.6 sau să utilizați Babel pentru compilarea încrucișată pentru a avea suport pentru caracteristica async/wait. De asemenea, folosim Visual Studio Code pentru editarea și depanarea nodului.

WebDriverJS pentru Microsoft Edge

Fiecare browser va avea un fișier binar de care veți avea nevoie local pentru a interacționa cu browserul în sine. Acel binar este apelat de codul tău prin API-urile Selenium WebDriver. Puteți găsi cele mai recente descărcări și documentație pentru Microsoft Edge WebDriver aici.

Rețineți că versiunea Edge cu care doriți să rulați testele trebuie testată cu versiunea corespunzătoare a MicrosoftWebDriver.exe . Vom folosi versiunea stabilă a Edge (16.16299) cu versiunea corespunzătoare MicrosoftWebDriver.exe 5.16299.

Plasați MicrosoftWebDriver.exe în calea dvs. sau în același folder în care va rula scriptul de testare. Rularea acestui executabil va porni o fereastră de consolă care vă va arăta adresa URL și numărul portului pe care WebDriverJS se așteaptă să gestioneze cererile care urmează să fie trimise.

WebDriverJS pentru alte browsere

Puteți spune cu ușurință WebDriverJS să ruleze teste într-un browser diferit, setând o variabilă de configurare și având instalat driverul binar corespunzător pentru browserul respectiv. Le puteti gasi aici:

• Apple Safari: la pachet cu Safari 10+
• Google Chrome: ChromeDriver
• Microsoft Internet Explorer: IEDriver din proiectul Selenium
• Mozilla Firefox: Geckodriver
• Opera: OperaChromiumDriver

Selenium WebDriverJS pentru JavaScript

Pentru a interacționa cu driverul binar pe care tocmai l-ați descărcat prin JavaScript, va trebui să instalați biblioteca de automatizare Selenium WebDriver pentru JavaScript. Acesta poate fi instalat cu ușurință ca pachet nod folosind:

npm install selenium-webdriver

Scrierea codului de automatizare

Odată ce fișierul binar al driverului specific pentru browser este în calea sistemului sau în folderul local și ați instalat Selenium WebDriver prin npm, puteți începe automatizarea browserului prin cod.

Să descompunem codul nostru exemplu în diferiți pași de care veți avea nevoie.

1. Creați o variabilă locală pentru a încărca și a interacționa cu biblioteca.

    var webdriver = require('selenium-webdriver');

2. În mod implicit, WebDriverJS va presupune că rulați local și că fișierul driverului există. Mai târziu, vom arăta cum puteți trece informații de configurare în bibliotecă atunci când instanțiați browserul pentru prima dată. WebDriverJS este instanțiat cu o variabilă de configurare numită „capacități” pentru a defini ce driver de browser doriți să utilizați.

    var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";

3. Apoi creați o variabilă și apelați build() cu variabila de configurare a capabilităților pentru ca WebDriverJS să instanțieze browserul:

    var browser = new webdriver.Builder().withCapabilities(capabilities).build();

4. Acum că putem interacționa cu browserul, îi spunem să navigheze la o adresă URL folosind metoda `get`. Această metodă este asincronă, așa că folosim `wait` pentru a aștepta până când se termină.

    // Have the browser navigate to the TODO MVC example for React await browser.get('https://todomvc.com/examples/react/#');

5. Pentru unele browsere și sisteme, cel mai bine este să acordați binarului WebDriverJS ceva timp pentru a naviga la adresa URL și a încărca pagina. Pentru exemplul nostru, așteptăm 1 secundă (1000ms) folosind funcția de gestionare a WebDriverJS:

    //Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);

6. Acum aveți un cârlig programatic într-un browser care rulează prin variabila browser. Observați diagrama de colecție de mai devreme în acest document, care arată colecțiile API-ului WebDriver. Folosim colecția Elements pentru a obține elemente specifice din pagină. În acest caz, căutăm caseta de introducere în exemplul TODOMVC, astfel încât să putem introduce câteva articole TODO. Solicităm WebDriverJS să caute elemente care se potrivesc cu regula clasei .new-todo , deoarece știm că este clasa atribuită acestui câmp. Declarăm o constantă, deoarece nu putem modifica datele care revin - doar interogați-o. Rețineți că acesta va găsi primul element din DOM care se potrivește cu modelul CSS, ceea ce este bine în cazul nostru, deoarece știm că există doar unul.

    const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));

7. În continuare, trimitem apăsări de taste în câmpul pentru care tocmai am primit un handle pentru a folosi funcția sendKeys. Am pus tasta de intrare cu evadare pe propria linie de așteptare pentru a evita condițiile de cursă. Folosim modelul de iterație for (x of y) deoarece avem de-a face cu promisiuni. toDoTestItems este pur și simplu o matrice de 3 șiruri, o variabilă șir (pe care o vom testa mai târziu) și 2 literale. Sub coperte, WebDriverJS va trimite caractere individuale ale șirului pe rând, dar pur și simplu trecem întreaga variabilă șir la sendKeys :
   

    var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("\n"); }

În acest moment, să rulăm scriptul cu nodul și să vedem dacă vedem un browser care navighează la pagină și introduce acele trei elemente de testare TODO. Înfășurați codul după prima declarație de variabilă într-o funcție async astfel:

 async function run() {

Închideți funcția } la sfârșitul codului, apoi apelați acea funcție asincronă cu:

 run();

Salvați fișierul JS. Accesați fereastra de comandă a nodului, navigați la folderul în care ați salvat fișierul JS și rulați node yourfile.js

Ar trebui să vedeți apariția unei ferestre de browser și textul trimis în fișierul TODOMVC să fie introdus ca noi intrări TODO în aplicație. Felicitări — sunteți activ cu WebDriverJS.

Încercați să schimbați adresa URL pe care o încarcă WebDriverJS în acest exemplu cu una dintre celelalte mostre TODOMVC și observați că același cod de testare poate rula pe cadre diferite.

 await browser.get('https://todomvc.com/examples/vue/');

Rularea testelor pe BrowserStack

Am arătat cum rulează acest test la nivel local pe computerul dvs. Același test poate rula la fel de ușor folosind servicii de testare online precum BrowserStack. Înscrieți-vă pentru acces gratuit la serviciul BrowserStack pentru a obține acces la browserele Microsoft Edge pentru testare live și automată gratuită. După ce v-ați conectat, accesați secțiunea „Automatizare” și căutați setările contului dvs. de test automat. Va trebui să le transmiteți funcției WebDriverJS pentru a vă conecta prin cod, pentru a vă denumi sesiunea de testare și pentru a transmite jetonul de acces.

Apoi pur și simplu adăugați acele valori în variabila capabilities și apelați din nou generatorul WebDriver.

 var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername', 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

Puteți afla mai multe despre variabila capabilities și valorile pe care BrowserStack le poate accepta aici.

Apoi apelați funcția de builder și trimiteți adresa URL a serverului BrowserStack:

 var browser = new webdriver.Builder(). usingServer('https://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

În cele din urmă, ar trebui să instruiți WebDriverJS să iasă din browser, altfel acesta va rămâne în funcțiune și, în cele din urmă, va expira. Efectuați un apel la funcția de ieșire la sfârșitul fișierului de testare.

 browser.quit();

Acum, când rulați fișierul de testare JS folosind NodeJS, veți trimite instrucțiunile de testare către un browser găzduit pe serviciul cloud al BrowserStack. Puteți accesa secțiunea „Automatizare” din BrowserStack și puteți observa pornirea și oprirea lucrărilor de testare. Odată finalizat, puteți naviga prin comenzile WebDriver care au fost trimise, puteți vedea imagini ale ecranului browserului la intervale în timpul testului și chiar puteți vedea un videoclip al sesiunii browserului.

Testarea valorilor cu afirmații

Când testați site-ul dvs., comparați rezultatele reale cu rezultatele așteptate. Cel mai bun mod de a face acest lucru este prin aserțiuni în care o excepție va fi aruncată dacă nu este îndeplinită o condiție de afirmare. În exemplul nostru, folosim o bibliotecă de aserțiuni pentru a exprima acele aserțiuni și pentru a face codul mai lizibil. Am ales ChaiJS ca fiind suficient de flexibil pentru a fi folosit cu orice bibliotecă JavaScript și este destul de popular în momentul scrierii.

Descărcați și instalați Chai ca pachet nod folosind npm. În cod, trebuie să solicitați chai :

 var expect = require('chai').expect;

Am decis să folosim interfața Expect pentru a folosi limbajul natural pentru a înlănțui afirmațiile noastre.

Puteți testa lungimea, existența, conține o valoare și multe altele.

 expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

În cazul în care una dintre aceste afirmații nu este adevărată, se face o excepție de afirmație. Exemplul nostru de cod se va opri din executarea când excepția este aruncată, deoarece noi nu gestionăm excepția. În practică, veți folosi un test runner cu nod care va gestiona excepțiile și va raporta erorile și trecerile de testare.

Automatizarea trecerilor de test cu un test Runner

Pentru a gestiona mai bine excepțiile de aserție, un runner de testare este asociat cu un nod pentru a împacheta blocuri de cod care conțin aserțiuni de testare în funcții de tip try/catch care mapează excepțiile cu cazurile de testare eșuate.

În acest exemplu, am ales cadrul de testare MochaJS, deoarece se potrivește bine cu Chai și este ceva pe care îl folosim pentru a testa codul nostru de producție.

Pentru a integra runnerul, există atât cod adăugat la scriptul de testare, cât și o schimbare în modul în care rulați codul cu nodul.

Adăugarea codului de alergător de testare

Încheiați codul de testare în funcții asincrone cu funcția de nivel superior folosind cuvântul cheie „descrie” și funcția de subtest folosind cuvântul cheie „it”. Funcțiile sunt marcate cu o descriere a ceea ce caută testele. Această descriere este ceea ce va fi mapat pentru rezultatele testelor.

MochaJS este instalat ca un pachet nod prin npm.

Iată funcția de nivel superior din exemplul nostru folosind describe :

 describe('Run four tests against TODOMVC sample', async () => {

Ulterior, împachetați testele logice în grupuri cu cuvântul cheie it :

 it('TEST 3: Delete a TODO item from the list by clicking the X button', async () => {

Afirmațiile incluse în aceste funcții care provoacă o excepție vor fi mapate înapoi la aceste descrieri.

Executarea codului cu NodeJS și MochaJS

În cele din urmă, trebuie să rulați codul de testare cu nodul care apelează binarul MochaJS pentru a gestiona corect excepțiile. Mocha pot primi argumente pentru a configura valorile de timeout, folderul de căutat care deține fișierele de testare și multe altele. Iată configurația pe care am folosit-o pentru Visual Studio Code pentru a atașa depanatorul și a folosi inspecția Codului și a parcurge caracteristicile:

 { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

Testarea automată este o modalitate excelentă de a vă asigura că site-ul dvs. funcționează într-o varietate de browsere în mod constant, fără bătăi de cap sau costul testării manuale. Instrumentele pe care le-am folosit aici sunt doar câteva dintre numeroasele opțiuni disponibile, dar ilustrează pașii comuni implicați în configurarea și executarea testelor automate pentru proiectele dvs.