Automatizarea testării caracteristicilor dvs. cu Selenium WebDriver
Publicat: 2022-03-10Acest articol este pentru dezvoltatorii web care doresc să petreacă mai puțin timp testând front-end-ul aplicațiilor lor web, dar totuși doresc să fie siguri că fiecare caracteristică funcționează bine. Vă va economisi timp prin automatizarea sarcinilor online repetitive cu Selenium WebDriver. Veți găsi un exemplu pas cu pas pentru automatizarea și testarea funcției de autentificare a WordPress, dar puteți adapta și exemplul pentru orice alt formular de conectare.
Ce este seleniul și cum vă poate ajuta?
Selenium este un cadru pentru testarea automată a aplicațiilor web. Folosind Selenium, puteți automatiza practic fiecare sarcină din browser ca și cum o persoană reală ar executa sarcina. Interfața folosită pentru a trimite comenzi către diferitele browsere se numește Selenium WebDriver. Implementările acestei interfețe sunt disponibile pentru fiecare browser major, inclusiv Mozilla Firefox, Google Chrome și Internet Explorer.
Automatizarea testării caracteristicilor dvs. cu Selenium WebDriver
Ce tip de dezvoltator web sunteți? Sunteți genul disciplinat care testează toate caracteristicile cheie ale aplicației dvs. web după fiecare implementare. Dacă da, probabil că ești enervat de cât timp consumă această testare repetitivă. Sau ești genul care pur și simplu nu se deranjează să testeze funcțiile cheie și se gândește mereu: „Ar trebui să testez mai multe, dar aș prefera să dezvolt lucruri noi.” Dacă da, probabil că găsiți erori doar întâmplător sau când clientul sau șeful dvs. se plânge de ele.
Lucrez de ceva vreme pentru un renumit retailer online din Germania și am aparținut întotdeauna celei de-a doua categorii: a fost atât de interesant să mă gândesc la noi funcții pentru magazinul online și nu mi-a plăcut deloc să merg. peste toate caracteristicile anterioare din nou după fiecare implementare nouă de software. Deci, strategia a fost mai mult sau mai puțin să sperăm că toate caracteristicile cheie vor funcționa.
Într-o zi, am înregistrat o scădere serioasă a ratei noastre de conversie și am început să cautăm instrumentele noastre de analiză web pentru a găsi sursa acestei scăderi. A durat destul de mult până am aflat că procesul nostru de verificare nu a funcționat corect de la implementarea anterioară a software-ului.
Aceasta a fost ziua în care am început să fac câteva cercetări despre automatizarea procesului nostru de testare a aplicațiilor web și am dat peste Selenium și WebDriver-ul său. Selenium este practic un cadru care vă permite să automatizați browserele web. WebDriver este numele interfeței cheie care vă permite să trimiteți comenzi către toate browserele majore (mobile și desktop) și să lucrați cu ele ca un utilizator real.
Pregătirea primului test cu Selenium WebDriver
În primul rând, am fost puțin sceptic dacă Selenium se va potrivi nevoilor mele, deoarece cadrul este cel mai frecvent utilizat în Java și, cu siguranță, nu sunt un expert în Java. Mai târziu, am aflat că a fi expert Java nu este necesar pentru a profita de puterea cadrului Selenium.
Ca prim test simplu, am testat autentificarea unuia dintre proiectele mele WordPress. De ce WordPress? Doar pentru că utilizarea formularului de autentificare WordPress este un exemplu pe care toată lumea îl poate urmări mai ușor decât dacă aș face referire la o aplicație web personalizată.
De ce aveți nevoie pentru a începe să utilizați Selenium WebDriver? Pentru că am decis să folosesc cea mai comună implementare a Selenium în Java, trebuia să-mi configurez micul mediu Java.
Dacă doriți să urmați exemplul meu, puteți utiliza mediul Java la alegere. Dacă nu ați configurat încă unul, vă sugerez să instalați Eclipse și să vă asigurați că puteți rula un script simplu „Hello world” în Java.
Pentru că am vrut să testez autentificarea în Chrome, m-am asigurat că browserul Chrome era deja instalat pe computerul meu. Atât am făcut în pregătire.
Descărcarea ChromeDriver
Toate browserele majore oferă propria lor implementare a interfeței WebDriver. Pentru că am vrut să testez autentificarea WordPress în Chrome, trebuia să obțin implementarea WebDriver a Chrome: ChromeDriver.
Am extras arhiva ZIP și am stocat fișierul executabil chromedriver.exe
într-o locație pe care mi-o pot aminti pentru mai târziu.
Înființarea proiectului nostru Selenium în Eclipse
Pașii pe care i-am făcut în Eclipse sunt probabil destul de simpli pentru cineva care lucrează mult cu Java și Eclipse. Dar pentru cei ca mine, care nu sunt atât de familiarizați cu asta, voi trece peste pașii individuali:
- Deschide Eclipse.
- Faceți clic pe pictograma „Nou”.
Crearea unui nou proiect în Eclipse - Alegeți expertul pentru a crea un nou „Proiect Java” și faceți clic pe „Următorul”.
Alegeți expertul java-project. - Dați un nume proiectului și faceți clic pe „Terminare”.
Expertul proiectului eclipse - Acum ar trebui să vedeți noul dvs. proiect Java în partea stângă a ecranului.
Am creat cu succes un proiect pentru a rula Selenium WebDriver.
Adăugarea bibliotecii Selenium la proiectul nostru
Acum avem proiectul nostru Java, dar Selenium încă lipsește. Deci, în continuare, trebuie să aducem cadrul Selenium în proiectul nostru Java. Iată pașii pe care i-am făcut:
- Descărcați cea mai recentă versiune a bibliotecii Java Selenium.
Descărcați biblioteca Selenium. - Extrageți arhiva și stocați folderul într-un loc de care vă puteți aminti cu ușurință.
- Reveniți la Eclipse și accesați „Proiect” → „Proprietăți”.
Accesați proprietăți pentru a integra Selenium WebDriver în proiectul dvs. - În caseta de dialog, accesați „Java Build Path” și apoi înregistrați „Libraries”.
- Faceți clic pe „Adăugați JAR externe”.
Adăugați lib-ul Selenium la calea dvs. de compilare Java. - Navigați la folderul tocmai descărcat cu biblioteca Selenium. Evidențiați toate fișierele
.jar
și faceți clic pe „Deschide”.Selectați toate fișierele din lib pentru a le adăuga la proiectul dvs. - Repetați acest lucru și pentru toate fișierele
.jar
dinlibs
subfolderului. - În cele din urmă, ar trebui să vedeți toate fișierele
.jar
din bibliotecile proiectului dvs.:Cadrul Selenium WebDriver a fost acum integrat cu succes în proiectul dumneavoastră!
Asta e! Tot ceea ce am făcut până acum este o sarcină unică. Ați putea folosi acest proiect acum pentru toate testele diferite și nu ar fi nevoie să faceți din nou întregul proces de configurare pentru fiecare caz de testare. Cam îngrijit, nu-i așa?
Crearea clasei noastre de testare și lăsarea acesteia să deschidă browserul Chrome
Acum avem proiectul nostru Selenium, dar ce urmează? Pentru a vedea dacă funcționează deloc, am vrut să încerc ceva foarte simplu, cum ar fi doar deschiderea browserului meu Chrome.
Pentru a face acest lucru, trebuia să creez o nouă clasă Java din care să pot executa primul meu caz de testare. În această clasă executabilă, am copiat câteva linii de cod Java și, credeți sau nu, a funcționat! În mod magic, browserul Chrome s-a deschis și, după câteva secunde, s-a închis de la sine.
Incearca-l tu insuti:
- Faceți clic pe butonul „Nou” din nou (în timp ce vă aflați în folderul noului proiect).
Creați o nouă clasă pentru a rula Selenium WebDriver. - Alegeți expertul „Clasă” și faceți clic pe „Următorul”.
Alegeți vrăjitorul clasei Java pentru a crea o clasă nouă. - Denumiți-vă clasa (de exemplu, „RunTest”) și faceți clic pe „Finish”.
Expertul Eclipse Java Class. - Înlocuiește tot codul din noua ta clasă cu următorul cod. Singurul lucru pe care trebuie să îl schimbați este calea către
chromedriver.exe
pe computer:import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }
- Salvați fișierul și faceți clic pe butonul de redare pentru a rula codul.
Rularea primului proiect Selenium WebDriver. - Dacă ați făcut totul corect, codul ar trebui să deschidă o nouă instanță a browserului Chrome și să o închidă la scurt timp după aceea.
Browserul Chrome se deschide în mod magic. (Previzualizare mare)
Testarea autentificare a administratorului WordPress
Acum eram optimist că aș putea automatiza primul meu mic test de caracteristici. Am vrut ca browserul să navigheze la unul dintre proiectele mele WordPress, să se autentifice în zona de administrare și să verifice dacă autentificarea a avut succes. Deci, ce comenzi trebuia să caut?

- Navigați la formularul de conectare,
- Localizați câmpurile de intrare,
- Introduceți numele de utilizator și parola în câmpurile de introducere,
- Apăsați butonul de conectare,
- Comparați titlul paginii curente pentru a vedea dacă autentificarea a avut succes.
Din nou, după ce am făcut toate actualizările necesare pentru codul meu și am făcut clic pe butonul de rulare din Eclipse, browser-ul meu a început să funcționeze în mod magic prin autentificarea WordPress. Am rulat cu succes primul meu test automat de site!
Dacă doriți să încercați singur acest lucru, înlocuiți tot codul clasei dvs. Java cu următorul. Voi parcurge codul în detaliu după aceea. Înainte de a executa codul, trebuie să înlocuiți patru valori cu propriile valori:
Locația fișierului
chromedriver.exe
(ca mai sus),Adresa URL a contului de administrator WordPress pe care doriți să-l testați,
Numele de utilizator WordPress,
Parola WordPress.
Apoi, salvați și lăsați-l să ruleze din nou. Acesta va deschide Chrome, va naviga la autentificarea site-ului dvs. WordPress, va autentifica și va verifica dacă titlul h1
al paginii curente este „Tablou de bord”.
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }
Dacă ați făcut totul corect, rezultatul dvs. din consola Eclipse ar trebui să arate cam așa:

Înțelegerea Codului
Deoarece probabil că sunteți un dezvoltator web și aveți cel puțin o înțelegere de bază a altor limbaje de programare, sunt sigur că înțelegeți deja ideea de bază a codului: am creat o metodă separată, testWordpressLogin
, pentru cazul de testare specific care este numit din metoda noastră principală.
În funcție de faptul că metoda returnează adevărat sau fals, veți obține o ieșire în consola dvs. care vă va spune dacă acest test specific a trecut sau nu a reușit.
Acest lucru nu este necesar, dar în acest fel puteți adăuga cu ușurință multe mai multe cazuri de testare la această clasă și aveți în continuare cod care poate fi citit.
Acum, pas cu pas, iată ce se întâmplă în micul nostru program:
- În primul rând, spunem programului nostru unde poate găsi WebDriver-ul specific pentru Chrome.
System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");
- Deschidem browserul Chrome și maximizăm fereastra browserului.
webDriver = new ChromeDriver(); webDriver.manage().window().maximize();
- Aici trecem la submetoda noastră și verificăm dacă returnează adevărat sau fals.
if (testWordpresslogin()) …
- Următoarea parte din submetoda noastră ar putea să nu fie intuitiv de înțeles:
Blocuriletry{…}catch{…}
. Dacă totul decurge conform așteptărilor, va fi executat doar codul dintry{…}
, dar dacă ceva nu merge bine în timpul executăriitry{…}
, atunci execuția continuă încatch{}
. Ori de câte ori încercați să localizați un element cufindElement
și browserul nu este capabil să localizeze acest element, va lansa o excepție și va executa codul încatch{…}
. În exemplul meu, testul va fi marcat ca „eșuat” ori de câte ori ceva nu merge bine și se executăcatch{}
. - În submetodă, începem prin a naviga în zona noastră de administrare WordPress și a găsi câmpurile pentru numele de utilizator și parola căutând ID-urile acestora. De asemenea, introducem valorile date în aceste câmpuri.
webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");
Selenium completează formularul nostru de conectare - După completarea formularului de autentificare, găsim butonul de trimitere după ID-ul acestuia și facem clic pe el.
webDriver.findElement(By.id("wp-submit")).click();
- Pentru a urmări vizual testul, includ aici o pauză de 7 secunde (7000 milisecunde = 7 secunde).
Thread.sleep(7000);
- Dacă autentificarea are succes, titlul
h1
al paginii curente ar trebui să fie acum „Tablou de bord”, referindu-se la zona de administrare WordPress. Deoarece titlulh1
ar trebui să existe o singură dată pe fiecare pagină, am folosit numele etichetei aici pentru a localiza elementul. În majoritatea celorlalte cazuri, numele etichetei nu este un bun localizator, deoarece numele etichetei HTML este rareori unic pe o pagină web. După localizareah1
, extragem textul elementului cugetText()
și verificăm dacă este egal cu șirul „Dashboard”. Dacă autentificarea nu reușește, nu vom găsi „Tabloul de bord” cah1
curent. Prin urmare, am decis să folosesch1
pentru a verifica dacă autentificarea a avut succes.if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; }
Lăsând WebDriver să verifice dacă am ajuns pe Dashboard: Test a trecut! (Previzualizare mare) - Dacă ceva a mers prost în partea anterioară a submetodei, programul ar fi sărit direct la următoarea parte. Blocul
catch
va imprima tipul de excepție care a avut loc pe consolă și apoi va returnafalse
la metoda principală.catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }
Adaptarea cazului de testare
Aici devine interesant dacă doriți să vă adaptați și să adăugați cazuri de testare proprii. Puteți vedea că apelăm întotdeauna metode ale obiectului webDriver
pentru a face ceva cu browserul Chrome.
În primul rând, maximizăm fereastra:
webDriver.manage().window().maximize();
Apoi, într-o metodă separată, navigăm în zona noastră de administrare WordPress:
webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");
Există și alte metode ale obiectului webDriver
pe care le putem folosi. Pe lângă cele două de mai sus, probabil că îl vei folosi mult pe acesta:
webDriver.findElement(By. …)
Metoda findElement
ne ajută să găsim diferite elemente în DOM. Există diferite opțiuni pentru a găsi elemente:
-
By.id
-
By.cssSelector
-
By.className
-
By.linkText
-
By.name
-
By.xpath
Dacă este posibil, recomand să utilizați By.id
deoarece ID-ul unui element ar trebui să fie întotdeauna unic (spre deosebire de, de exemplu, className
), și de obicei nu este afectat dacă structura DOM-ului dvs. se modifică (spre deosebire, de exemplu, de xPath
) .
Notă : Puteți citi mai multe despre diferitele opțiuni pentru localizarea elementelor cu WebDriver aici.
De îndată ce obțineți un element folosind metoda findElement
, puteți apela diferitele metode disponibile ale elementului. Cele mai comune sunt sendKeys
, click
și getText
.
Folosim sendKeys
pentru a completa formularul de autentificare:
webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");
Am folosit click
pentru a trimite formularul de autentificare făcând clic pe butonul de trimitere:
webDriver.findElement(By.id("wp-submit")).click();
Și getText
a fost folosit pentru a verifica ce text este în h1
după ce se face clic pe butonul de trimitere:
webDriver.findElement(By.tagName("h1")).getText()
Notă : Asigurați-vă că verificați toate metodele disponibile pe care le puteți utiliza cu un element.
Concluzie
De când am descoperit puterea Selenium WebDriver, viața mea de dezvoltator web s-a schimbat. Pur și simplu îmi place. Cu cât mă scufund mai adânc în cadru, cu atât descopăr mai multe posibilități – rulând un test simultan în Chrome, Internet Explorer și Firefox sau chiar pe smartphone-ul meu, sau fac capturi de ecran automat ale diferitelor pagini și le compar. Astăzi, folosesc Selenium WebDriver nu numai în scopuri de testare, ci și pentru a automatiza sarcini repetitive pe web. Ori de câte ori văd o oportunitate de a-mi automatiza munca pe web, pur și simplu copiez proiectul meu WebDriver inițial și îl adaptez la următoarea sarcină.
Dacă credeți că Selenium WebDriver este pentru dvs., vă recomand să vă uitați la documentația Selenium pentru a afla despre toate posibilitățile Selenium (cum ar fi rularea sarcinilor simultan pe mai multe dispozitive (mobile) cu Selenium Grid).
Aștept cu nerăbdare să aud dacă considerați WebDriver la fel de util ca mine!