Ce sunt localizatorii?
Localizatorul este o comandă care îi spune Selenium IDE pe care elemente GUI (cum ar fi Casetă de text, Butoane, Casete de selectare etc.) trebuie să funcționeze. Identificarea elementelor GUI corecte este o condiție prealabilă pentru crearea unui script de automatizare. Dar identificarea exactă a elementelor GUI este mai dificilă decât pare. Uneori, ajungi să lucrezi cu elemente GUI incorecte sau fără elemente deloc! Prin urmare, Selenium oferă un număr de Localizatori pentru a localiza cu precizie un element GUIDiferitele tipuri de CSS Locator în Selenium IDE
Există comenzi care nu au nevoie de un localizator (cum ar fi comanda „deschis”). Cu toate acestea, cei mai mulți dintre ei au nevoie de localizatori de elemente în Selenium webdriver.
Alegerea localizatorului depinde în mare măsură de cererea dvs. sub test . În acest tutorial, vom comuta între Facebook, noi tours.demoaut pe baza localizatorilor acceptate de aceste aplicații. În mod similar, în proiectul dvs. de testare, veți selecta oricare dintre localizatoarele de elemente enumerate mai sus în Selenium webdriver, pe baza suportului aplicației dvs.
Localizarea după ID
Acesta este cel mai comun mod de localizare a elementelor, deoarece ID-urile ar trebui să fie unice pentru fiecare element.
Format țintă: id = id al elementului
Pentru acest exemplu, vom folosi Facebook ca aplicație de testare, deoarece Mercury Tours nu utilizează atribute ID.
Pasul 1. De când a fost creat acest tutorial, Facebook și-a schimbat designul paginii de conectare. Utilizați această pagină demonstrativă http://demo.guru99.com/test/facebook.html pentru testare. Inspectați caseta de text „E-mail sau telefon” utilizând Firebug și luați act de ID-ul acestuia. În acest caz, ID-ul este „e-mail”.
Pasul 2. Lansați Selenium IDE și introduceți „id = email” în caseta Țintă. Faceți clic pe butonul Găsiți și observați că caseta de text „E-mail sau telefon” devine evidențiată cu galben și mărginită cu verde, ceea ce înseamnă că Selenium IDE a reușit să localizeze corect acel element.
Localizarea după nume
Localizarea elementelor după nume este foarte asemănătoare cu localizarea după ID, cu excepția faptului că folosim prefixul "name =" în loc.
Format țintă: nume = numele elementului
În următoarea demonstrație, vom folosi acum Mercury Tours, deoarece toate elementele semnificative au nume.
Pasul 1. Navigați la http://demo.guru99.com/test/newtours/ și utilizați Firebug pentru a inspecta caseta de text „Nume utilizator”. Luați notă de atributul său de nume.
Aici, vedem că numele elementului este „userName”.
Pasul 2. În Selenium IDE, introduceți „name = userName” în caseta Target și faceți clic pe butonul Find. Selenium IDE ar trebui să poată localiza caseta de text Nume utilizator evidențiind-o.
Localizarea după nume folosind filtre
Filtrele pot fi folosite atunci când mai multe elemente au același nume. Filtrele sunt atribute suplimentare utilizate pentru a distinge elemente cu același nume.
Format țintă : nume = nume_de_filtrul_element = valoare_de_filtru
Să vedem un exemplu -
Pasul 1 . Conectați-vă la Mercury Tours folosind „tutorial” ca nume de utilizator și parolă. Ar trebui să vă ducă la pagina Căutare zboruri afișată mai jos.
Pasul 2. Folosind Firebug, observați că butoanele radio Round Trip și One Way au același nume „tripType”. Cu toate acestea, acestea au atribute VALUE diferite, astfel încât să le putem folosi pe fiecare dintre ele ca filtru.
Pasul 3.
- Vom accesa mai întâi butonul radio One Way. Faceți clic pe prima linie din Editor.
- În caseta Comandă a Selenium IDE, introduceți comanda „faceți clic”.
- În caseta Țintă, introduceți „name = tripType value = oneway”. Porțiunea „value = oneway” este filtrul nostru.
Pasul 4 . Faceți clic pe butonul Găsiți și observați că Selenium IDE poate evidenția butonul radio One Way cu verde - ceea ce înseamnă că putem accesa elementul cu succes folosind atributul său VALUE.
Pasul 5. Apăsați tasta „X” din tastatură pentru a executa această comandă de clic. Observați că butonul radio One Way a fost selectat.
Puteți face exact același lucru cu butonul radio dus-întors, de data aceasta, folosind „nume = valoare tripType = dus-întors” ca țintă.
Localizarea după textul linkului
Acest tip de localizator CSS în Selenium se aplică numai textelor cu hyperlink. Accesăm linkul prefixând ținta noastră cu „link =” și apoi urmat de textul hyperlinkului.
Format țintă : link = link_text
În acest exemplu, vom accesa linkul „ÎNREGISTRARE” aflat pe pagina principală Mercury Tours.
Pasul 1.
- Mai întâi, asigurați-vă că sunteți deconectat de la Mercury Tours.
- Accesați pagina de pornire Mercury Tours.
Pasul 2 .
- Folosind Firebug, inspectați linkul „ÎNREGISTRARE”. Textul linkului se găsește între și etichete.
- În acest caz, textul link-ului nostru este „ÎNREGISTRARE”. Copiați textul linkului.
Pasul 3 . Copiați textul linkului în Firebug și lipiți-l în caseta țintă Selenium IDE. Prefixează-l cu „link =”.
Pasul 4. Faceți clic pe butonul Găsiți și observați că Selenium IDE a reușit să evidențieze corect link-ul REGISTER.
Pasul 5. Pentru a verifica mai departe, introduceți „clickAndWait” în caseta Command și executați-l. Selenium IDE ar trebui să poată face clic cu succes pe linkul ÎNREGISTRARE și să vă ducă la pagina de înregistrare de mai jos.
Localizarea prin selector CSS
Selectorii CSS din Selenium sunt șabloane de șiruri utilizate pentru a identifica un element bazat pe o combinație de etichetă HTML, id, clasă și atribute. Localizarea de către CSS Selectors în Selenium este mai complicată decât metodele anterioare, dar este cea mai comună strategie de localizare a utilizatorilor avansați de Selenium, deoarece poate accesa chiar și acele elemente care nu au ID sau nume.
Selectoarele CSS din Selenium au multe formate, dar ne vom concentra doar pe cele mai comune.
- Etichetă și ID
- Etichetă și clasă
- Etichetă și atribut
- Eticheta, clasa și atributul
- Text interior
Când utilizăm această strategie, prefixăm întotdeauna caseta Țintă cu „css =” așa cum se va arăta în următoarele exemple.
Localizare după selector CSS - etichetă și ID
Din nou, vom folosi caseta de text E-mail Facebook în acest exemplu. După cum vă puteți aminti, are un ID de „e-mail” și l-am accesat deja în secțiunea „Localizarea după ID”. De data aceasta, vom folosi un Selenium CSS Selector cu ID în accesarea aceluiași element.
|
Sintaxă |
Descriere |
|---|---|
|
css = tag # id |
|
Rețineți că ID-ul este întotdeauna precedat de un semn hash (#).
Pasul 1. Navigați la www.facebook.com. Folosind Firebug, examinați caseta de text „E-mail sau telefon”.
În acest moment, rețineți că eticheta HTML este „input” și ID-ul său este „email”. Deci sintaxa noastră va fi „css = input # email”.
Pasul 2. Introduceți „css = input # email” în caseta Țintă a Selenium IDE și faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată evidenția acel element.
Localizare după selector CSS - etichetă și clasă
Localizarea de către CSS Selector în Selenium utilizând o etichetă HTML și un nume de clasă este similară cu utilizarea unei etichete și a unui ID, dar în acest caz se folosește un punct (.) În locul unui semn hash.
|
Sintaxă |
Descriere |
|---|---|
|
css = etichetă. clasă |
|
Pasul 1. Accesați pagina demonstrativă http://demo.guru99.com/test/facebook.html și utilizați Firebug pentru a inspecta caseta de text „E-mail sau telefon”. Observați că eticheta HTML este „input” și clasa sa este „inputtext”.
Pasul 2. În Selenium IDE, introduceți „css = input.inputtext” în caseta Țintă și faceți clic pe Găsiți. Selenium IDE ar trebui să poată recunoaște caseta de text E-mail sau Telefon.
Rețineți că atunci când mai multe elemente au aceeași etichetă și nume HTML, va fi recunoscut doar primul element din codul sursă . Folosind Firebug, inspectați caseta de text Parolă din Facebook și observați că are același nume ca caseta de text E-mail sau Telefon.
Motivul pentru care numai caseta de text E-mail sau Telefon a fost evidențiată în ilustrația anterioară este că aceasta apare pe primul loc în sursa paginii Facebook.
Localizare după selector CSS - etichetă și atribut
Această strategie folosește eticheta HTML și un atribut specific al elementului care urmează să fie accesat.
|
Sintaxă |
Descriere |
|---|---|
|
css = etichetă [atribut = valoare] |
|
Pasul 1. Navigați la pagina de înregistrare Mercury Tours (http://demo.guru99.com/test/newtours/register.php) și inspectați caseta de text „Nume”. Luați notă de eticheta HTML („input” în acest caz) și de numele său („lastName”).
Pasul 2. În Selenium IDE, introduceți „css = input [name = lastName]” în caseta Target și faceți clic pe Find. Selenium IDE ar trebui să poată accesa cu succes caseta Nume.
Atunci când mai multe elemente au același tag și atribut HTML, numai primul va fi recunoscut . Acest comportament este similar cu localizarea elementelor folosind selectoare CSS cu aceeași etichetă și clasă.
Localizarea după selector CSS - etichetă, clasă și atribut
| Sintaxă | Descriere |
|---|---|
| css = tag.class [atribut = valoare] |
|
Pasul 1. Accesați pagina demonstrativă http://demo.guru99.com/test/facebook.html și utilizați Firebug pentru a inspecta casetele de introducere „E-mail sau telefon” și „Parolă”. Rețineți eticheta HTML, clasa și atributele lor. Pentru acest exemplu, vom selecta atributele lor „tabindex”.
Pasul 2. Vom accesa mai întâi caseta de text „E-mail sau telefon”. Astfel, vom folosi o valoare tabindex de 1. Introduceți „css = input.inputtext [tabindex = 1]” în caseta Țintă Selenium IDE și faceți clic pe Găsiți. Caseta de introducere „E-mail sau telefon” trebuie evidențiată.
Pasul 3. Pentru a accesa caseta de introducere a parolei, pur și simplu înlocuiți valoarea atributului tabindex. Introduceți „css = input.inputtext [tabindex = 2]” în caseta Țintă și faceți clic pe butonul Căutare. Selenium IDE trebuie să poată identifica cu succes caseta de text Parolă.
Localizarea prin selector CSS - text interior
După cum probabil ați observat, etichetelor HTML li se oferă rareori atribute de id, nume sau clasă. Deci, cum le accesăm? Răspunsul este prin utilizarea textelor lor interioare. Textele interioare sunt șabloanele de șiruri reale pe care eticheta HTML le arată pe pagină.
|
Sintaxă |
Descriere |
|---|---|
|
css = etichetă: conține („text interior”) |
|
Pasul 1. Navigați la pagina de pornire Mercury Tours (http://demo.guru99.com/test/newtours/) și utilizați Firebug pentru a investiga eticheta „Parolă”. Rețineți eticheta HTML (care este „font” în acest caz) și observați că nu are atribute de clasă, id sau nume.
Pasul 2. Tastați css = font: contains ("Parolă:") în caseta țintă Selenium IDE și faceți clic pe Găsiți. Selenium IDE ar trebui să poată accesa eticheta Parolă așa cum se arată în imaginea de mai jos.
Pasul 3. De această dată, înlocuiți textul interior cu „Boston”, astfel încât Ținta dvs. să devină acum „css = font: contains („ Boston ”)”. Faceți clic pe Găsiți. Trebuie să observați că eticheta „Boston to San Francisco” devine evidențiată. Acest lucru vă arată că Selenium IDE poate accesa o etichetă lungă chiar dacă tocmai ați indicat primul cuvânt din textul său interior.
Localizarea după DOM (Model de obiect document)
Modelul de obiecte document (DOM), în termeni simpli, este modul în care sunt structurate elementele HTML. Selenium IDE poate utiliza DOM în accesarea elementelor paginii. Dacă folosim această metodă, caseta noastră Țintă va începe întotdeauna cu „dom = document ...”; cu toate acestea, prefixul "dom =" este în mod normal eliminat, deoarece Selenium IDE este capabil să interpreteze automat orice începe cu cuvântul cheie "document" ca oricum o cale în DOM în Selenium.
Există patru moduri de bază pentru a localiza un element prin DOM în Seleniu:
- getElementById
- getElementsByName
- dom: nume (se aplică numai elementelor dintr-un formular denumit)
- dom: index
Localizare după DOM - getElementById
Să ne concentrăm pe prima metodă - folosind metoda getElementById a DOM în seleniu. Sintaxa ar fi:
|
Sintaxă |
Descriere |
|---|---|
|
document.getElementById ("ID-ul elementului") |
id al elementului = aceasta este valoarea atributului ID al elementului de accesat. Această valoare trebuie întotdeauna inclusă într-o pereche de paranteze (""). |
Pasul 1. Utilizați această pagină demonstrativă http://demo.guru99.com/test/facebook.html Navigați la aceasta și utilizați Firebug pentru a inspecta caseta de selectare „Păstrați-mă conectat”. Ia act de ID-ul acestuia.
Putem vedea că ID-ul pe care ar trebui să îl folosim este „persist_box”.
Pasul 2. Deschideți Selenium IDE și în caseta Țintă, introduceți „document.getElementById („ persist_box ”)” și faceți clic pe Găsiți. Selenium IDE ar trebui să poată localiza caseta de selectare „Ține-mă conectat”. Deși nu poate evidenția interiorul casetei de selectare, Selenium IDE poate încă înconjura elementul cu o margine verde strălucitor, așa cum se arată mai jos.
Localizarea după DOM - getElementsByName
Metoda getElementById poate accesa doar un singur element la un moment dat și acesta este elementul cu ID-ul pe care l-ați specificat. Metoda getElementsByName este diferită. Colectează o serie de elemente care au numele pe care l-ați specificat. Accesați elementele individuale folosind un index care începe de la 0.
|
getElementById
|
||
|
getElementsByName
|
||
|
Sintaxă |
Descriere |
|---|---|
|
document.getElementsByName („nume”) [index] |
|
Pasul 1. Navigați la pagina de pornire Mercury Tours și conectați-vă folosind „tutorial” ca nume de utilizator și parolă. Firefox ar trebui să vă ducă la ecranul Flight Finder.
Pasul 2. Folosind Firebug, inspectați cele trei butoane radio din partea de jos a paginii (clasa economică, clasa Business și butoanele radio clasa I). Observați că toate au același nume, care este „servClass”.
Pasul 3. Să accesăm mai întâi butonul radio „Clasă economică”. Dintre toate aceste trei butoane radio, acest element este primul, deci are un index de 0. În Selenium IDE, tastați "document.getElementsByName (" servClass ") [0]" și faceți clic pe butonul Căutare. Selenium IDE ar trebui să poată identifica corect butonul radio din clasa Economy.
Pasul 4. Schimbați numărul de index la 1, astfel încât ținta dvs. să devină acum document.getElementsByName ("servClass") [1]. Faceți clic pe butonul Găsiți, iar Selenium IDE ar trebui să poată evidenția butonul radio „Business class”, așa cum se arată mai jos.
Localizarea după DOM - dom: nume
După cum sa menționat mai devreme, această metodă se va aplica numai dacă elementul pe care îl accesați este conținut într-un formular numit.
|
Sintaxă |
Descriere |
|---|---|
|
document.forms ["numele formularului"] .elemente ["numele elementului"] |
|
Pasul 1. Navigați la pagina de pornire Mercury Tours (http://demo.guru99.com/test/newtours/) și utilizați Firebug pentru a inspecta caseta de text Nume utilizator. Observați că este cuprins într-un formular numit „acasă”.
Pasul 2. În Selenium IDE, tastați "document.forms [" home "]. Elemente [" userName "]" și faceți clic pe butonul Căutare. Selenium IDE trebuie să poată accesa cu succes elementul.
Localizarea după DOM - dom: index
Această metodă se aplică chiar și atunci când elementul nu se află într-un formular denumit, deoarece folosește indexul formularului și nu numele acestuia.
|
Sintaxă |
Descriere |
|---|---|
|
document.forms [indexul formularului] .elemente [indexul elementului] |
|
Vom accesa caseta de text „Telefon” din pagina de înregistrare Mercury Tours. Formularul din acea pagină nu are nici un nume și nici un atribut ID, deci acest lucru va fi un bun exemplu.
Pasul 1. Navigați la pagina de înregistrare Mercury Tours și inspectați caseta de text Telefon. Observați că formularul care îl conține nu are atribute ID și nume.
Pasul 2. Introduceți „document.forms [0] .elements [3]” în caseta Țintă Selenium IDE și faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată accesa corect caseta de text Telefon.
Pasul 3. Alternativ, puteți utiliza numele elementului în locul indexului său și să obțineți același rezultat. Introduceți „document.forms [0] .elements [„ phone ”]” în caseta Țintă Selenium IDE. Caseta de text Telefon ar trebui să fie în continuare evidențiată.
Localizarea de către XPath
XPath este limbajul utilizat la localizarea nodurilor XML (Extensible Markup Language). Deoarece HTML poate fi considerat ca o implementare a XML, putem folosi și XPath în localizarea elementelor HTML.
Avantaj: poate accesa aproape orice element, chiar și cele fără atribute de clasă, nume sau id.
Dezavantaj: este cea mai complicată metodă de identificare a elementelor din cauza prea multor reguli și considerații diferite.
Din fericire, Firebug poate genera automat localizatori XPath Selenium. În exemplul următor, vom accesa o imagine care nu poate fi accesată prin metodele pe care le-am discutat anterior.
Pasul 1. Navigați la pagina de pornire Mercury Tours și utilizați Firebug pentru a inspecta dreptunghiul portocaliu din dreapta casetei galbene „Link-uri”. Consultați imaginea de mai jos.
Pasul 2 . Faceți clic dreapta pe codul HTML al elementului și apoi selectați opțiunea „Copiați XPath”.
Pasul 3. În Selenium IDE, tastați o bară „/” în caseta țintă, apoi lipiți XPath-ul pe care l-am copiat în pasul anterior. Intrarea din caseta Țintă ar trebui să înceapă acum cu două bare oblice „//”.
Pasul 4 . Faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată evidenția caseta portocalie așa cum se arată mai jos.
rezumat
Sintaxă pentru utilizarea localizatorului|
Metodă |
Sintaxa țintă |
Exemplu |
|---|---|---|
| După ID | id = id_of_elementului | id = e-mail |
| Dupa nume | nume = nume_elementului | nume = numeUtilizator |
| După nume folosind filtre | nume = nume_de_filtrul_element = valoare_de_filtru | nume = valoare TripType = oneway |
| Prin textul linkului | link = link_text | link = ÎNREGISTRARE |
| Etichetă și ID | css = tag # id | css = input # email |
| Etichetă și clasă | css = etichetă. clasă | css = input.inputtext |
| Etichetă și atribut | css = etichetă [atribut = valoare] | css = input [nume = prenume] |
| Etichetă, clasă și atribut | css = etichetă. clasa [atribut = valoare] | css = input.inputtext [tabindex = 1] |