CSS birač u Selenium

Što je CSS selektor?

CSS selektori u Selenium su uzorci nizova koji se koriste za identifikaciju elementa na temelju kombinacije HTML oznake, id-a, klase i atributa. Lociranje pomoću CSS selektora u Selenium je kompliciranija od prethodnih metoda, ali je najčešća napredna strategija lociranja Selenium korisnicima jer može pristupiti čak i onim elementima koji nemaju ID ili ime.

CSS selektori u Selenium imaju mnogo formata, ali ćemo se usredotočiti samo na one najčešće. Različite vrste CSS lokatora u Selenium IDE

• Oznaka i ID
• Oznaka i klasa
• Oznaka i atribut
• Oznaka, klasa i atribut
• Unutarnji tekst

Kada koristimo ovu strategiju, uvijek stavljamo prefiks na Target okvir s “css=” kao što će biti prikazano u sljedećim primjerima.

oznaka i id – CSS Selector

Opet ćemo u ovom primjeru koristiti tekstualni okvir Facebooka za e-poštu. Kao što se sjećate, ima ID "e-pošta" i već smo mu pristupili u odjeljku "Lociranje po ID-u". Ovaj put ćemo koristiti a Selenium CSS birač s ID-om u pristupu tom istom elementu.

Sintaksa

css=tag#id

• oznaka = HTML oznaka elementa kojem se pristupa
• # = znak hash. Ovo bi uvijek trebalo biti prisutno kada koristite a Selenium CSS birač s ID-om
• id = ID elementa kojem se pristupa

Imajte na umu da ID-u uvijek prethodi znak hash (#).

Korak 1) Dođite na www.facebook.com. Koristeći Firebug, pregledajte tekstualni okvir "E-pošta ili telefon".

U ovom trenutku imajte na umu da je HTML oznaka "ulaz", a njen ID "e-pošta". Dakle, naša sintaksa će biti "css=input#email".

Korak 2) Unesite "css=input#email" u Target kutija od Selenium IDE i kliknite gumb Pronađi. Selenium IDE bi trebao moći istaknuti taj element.

oznaka i klasa – CSS Selector

CSS birač u Selenium korištenje HTML oznake i naziva klase slično je korištenju oznake i ID-a, ali u ovom slučaju se umjesto znaka hash koristi točka (.).

Sintaksa

css=tag.class

• oznaka = HTML oznaka elementa kojem se pristupa
• . = znak točke. Ovo bi uvijek trebalo biti prisutno kada koristite CSS selektor s klasom
• klasa = klasa elementa kojem se pristupa

Korak 1) Idite na demo stranicu https://demo.guru99.com/test/facebook.html i upotrijebite Firebug da provjerite tekstni okvir "E-pošta ili telefon". Primijetite da je njegova HTML oznaka "input", a klasa "inputtext".

Korak 2) In Selenium IDE, unesite "css=input.inputtext" u Target okvir i kliknite Pronađi. Selenium IDE bi trebao moći prepoznati tekstni okvir Email ili Phone.

Imajte na umu da kada više elemenata ima istu HTML oznaku i naziv, prepoznat će se samo prvi element u izvornom kodu. Koristeći Firebug, pregledajte tekstni okvir Password na Facebooku i primijetite da ima isti naziv kao tekstualni okvir Email ili Phone.

Razlog zašto je na prethodnoj ilustraciji istaknut samo tekstni okvir E-mail ili Telefon je taj što se on nalazi na prvom mjestu u izvoru Facebook stranice.

oznaka i atribut – CSS Selector

Ova strategija koristi HTML oznaku i određeni atribut elementa kojem se pristupa.

Sintaksa

css=tag[attribute=value]

• oznaka = HTML oznaka elementa kojem se pristupa
• [ i ] = uglate zagrade unutar kojih će se staviti određeni atribut i njegova odgovarajuća vrijednost
• atribut = atribut koji će se koristiti. Preporučljivo je koristiti atribut koji je jedinstven za element kao što je naziv ili ID.
• vrijednost = odgovarajuća vrijednost odabranog atributa.

Korak 1) Dođite na Mercury Stranica za registraciju izleta https://demo.guru99.com/test/newtours/register.php i pregledajte tekstni okvir "Prezime". Obratite pažnju na njegovu HTML oznaku ("ulaz" u ovom slučaju) i naziv ("prezime").

Korak 2) In Selenium IDE, unesite "css=input[ime=prezime]" u Target okvir i kliknite Pronađi. Selenium IDE bi trebao moći uspješno pristupiti polju Prezime.

Kada više elemenata ima istu HTML oznaku i atribut, prepoznat će se samo prvi. Ovo ponašanje je slično lociranju elemenata pomoću CSS selektora s istom oznakom i klasom.

oznaka, klasa i atribut – CSS selektor

Sintaksa

css=tag.class[attribute=value]

• oznaka = HTML oznaka elementa kojem se pristupa
• . = znak točke. Ovo bi uvijek trebalo biti prisutno kada koristite CSS selektor s klasom
• klasa = klasa elementa kojem se pristupa
• [ i ] = uglate zagrade unutar kojih će se staviti određeni atribut i njegova odgovarajuća vrijednost
• atribut = atribut koji će se koristiti. Preporučljivo je koristiti atribut koji je jedinstven za element kao što je naziv ili ID.
• vrijednost = odgovarajuća vrijednost odabranog atributa.

Korak 1) Idite na demo stranicu https://demo.guru99.com/test/facebook.html i upotrijebite Firebug za pregled okvira za unos "E-pošta ili telefon" i "Zaporka". Obratite pažnju na njihovu HTML oznaku, klasu i atribute. Za ovaj primjer odabrat ćemo njihove atribute 'tabindex'.

Korak 2) Prvo ćemo pristupiti tekstualnom okviru 'E-pošta ili telefon'. Stoga ćemo koristiti tabindex vrijednost 1. Unesite "css=input.inputtext[tabindex=1]" u Selenium Ide Target okvir i kliknite Pronađi. Okvir za unos "E-mail ili telefon" trebao bi biti označen.

Korak 3) Za pristup polju za unos lozinke jednostavno zamijenite vrijednost atributa tabindex. Unesite "css=input.inputtext[tabindex=2]" u Target okvir i kliknite na gumb Pronađi. Selenium IDE mora moći uspješno identificirati tekstualni okvir Password.

unutarnji tekst – CSS Selector

Kao što ste možda primijetili, HTML oznake rijetko dobivaju atribute ID-a, imena ili klase. Dakle, kako im pristupiti? Odgovor je korištenjem njihovih unutarnjih tekstova. Unutarnji tekstovi su stvarni obrasci nizova koje HTML oznaka prikazuje na stranici.

Sintaksa

css=tag:contains("inner text")

• oznaka = HTML oznaka elementa kojem se pristupa
• unutarnji tekst = unutarnji tekst elementa

Korak 1) Dođite na Mercury Početna stranica Tours https://demo.guru99.com/test/newtours/ i koristite Firebug da istražite oznaku "Password". Obratite pažnju na njegovu HTML oznaku (koja je u ovom slučaju "font") i primijetite da nema atribute klase, ID-a ili naziva.

Korak 2) Tip css=font:contains(“Lozinka:”) u Selenium Ide Target okvir i kliknite Pronađi. Selenium IDE bi trebao moći pristupiti oznaci Password kao što je prikazano na slici ispod.

Korak 3) Ovaj put zamijenite unutarnji tekst s "Boston" tako da vaš Target sada će postati “css=font:contains(“Boston”)”. Pritisnite Pronađi. Trebali biste primijetiti da oznaka "Boston do San Francisco" postaje istaknuta. Ovo vam to pokazuje Selenium IDE može pristupiti dugačkoj oznaci čak i ako ste samo naznačili prvu riječ njenog unutarnjeg teksta.

Rezime

Sintaksa za lociranje korištenjem CSS birača

način	Target Sintaksa	Primjer
Oznaka i ID	css=oznaka#id	css=unos#e-pošta
Oznaka i klasa	css=oznaka.klasa	css=input.inputtext
Oznaka i atribut	css=oznaka[atribut=vrijednost]	css=unos[ime=prezime]
Oznaka, klasa i atribut	css=tag.class[atribut=vrijednost]	css=input.inputtext[tabindex=1]