de Adam Kelly

Modul ușor de a începe testarea automată a site-ului dvs. web

Modul usor de a incepe testarea automata a site ului dvs

Rularea manuală a acelorași teste pe Chrome, Safari și Firefox de mai multe ori poate fi consumatoare de timp și obositoare.

Unele sarcini de testare pot fi automatizate pentru a gestiona aceste sarcini mai eficient. Acest articol va acoperi ce tipuri de teste pot fi automatizate și cum le puteți implementa folosind Node.js și Nightwatch.

Nightwatch se conectează la un WebDriver (cum ar fi Selenium). Funcționează pe un API REST. De exemplu, inițializarea este:

Modul usor de a incepe testarea automata a site ului dvs
Cum se conectează Nightwatch la Seleniu

Cerințe

Ar trebui să aveți Java instalat. Puteți verifica acest lucru rulând

$ java -version

în terminalul tău. Dacă nu îl aveți instalat, mergeți instalare aceasta.

Trebuie să aveți o versiune destul de recentă a Safari, versiunea 10 sau o versiune ulterioară. Pentru a utiliza Safari, trebuie să activați și meniul pentru dezvoltatori și să activați Permiteți automatizarea la distanță opțiune.

În sfârșit, trebuie să aveți și voi Node.js.

Configurare

Notă: Aceasta presupune că site-ul folosește deja node.js. Dacă nu, ar trebui să-l inițializați cu un package.json fişier.

Se instalează

Nightwatch.js este o modalitate mai ușoară de a scrie teste care le rulează folosind Selenium.

Pentru a-l instala, cd în proiectul dvs. și apoi instalați modulul de la npm la dependențele dvs. de dezvoltare:

$ npm install --save-dev nightwatch

Acum trebuie să instalați Selenium. Cel mai simplu mod de a face acest lucru este cu un alt modul npm, selenium-server:

$ npm install --save-dev selenium-server

Vrem să testăm pe Chrome, Safari și Firefox, deci trebuie să le instalăm și driverele. Driverul este ceea ce este folosit de Selenium pentru a controla browserele. Driverul Safari este încorporat în MacOS, iar driverele Chrome și Firefox pot fi instalate folosind npm:

$ npm install --save-dev chromedriver geckodriver

Configurarea

Nightwatch este configurat folosind un fișier de configurare. Fișierul de configurare este un fișier JavaScript normal, pe care îl voi numi nightwatch.conf.js. Acest fișier poate fi pus într-un folder, cum ar fi tests.

Copiați și lipiți această configurație de bază în nightwatch.conf.js fişier:

Acum aveți configurarea cadrului de testare automatizată și puteți începe să scrieți teste!

Ce puteți / ar trebui să testați?

Există două tipuri de teste pe care le puteți face cu această configurare:

  1. Testarea funcțională
  2. Testarea regresiei

Testarea funcțională este tipul de testare care încearcă să vadă dacă site-ul dvs. web respectă toate cerințele sale. De obicei, aceasta înseamnă implementarea testelor care asigură faptul că are toate caracteristicile necesare.

De exemplu, dacă clientul dorește un formular de autentificare, puteți scrie un test pentru a verifica dacă, atunci când sunteți conectat, numele dvs. este vizibil pe pagina web.

Celălalt tip de testare este Testarea prin regresie. Acest lucru se face pentru a vă asigura că site-ul web pe care l-ați dezvoltat și testat înainte funcționează în același mod după ce sa schimbat. Acest lucru este util mai ales atunci când clienții pot edita părți ale site-ului web care ar putea provoca erori de funcționalitate.

De exemplu, puteți scrie un test pentru a vă asigura că o pagină are metaetichetele și informațiile corecte.

O limitare la acest cadru de testare este că testează site-ul web, nu codul. De exemplu, nu poate testa dacă a fost făcută o interogare DB, dar ar putea testa dacă există un rând nou făcut din acea interogare.

Cu toate acestea, puteți utiliza alături de alte cadre de testare unitară (cum ar fi Glumă, Mocha, și Ava), pentru a testa logica și codul de bază.

Teste de scriere

Bine ați venit la partea distractivă a testării. Doar glumesc. Totul este distractiv.

Oricum, testele din Nightwatch sunt scrise folosind un modul JavaScript normal. În nightwatch.conf.js fișier, am specificat să analizăm tests/features pentru teste.

Nightwatch va lua acest dosar și va căuta toate fișierele JavaScript din acesta, apoi va încerca să le ruleze ca teste.

Să creăm un test foarte simplu: vom testa că titlul de www.bing.com este Bing. De ce ați merge la Bing în primul rând este o problemă mai mare care nu poate fi abordată în acest articol.

Creați un fișier nou în tests/features numit bing.test.js, care conține următorul cod:

Acum testul este creat!

Aici, Title is Bing este numele testului. Acest lucru este afișat atunci când testele sunt executate. .verify este folosit pentru a efectua efectiv un test. .waitForElementVisable se așteaptă ca un selector CSS sau un selector Xpath să specifice la ce elemente vă referiți.

Puteți avea mai mult de un test în același fișier și este o bună practică să păstrați testele conexe în același fișier.

Pentru mai multe despre crearea testelor, documentația Nightwatch este foarte bună. Dacă doriți să știți cum să faceți ceva, verificați acest mai întâi. De asemenea, consultați secțiunea „Deasupra și dincolo” din acest ghid.

Teste de alergare

Pentru a rula testele pe care le aveți acum, accesați package.json fişier. Adăugați următoarele:

“scripts”: {  “nightwatch”: “nightwatch -c tests/nightwatch.conf.js -e chrome,firefox,safari”}

Aceasta va rula testele cu Chrome, Firefox și Safari.

Pentru a rula testul, în terminalul dvs. efectuați comanda:

$ npm run nightwatch

Dacă aveți în continuare același test ca mai sus, rezultatul dvs. ar trebui să arate astfel:

1611443350 531 Modul usor de a incepe testarea automata a site ului dvs
Rezultatul suitei de testare

Dacă primiți erori, verificați Common Issues secțiunea acestui articol sau Google eroarea.

Și Iată-te, ați configurat și utilizat testarea automată a browserului! ?

Deasupra și dincolo

Cele mai bune practici și mai multe ghiduri de adâncime

Există o mulțime de resurse bune, dar iată câteva dintre preferatele mele:

Testarea cu browserul Edge

Puteți testa cu Edge folosind Microsoft WebDriver. Este compatibil cu Windows 10 și versiunile ulterioare.

După ce descărcați binarul, mergeți la nightwatch.conf.js fișier și sub "webdriver.gecko.driver" a pune

"webdriver.edge.driver" : "location/of/binary/MicrosoftWebDriver.exe"

Apoi, du-te la test_settings și adăugați un alt obiect sub safari:

edge: {  desiredCapabilities: {    browserName: 'MicrosoftEdge',    javascriptEnabled: true,    acceptSslCerts: true,    nativeEvents: true  }}

În cele din urmă, mergi la package.json și schimbați nightwatch script pentru:

"nightwatch": "nightwatch -c tests/nightwatch.conf.js -e chrome,firefox,safari,edge"

Utilizarea cu CI

Acest lucru nu depășește scopul acestui articol, dar puteți verifica:

Probleme comune

Nightwatch nu poate găsi seleniu

Dacă nightwatch nu găsește seleniu, încercați să rulați fișierul de configurare cu nod. Dacă fișierul dvs. de configurare, nightwatch.conf.js se află în director tests, alerga:

$ node tests/nightwatch.conf.js

Ferestre pop-up Safari

Este posibil ca Safari să vă avertizeze că este controlat. Permiteți-o. Dacă testul a eșuat sau a expirat, rulați-l din nou.

Safari nu se închide

Închideți-l manual.

Pentru a vizualiza acest conținut web, trebuie să instalați Java Runtime Environment

Am spus că trebuie să instalați Java, așa că mergeți instalează-l.

EROARE – Portul 4444 este ocupat, vă rugăm să alegeți un port gratuit și să îl specificați folosind opțiunea -port

Aceasta înseamnă că ceva folosește portul 4444. Puteți fie să opriți acest proces, fie să schimbați acel port.

Pentru a vedea ce proces utilizează portul pe Mac, utilizați comanda

$ lsof -n -i4TCP:4444 | grep LISTEN

Apoi, puteți ucide acest proces.

Dacă nu doriți să ucideți acest proces, accesați nightwatch.conf.js fișier și în selenium, Schimbare port către un port neutilizat.