Lokatori u Selenium

Što su lokatori u Selenium?

Lokator je naredba koja usmjerava Selenium IDE ili Selenium WebDriver na ispravan GUI element, kao što je tekstualni okvir, gumb, poveznica ili potvrdni okvir, na kojem se mora izvršiti radnja. Identificiranje ispravnog GUI elementa preduvjet je za izradu bilo kojeg pouzdanog skripta za automatizaciju. Međutim, točna identifikacija je izazovnija nego što zvuči. Ponekad možete završiti u interakciji s pogrešnim elementom ili bez ikakvog elementa. Kako biste to riješili, Selenium nudi niz strategija lokatora koje omogućuju precizno ciljanje elemenata grafičkog korisničkog sučelja.

Dok neke naredbe, poput naredbe "otvori", ne zahtijevaju lokator, većina Selenium Naredbe ovise o lokatorima elemenata. Izbor lokatora uvelike ovisi o vašoj aplikaciji koja se testira (AUT). U ovom tutorijalu ćemo naizmjenično koristiti Facebook i Mercury Demo stranica Tours (newtours.demoaut), na temelju lokatora koje svaka aplikacija podržava. Isto tako, u vašoj vlastitoj testiranje projekt, odabrat ćete lokator elemenata u Selenium WebDriver na temelju strukture vaše aplikacije.

Lociranje po ID-u

Ovo je najčešća metoda lociranja elemenata jer su ID-ovi namijenjeni da budu jedinstveni za svaki element na stranici. Kad god postoji atribut ID-a, trebao bi biti vaš prvi izbor za brze, stabilne i čitljive testne skripte.

Target Format: id=id elementa

Za ovaj primjer koristit ćemo Facebook demo stranicu jer Mercury Tours ne koristi ID atribute za glavna polja obrasca.

Korak 1) Koristite ovu demo stranicu https://demo.guru99.com/test/facebook.html za testiranje. Pregledajte tekstualni okvir "E-pošta ili telefon" pomoću ugrađenih alata za razvojne programere u pregledniku (pritisnite F12 u Chromeu, Edgeu ili Firefox) i zabilježite njegov ID. U ovom slučaju, ID je „e-pošta“.

Korak 2) Lansirati Selenium IDE i unesite "id=email" u Target okvir. Kliknite gumb Pronađi i primijetite da je tekstualni okvir „E-pošta ili telefon“ označen žutom bojom sa zelenim okvirom, što ukazuje na to Selenium IDE je ispravno locirao element.

Lociranje po imenu

Lociranje elemenata po imenu slično je lociranju po ID-u, osim što koristimo “ime=” prefiks umjesto toga. Ovaj pristup je koristan kada elementi nemaju ID, ali imaju definirani atribut imena.

Target Format: ime=ime elementa

Za sljedeću demonstraciju koristit ćemo Mercury Obilasci jer svi značajni elementi obrasca na web-mjestu nose atribut imena.

Korak 1) Dođite na https://demo.guru99.com/test/newtours/ i upotrijebite alate za razvojne programere u pregledniku kako biste pregledali tekstualno polje „Korisničko ime“. Zabilježite njegov atribut name.

Ovdje je naziv elementa „korisničkoIme“.

Korak 2) In Selenium IDE, unesite "name=userName" u Target okvir i kliknite gumb Pronađi. Selenium IDE bi trebao pronaći tekstualni okvir Korisničko ime tako da ga označi.

Kako locirati element prema nazivu pomoću filtara

Filteri su korisni kada nekoliko elemenata dijeli isti atribut imena. Filteri su dodatni atributi koji se koriste za razlikovanje elemenata koji dijele identičan naziv. Bez filtera, Selenium bi se prema zadanim postavkama prikazao samo prvi odgovarajući element.

Target Format: naziv=naziv_elementa filter=vrijednost_filtera

Prođimo kroz primjer.

Korak 1) Prijavite se na Mercury Kule.

Prijavite se Mercury Obilasci koji koriste "tutorial" kao korisničko ime i lozinku. Stranica za pronalaženje letova trebala bi se pojaviti kao što je prikazano dolje.

Korak 2) Koristite alate za razvojne programere za pregled atributa VALUE.

Primijetite da radio gumbi Povratno putovanje i Jednosmjerno putovanje dijele isti naziv "tripType". Međutim, imaju različite atribute VALUE, pa svaku vrijednost možemo koristiti kao filter.

Korak 3) Kliknite na prvi redak u editoru.

• Prvo ćemo pristupiti radio gumbu Jednosmjerni put. Kliknite prvi redak u Selenium IDE uređivač.
• U okvir Naredba unesite naredbu „klikni“.
• u Target U okvir unesite „name=tripType value=oneway“. Dio „value=oneway“ služi kao naš filter.

Korak 4) Pritisnite gumb Pronađi.

Primijeti da Selenium IDE označava radio gumb Jednosmjerno zelenom bojom, potvrđujući da je elementu uspješno pristupljeno putem njegovog atributa VALUE.

Korak 5) Odaberite radio gumb Jednosmjerno.

Pritisnite tipku "X" na tipkovnici za izvršavanje naredbe klika. Sada je odabran radio gumb Jednosmjerno.

Istu radnju možete izvesti na radio gumbu Povratno putovanje, ovaj put koristeći "name=tripType value=povratno putovanje" kao cilj.

Lociranje prema tekstu veze

Ova strategija lokatora primjenjuje se samo na tekstove hiperveza. Vezi pristupamo tako da ispred cilja stavimo prefiks "link=", nakon čega slijedi vidljivi tekst hiperveze. Ova metoda je vrlo čitljiva i dobro funkcionira za testiranje navigacije.

Target Format: link=tekst_linka

U sljedećem primjeru, pristupit ćemo poveznici „REGISTRACIJA“ koja se nalazi na Mercury Početna stranica Tours.

Korak 1)

• Prvo se uvjerite da ste odjavljeni iz Mercury Kule.
• Dođite na Mercury Početna stranica Tours.

Korak 2)

• Pomoću alata za razvojne programere provjerite poveznicu "REGISTRACIJA". Tekst poveznice prikazuje se između početne i završne oznake sidra.
• U ovom slučaju, tekst poveznice je „REGISTRACIJA“. Kopirajte tekst poveznice.

Korak 3) Kopirajte tekst poveznice i zalijepite ga u Selenium IDE Target okvir. Dodajte mu ispred "link=".

Korak 4) Pritisnite gumb Pronađi. Selenium IDE će ispravno istaknuti poveznicu REGISTER.

Korak 5) Za dodatnu provjeru unesite "clickAndWait" u okvir za naredbe i izvršite je. Selenium IDE će uspješno kliknuti na poveznicu REGISTRACIJA i odvesti vas na stranicu za registraciju prikazanu u nastavku.

Lociranje prema DOM-u (Document Object Model)

The Model objekta dokumenta (DOM), jednostavnim riječima, opisuje kako su HTML elementi strukturirani kao stablo čvorova. Selenium IDE može navigirati ovim stablom kako bi pristupio elementima stranice. Prilikom korištenja ove metode, Target Okvir uvijek počinje s „dom=dokument…“. Prefiks „dom=" se obično izostavlja jer Selenium IDE automatski interpretira bilo koju vrijednost koja počinje s "document" kao DOM putanju.

Postoje četiri osnovna načina za lociranje elementa kroz DOM u Selenium:

• getElementById
• getElementsByName
• dom:name (odnosi se samo na elemente unutar imenovanog obrasca)
• dom:indeks

Lociranje prema DOM-u – getElementById

Prvo istražimo metodu getElementById DOM-a u SeleniumOva metoda vraća jedan element usklađivanjem njegovog atributa ID.

Sintaksa

document.getElementById("id of the element")

• id elementa = vrijednost atributa ID elementa kojem se pristupa. Ova vrijednost uvijek mora biti unutar navodnika.

Korak 1) Koristite ovu demo stranicu https://demo.guru99.com/test/facebook.htmlIdite do njega i upotrijebite Alate za razvojne programere kako biste provjerili potvrdni okvir "Ostani prijavljen". Zabilježite njegov ID.

ID koji bismo trebali koristiti je „persist_box“.

Korak 2) Otvoren Selenium IDE i u Target U okvir unesite document.getElementById(“persist_box”), a zatim kliknite Pronađi. Selenium IDE će pronaći potvrdni okvir "Ostani prijavljen/a". Iako ne može istaknuti unutrašnjost potvrdnog okvira, okružuje element jarko zelenim rubom, kao što je prikazano dolje.

Lociranje prema DOM-u – getElementsByName

Metoda getElementById pristupa samo jednom elementu istovremeno, i to elementu s navedenim ID-om. Metoda getElementsByName ponaša se drugačije. Vraća niz elemenata koji dijele navedeni naziv. Pojedinačnim elementima pristupa se pomoću numeričkog indeksa koji počinje od 0.

	getElementById Vraća samo jedan element. Taj element nosi ID naveden unutar zagrada funkcije getElementById().
	getElementsByName Vraća kolekciju elemenata čija su imena identična. Svaki element je indeksiran brojem koji počinje od 0, poput niza. Određeni element odabirete postavljanjem njegovog indeksa unutar uglatih zagrada u sintaksi ispod.

Sintaksa

document.getElementsByName("name")[index]

• name = naziv elementa definiran njegovim atributom 'name'
• indeks = cijeli broj koji označava koji će se element unutar niza getElementsByName koristiti.

Korak 1) Dođite na Mercury Posjetite početnu stranicu Toursa i prijavite se koristeći "tutorial" kao korisničko ime i lozinku. Preglednik će učitati zaslon za pronalaženje letova.

Korak 2) Pomoću alata za razvojne programere provjerite tri radio gumba na dnu stranice (Ekonomska klasa, Poslovna klasa i Prva klasa). Primijetite da svi imaju isti naziv, „servClass“.

Korak 3) Prvo, pristupimo radio gumbu "Ekonomska klasa". Od tri radio gumba, ovaj element se pojavljuje prvi, pa mu je indeks 0. U Selenium IDE, upišite document.getElementsByName(“servClass”)[0] i kliknite gumb Pronađi. Selenium IDE će ispravno prepoznati radio gumb ekonomske klase.

Korak 4) Promijenite indeksni broj na 1, tako da vaš Target postaje document.getElementsByName(“servClass”)[1]. Kliknite gumb Pronađi i Selenium IDE će istaknuti radio gumb "Poslovna klasa" kao što je prikazano dolje.

Lociranje prema DOM – dom:naziv

Kao što je ranije spomenuto, ova metoda se primjenjuje samo ako se element kojem pristupate nalazi unutar imenovanog obrasca. Put lokatora počinje na obrascu, a zatim se po imenu spušta do ciljnog elementa.

Sintaksa

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

• naziv obrasca = vrijednost atributa name oznake obrasca koja sadrži element kojem želite pristupiti
• ime elementa = vrijednost atributa imena elementa kojem želite pristupiti

Korak 1) Dođite na Mercury Početna stranica Tours https://demo.guru99.com/test/newtours/ i upotrijebite Alate za razvojne programere za pregled tekstnog okvira Korisničko ime. Primijetite da se nalazi u obrascu pod nazivom "početna stranica".

Korak 2) In Selenium IDE, upišite document.forms[“home”].elements[“userName”] i kliknite gumb Pronađi. Selenium IDE će uspješno pristupiti elementu.

Lociranje prema DOM – dom:index

Ova metoda se primjenjuje čak i kada element nije unutar imenovanog obrasca jer koristi indeks obrasca umjesto njegovog imena. Ovo je korisno za naslijeđene stranice ili automatski generirane obrasce gdje imenovanje nije dostupno.

Sintaksa

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

• indeks obrasca = indeksni broj (počevši od 0) obrasca u odnosu na cijelu stranicu
• indeks elementa = indeksni broj (počevši od 0) elementa u odnosu na oblik koji ga sadrži

Pristupit ćemo tekstualnom okviru „Telefon“ na Mercury Stranica za registraciju tura. Obrazac na ovoj stranici nema ni atribut imena ni atribut ID-a, pa je dobar primjer.

Korak 1) Dođite na Mercury Posjetite stranicu za registraciju i pregledajte tekstualni okvir Telefon. Primijetite da okolni obrazac nema atribute ni ID ni ime.

Korak 2) Unesite document.forms[0].elements[3] u Selenium IDE Target okvir i kliknite gumb Pronađi. Selenium IDE će ispravno pristupiti tekstualnom okviru Telefon.

Korak 3) Alternativno, možete koristiti naziv elementa umjesto njegovog indeksa za isti rezultat. Unesite document.forms[0].elements[“phone”] u Target okvir. Tekstualni okvir Telefon i dalje će biti označen.

Lociranje pomoću XPath-a

XPath je jezik upita koji se koristi za navigaciju XML (Extensible Markup Language) čvorovima. Budući da se HTML može smatrati implementacijom XML-a, XPath također može locirati HTML elemente. To je jedna od najmoćnijih strategija lokatora u Selenium.

• Prednost: Može pristupiti gotovo svakom elementu, uključujući i one bez atributa klase, imena ili ID-a.
• Hendikep: To je najsloženija strategija lokatora zbog mnogih pravila i sintaktičkih varijacija.

Moderni alati za razvojne programere preglednika mogu automatski generirati XPath izraze. U Chromeu, Edgeu ili Firefox, desnom tipkom miša kliknite element u ploči Elementi i odaberite Kopiraj > Kopiraj XPath. U sljedećem primjeru pristupit ćemo slici koja se ne može locirati pomoću metoda koje smo ranije opisali.

Korak 1) Dođite na Mercury Otvorite početnu stranicu Toursa i upotrijebite Alate za razvojne programere kako biste pregledali narančasti pravokutnik desno od žutog okvira "Linkovi", kao što je prikazano dolje.

Korak 2) Desnom tipkom miša kliknite HTML kod elementa, a zatim odaberite opciju "Kopiraj XPath".

Korak 3) In Selenium IDE, upišite jednu kosu crtu naprijed "/" u Target okvir, a zatim zalijepite XPath kopiran u prethodnom koraku. Ulaz u Target okvir sada treba započeti s dvije kose crte naprijed “//”.

Korak 4) Pritisnite gumb Pronađi. Selenium IDE će istaknuti narančasti okvir, kao što je prikazano dolje.

Zašto je važan odabir pravog lokatora

Odabir ispravne strategije lokatora jedna je od najutjecajnijih odluka u Selenium automatizacija jer izravno utječe na stabilnost skripte, brzinu izvršavanja i dugoročne troškove održavanja. Loše odabran lokator može uzrokovati nestabilne testove, lažne kvarove i česte preinake kad god se promijeni korisničko sučelje aplikacije. Redoslijed preferencija koji preporučuju iskusni inženjeri automatizacije je prvo ID, zatim Naziv, nakon čega slijedi CSS selektor, Tekst poveznice i na kraju XPath.

Lokatori temeljeni na ID-u su najbrži jer je pretraživanje preglednika optimizirano za jedinstvene identifikatore. Lokatori temeljeni na imenu gotovo su jednako učinkoviti kada su imena jedinstvena. CSS selektori i XPath pružaju fleksibilnost, ali su obično sporiji i krhkiji kada programeri refaktoriraju DOM. Tekst poveznice izvrstan je za navigacijske poveznice, ali nudi ograničenu ponovnu upotrebu.

Stabilna automatizacija također ovisi o suradnji s programerima. Kada testeri zatraže dosljedne i smislene ID ili data-* atribute tijekom pregleda koda, trajnost lokatora značajno se poboljšava. Izbjegavajte oslanjanje na automatski generirane ID-ove (poput onih koje proizvode okviri) jer se oni mogu mijenjati između verzija. Davanjem prioriteta čitljivim, namjerno vođenim lokatorima, timovi mogu održati testne pakete održivima i smanjiti tehnički dug kako se aplikacija razvija.

Najbolje prakse za pisanje pouzdanih lokatora

Pouzdani lokatori su temelj održivog Selenium paket testova. Sljedeće prakse pomažu u smanjenju kvarova skripti, poboljšanju čitljivosti i otpornosti testova na promjene korisničkog sučelja.

1. Preferirajte jedinstvene ID-ove: Uvijek prvo provjerite atribut ID-a. ID-ovi bi trebali biti jedinstveni unutar stranice i najučinkovitiji su izbor.
2. Koristite semantičko ime i atribute data-*: Potaknite programere da dodaju stabilne atribute testiranja kao što su data-testid ili data-qa. Oni ostaju dosljedni čak i kada se promijene CSS klase.
3. Izbjegavajte apsolutni XPath: Apsolutne putanje poput /html/body/div[2]/div[3]/span lako se prekidaju. Koristite relativne XPath izraze s atributima kao što je //input[@name='userName'].
4. Kombinirajte atribute za preciznost: Kada jedan atribut nije jedinstven, kombinirajte više atributa (na primjer, //button[@type='submit' i @name='login']) kako biste ciljali ispravan element.
5. Mudro koristite tekst: Lokatori koji ovise o vidljivom tekstu mogu se prelomiti u različitim jezičnim lokalizacijama. Koristite lokatore temeljene na tekstu samo kada je sadržaj stabilan i jednojezičan.
6. Centralizirajte lokatore: Pohranite lokatore u klasu Page Object Model (POM) kako bi se ažuriranja mogla vršiti na jednom mjestu, a ne u mnogim testnim skriptama.
7. Validiraj u Alatima za razvojne programere: Prije dodavanja lokatora skripti, testirajte ga u konzoli preglednika koristeći $x(“//xpath”) za XPath ili document.querySelector za CSS kako biste potvrdili da vraća točno jedan element.
8. Izbjegavajte lokatore temeljene na indeksu kad god je to moguće: Pozicije indeksa poput [3] ovise o redoslijedu elemenata. Čak i manje promjene rasporeda mogu pomaknuti indeks i prekinuti skriptu.

Dosljednom primjenom ovih praksi, inženjeri automatizacije stvaraju testne pakete koji se mogu skalirati među timovima i podnose česta ažuriranja korisničkog sučelja uz minimalno održavanje.

Pitanja i odgovori