Localizatori în Selenium

Ce sunt localizatorii?

Locatorul este o comandă care spune Selenium IDE care elemente GUI (să ​​spunem Text Box, Butoane, Verificare Boxes etc) nevoile sale de a opera. Identificarea elementelor GUI corecte este o condiție prealabilă pentru crearea unui script de automatizare. Dar identificarea precisă a elementelor GUI este mai dificilă decât pare. Uneori, ajungi să lucrezi cu elemente GUI incorecte sau cu niciun element! Prin urmare, Selenium oferă un număr de localizatori pentru a localiza cu precizie un element GUI

Există comenzi care nu au nevoie de un localizator (cum ar fi comanda „deschidere”). Cu toate acestea, majoritatea au nevoie de localizatori de elemente Selenium webdriver.

Alegerea locatorului depinde în mare măsură de aplicația în curs de testare. În acest tutorial, vom comuta între Facebook, noul tours.demoaut pe baza locatoarelor pe care le suportă aceste aplicații. La fel și în tine Testarea proiect, veți selecta oricare dintre localizatorii de elemente enumerați mai sus în Selenium webdriver, pe baza suportului aplicației dvs.

Localizare prin ID

Acesta este cel mai comun mod de a localiza elemente, deoarece ID-urile ar trebui să fie unice pentru fiecare element.

Target Format: id=id-ul elementului

Pentru acest exemplu, vom folosi Facebook ca aplicație de testare deoarece Mercury Tururile nu folosesc atribute ID.

Pas 1) De când a fost creat acest tutorial, Facebook și-a schimbat designul paginii de conectare. Utilizați această pagină demonstrativă https://demo.guru99.com/test/facebook.html pentru testare. Inspectați caseta de text „E-mail sau telefon” folosind Firebug și luați notă de ID-ul acestuia. În acest caz, ID-ul este „e-mail”.

Pas 2) Lansa Selenium IDE și introduceți „id=email” în fișierul Target cutie. 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, adică Selenium IDE a reușit să localizeze corect acel element.

Localizare după nume

Localizarea elementelor după nume este foarte asemănătoare cu localizarea după ID, cu excepția faptului că folosim „nume=” prefix în schimb.

Target Format: nume=numele elementului

În următoarea demonstrație, vom folosi acum Mercury Tururi pentru că toate elementele semnificative au nume.

Pas 1) Navigheaza catre https://demo.guru99.com/test/newtours/ și utilizați Firebug pentru a inspecta caseta de text „Nume utilizator”. Luați notă de atributul numelui său.

Aici, vedem că numele elementului este „userName”.

Pas 2) In Selenium IDE, introduceți „name=userName” în fișierul Target casetă și faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată localiza caseta de text Nume utilizator evidențiind-o.

Cum să găsiți elementul după nume folosind filtre

Filtrele pot fi folosite atunci când mai multe elemente au același nume. Filtrele sunt atribute suplimentare folosite pentru a distinge elementele cu același nume.

Target Format: nume=numele_elementului_filtrului=valoarea_filtrului

Să vedem un exemplu -

Pas 1) Conectați-vă la Mercury Tururi.

Conectați-vă la Mercury Tururi folosind „tutorial” ca nume de utilizator și parolă. Ar trebui să vă ducă la pagina Căutare zboruri prezentată mai jos.

Pas 2) Folosind firebug, utilizați VALUE atribute.

Folosind Firebug, observați că butoanele radio Dus-întors și One Way au același nume „tripType”. Cu toate acestea, au atribute VALUE diferite, astfel încât să le putem folosi pe fiecare ca filtru.

Pas 3) Faceți clic pe prima linie.

• Vom accesa mai întâi butonul radio One Way. Faceți clic pe prima linie din Editor.
• În caseta de comandă a Selenium IDE, introduceți comanda „click”.
• În Target caseta, introduceți „name=tripType value=oneway”. Porțiunea „valoare=oneway” este filtrul nostru.

Pas 4) Faceți clic pe butonul Găsiți.

Observa asta Selenium IDE este capabil să evidențieze butonul radio One Way cu verde - ceea ce înseamnă că putem accesa elementul cu succes folosind atributul VALUE.

Pas 5) Selectați butonul radio One Way.

Apăsați tasta „X” de pe 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 „name=tripType value=roundtrip” ca țintă.

Localizare prin Link Text

Acest tip de localizator CSS în Selenium se aplică numai textelor hyperlink. Accesăm linkul prefixând ținta noastră cu „link=" și apoi urmată de textul hyperlinkului.

Target Format: link=link_text

În acest exemplu, vom accesa linkul „ÎNREGISTRARE” găsit pe Mercury Pagina principală a excursiilor.

Pas 1)

• În primul rând, asigurați-vă că sunteți deconectat de la Mercury Tururi.
• Accesează Mercury Pagina principală a excursiilor.

Pas 2)

• Folosind Firebug, inspectați linkul „ÎNREGISTRARE”. Textul linkului se găsește între etichete și.
• În acest caz, textul link-ului nostru este „ÎNREGISTRARE”. Copiați textul linkului.

Pas 3) Copiați textul linkului în Firebug și inserați-l pe acesta Selenium IDE-urile Target cutie. Prefixați-l cu „link=”.

Pas 4) Faceți clic pe butonul Găsiți și observați asta Selenium IDE a putut evidenția corect legătura ÎNREGISTRARE.

Pas 5) Pentru a verifica în continuare, introduceți „clickAndWait” în caseta de comandă și executați-l. Selenium IDE ar trebui să poată face clic pe acel link ÎNREGISTRARE cu succes și să vă conducă la pagina de înregistrare afișată mai jos.

Localizare după DOM (Document Object Model)

Model de obiect de document (DOM), în termeni simpli, este modul în care sunt structurate elementele HTML. Selenium IDE este capabil să utilizeze DOM pentru a accesa elementele paginii. Dacă folosim această metodă, a noastră Target caseta 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 fiind o cale în DOM în Selenium oricum.

Există patru moduri de bază de a localiza un element prin DOM în Selenium:

• getElementById
• getElementsByName
• dom:name (se aplică numai elementelor dintr-o formă numită)
• dom:index

Localizare prin DOM – getElementById

Să ne concentrăm pe prima metodă – folosind metoda getElementById a DOM în Selenium. Sintaxa ar fi:

Sintaxă

document.getElementById("id of the element")

• id-ul elementului = aceasta este valoarea atributului ID al elementului de accesat. Această valoare ar trebui să fie întotdeauna cuprinsă între o pereche de paranteze (“”).

Pas 1) Utilizați această pagină demonstrativă https://demo.guru99.com/test/facebook.html Navigați la el și utilizați Firebug pentru a verifica caseta de validare „Păstrați-mă conectat”. Luați notă de identitatea sa.

Putem vedea că ID-ul pe care ar trebui să-l folosim este „persist_box”.

Pas 2) Operatii Deschise Selenium IDE și în Target caseta, introduceți „document.getElementById(“persist_box”)” și faceți clic pe Găsiți. Selenium IDE ar trebui să poată găsi caseta de validare „Păstrați-mă conectat”. Deși nu poate evidenția interiorul casetei de validare, Selenium IDE poate încă înconjura elementul cu un chenar verde strălucitor, așa cum se arată mai jos.

Localizare prin DOM – getElementsByName

Metoda getElementById poate accesa doar un element la un moment dat, și acesta este elementul cu ID-ul pe care l-ați specificat. Metoda getElementsByName este diferită. Acesta colectează o serie de elemente care au numele pe care l-ați specificat. Accesați elementele individuale folosind un index care începe la 0.

	getElementById Va primi un singur element pentru tine. Acest element poartă ID-ul pe care l-ați specificat în parantezele lui getElementById().
	getElementsByName Va obține o colecție de elemente ale căror nume sunt toate aceleași. Fiecare element este indexat cu un număr care începe de la 0 la fel ca un tablou Specificați ce element doriți să accesați punând numărul său de index între paranteze drepte în sintaxa getElementsByName de mai jos.

Sintaxă

document.getElementsByName(“name“)[index]

• nume = numele elementului așa cum este definit de atributul său „nume”.
• index = un număr întreg care indică ce element din matricea lui getElementsByName va fi utilizat.

Pas 1) Navigheaza catre Mercury Pagina de pornire a Tours și autentificare folosind „tutorial” ca nume de utilizator și parolă. Firefox ar trebui să vă conducă la ecranul Căutare zbor.

Pas 2) Folosind Firebug, inspectați cele trei butoane radio din partea de jos a paginii (butoanele radio pentru clasa economică, clasa Business și clasa întâi). Observați că toate au același nume, care este „servClass”.

Pas 3) Să accesăm mai întâi butonul radio „Clasa economică”. Dintre toate aceste trei butoane radio, acest element este primul, deci are un indice de 0. In Selenium IDE, tastați „document.getElementsByName(“servClass”)[0]” și faceți clic pe butonul Căutare. Selenium IDE ar trebui să fie capabil să identifice corect butonul radio din clasa Economy.

Pas 4) Schimbați numărul de index la 1, astfel încât dvs Target va deveni acum document.getElementsByName(„servClass”)[1]. Faceți clic pe butonul Găsiți și Selenium IDE ar trebui să poată evidenția butonul radio „Business class”, așa cum se arată mai jos.

Localizare prin DOM – dom:name

După cum am 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ă

document.forms[“name of the form“].elements[“name of the element“]

• numele formularului = valoarea atributului nume al etichetei formular care conține elementul pe care doriți să îl accesați
• numele elementului = valoarea atributului nume al elementului pe care doriți să-l accesați

Pas 1) Navigheaza catre Mercury Pagina principală a excursiilor https://demo.guru99.com/test/newtours/ și utilizați Firebug pentru a inspecta caseta de text Nume utilizator. Observați că este conținut într-un formular numit „acasă”.

Pas 2) In Selenium IDE, tastați „document.forms[“home”].elements[“userName”]” și faceți clic pe butonul Find. Selenium IDE trebuie să poată accesa elementul cu succes.

Localizare prin DOM – dom:index

Această metodă se aplică chiar și atunci când elementul nu se află într-un formular numit, deoarece folosește indexul formularului și nu numele acestuia.

Sintaxă

document.forms[index of the form].elements[index of the element]

• indexul formularului = numărul de index (începând cu 0) al formularului față de întreaga pagină
• indexul elementului = numărul de index (începând cu 0) al elementului față de întreaga formă care îl conține

Vom accesa caseta de text „Telefon” din interior Mercury Pagina de înregistrare a tururilor. Formularul din pagina respectivă nu are atribut nume și ID, așa că acesta va fi un exemplu bun.

Pas 1) Navigheaza catre Mercury Pagina de înregistrare a tururilor și inspectați caseta de text Telefon. Observați că formularul care îl conține nu are atribute ID și nume.

Pas 2) Introduceți „document.forms[0].elements[3]” în Selenium IDE-urile Target casetă și faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată accesa corect caseta de text Telefon.

Pas 3) Alternativ, puteți folosi numele elementului în loc de indexul său și puteți obține același rezultat. Introduceți „document.forms[0].elements[“phone”]” în Selenium IDE-urile Target cutie. Caseta de text Telefon ar trebui să fie în continuare evidențiată.

Localizare prin XPath

XPath este limbajul folosit la localizarea nodurilor XML (Extensible Markup Language). Deoarece HTML poate fi gândit ca o implementare a XML, putem folosi și XPath în localizarea elementelor HTML.

• Avantaj: Poate accesa aproape orice element, chiar și pe cei 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 XPath Selenium localizatori. În exemplul următor, vom accesa o imagine care nu poate fi accesată prin metodele pe care le-am discutat mai devreme.

Pas 1) Navigheaza catre Mercury Vizitați pagina de pornire și utilizați Firebug pentru a inspecta dreptunghiul portocaliu din dreapta casetei galbene „Linkuri”. Consultați imaginea de mai jos.

Pas 2) Faceți clic dreapta pe codul HTML al elementului și apoi selectați opțiunea „Copiare XPath”.

Pas 3) In Selenium IDE, tastați o bară oblică „/” în Target caseta, apoi lipiți XPath-ul pe care l-am copiat în pasul anterior. Intrarea în dvs Target caseta ar trebui să înceapă acum cu două bare oblice „//”.

Pas 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.