Lokatori u selenium IDE: CSS Selector - DOM - XPath - iskaznica

Sadržaj:

Anonim

Što su lokatori?

Locator je naredba koja govori Selenium IDE-u koji elementi GUI-ja (recimo tekstualni okvir, gumbi, potvrdni okviri itd.) Trebaju raditi. Identifikacija ispravnih GUI elemenata preduvjet je za stvaranje skripte za automatizaciju. No, točna identifikacija GUI elemenata je teža nego što zvuči. Ponekad na kraju radite s netočnim GUI elementima ili ih uopće nema! Dakle, Selenium nudi brojne lokatore za precizno lociranje GUI elementa

Različite vrste CSS lokatora u IDE-u Selenium

Postoje naredbe kojima nije potreban lokator (poput naredbe "otvori"). Međutim, većini njih trebaju lokacijski elementi u selenium webdriveru.

Izbor lokatora uvelike ovisi o vašoj prijavi koja se testira . U ovom uputstvu prebacivat ćemo se između Facebooka i novih tours.demoaut na temelju lokatora koje ove aplikacije podržavaju. Isto tako u vašem projektu testiranja, na temelju podrške za vašu aplikaciju, odabrat ćete bilo koji od gore navedenih lokatora elemenata u web-pogonu Selenium.

Lociranje prema osobnom dokumentu

Ovo je najčešći način lociranja elemenata jer bi ID-ovi trebali biti jedinstveni za svaki element.

Ciljni format: id = id elementa

U ovom ćemo primjeru koristiti Facebook kao testnu aplikaciju jer Mercury Tours ne koristi ID atribute.

Korak 1. Otkako je stvoren ovaj vodič, Facebook je promijenio dizajn stranice za prijavu. Upotrijebite ovu demo stranicu http://demo.guru99.com/test/facebook.html za testiranje. Pregledajte tekstni okvir "E-pošta ili telefon" pomoću Firebuga i zabilježite njegov ID. U ovom je slučaju ID "e-pošta".

Korak 2. Pokrenite Selenium IDE i u okvir "Target" unesite "id = email". Kliknite gumb Pronađi i primijetite da se tekstni okvir "E-pošta ili telefon" označava žutom bojom i obrubljuje zelenom bojom, što znači da je Selenium IDE mogao ispravno locirati taj element.

Lociranje po imenu

Lociranje elemenata po imenu vrlo je slično lociranju prema ID-u, osim što umjesto toga koristimo prefiks "name =" .

Ciljni format: ime = naziv elementa

U sljedećoj demonstraciji sada ćemo koristiti Mercury Tours jer svi značajni elementi imaju imena.

Korak 1. Idite na http://demo.guru99.com/test/newtours/ i pomoću Firebuga pregledajte tekstni okvir "Korisničko ime". Zabilježite njegov atribut imena.

Ovdje vidimo da je ime elementa "userName".

Korak 2. U Selenium IDE unesite "name = userName" u okvir Target i kliknite gumb Find. Selenium IDE trebao bi biti u mogućnosti pronaći tekstualni okvir User Name tako da ga označi.

Pronalaženje po imenu pomoću filtara

Filteri se mogu koristiti kada više elemenata ima isto ime. Filteri su dodatni atributi koji se koriste za razlikovanje istoimenih elemenata.

Ciljni format : name = name_of_the_element filter = value_of_filter

Pogledajmo primjer -

Korak 1 . Prijavite se na Mercury Tours koristeći "tutorial" kao korisničko ime i lozinku. Trebao bi vas odvesti do stranice Flight Finder prikazane u nastavku.

Korak 2. Koristeći Firebug, primijetite da radio gumbi za povratno putovanje i jednosmjernu vožnju imaju isti naziv "tip putovanja". Međutim, oni imaju različite VALUE atribute pa svaki od njih možemo koristiti kao svoj filtar.

3. korak

  • Prvo ćemo pristupiti radio gumbu One Way. Kliknite prvi redak na uređivaču.
  • U naredbeni okvir Selenium IDE unesite naredbu "klik".
  • U okvir Cilj upišite "name = tripType value = oneway". Dio "value = oneway" naš je filtar.

4. korak . Pritisnite gumb Pronađi i primijetite da je Selenium IDE u mogućnosti zeleni gumb označiti jednosmjerni gumb - što znači da možemo uspješno pristupiti elementu koristeći njegov atribut VALUE.

Korak 5. Pritisnite tipku "X" na tipkovnici da biste izvršili ovu naredbu klika. Primijetite da je odabran radio gumb One Way.

Potpuno istu stvar možete učiniti s radio gumbom za povratno putovanje, ovaj put koristeći za cilj cilj "name = tripType value = roundtrip".

Lociranje prema tekstu veze

Ova vrsta CSS lokatora u Seleniju odnosi se samo na tekstove hiperveza. Linku pristupamo dodavanjem prefiksa našem cilju s "link =", a zatim slijedi tekst hiperveze.

Ciljni format : link = link_text

U ovom ćemo primjeru pristupiti poveznici "REGISTRACIJA" koja se nalazi na početnoj stranici Mercury Toursa.

Korak 1.

  • Prvo budite sigurni da ste odjavljeni s Mercury Toursa.
  • Idite na početnu stranicu Mercury Tours.

Korak 2 .

  • Pomoću Firebuga pregledajte vezu "REGISTRUJ SE". Tekst veze nalazi se između i oznaka.
  • U ovom je slučaju tekst naše veze "REGISTRIRATI". Kopirajte tekst veze.

3. korak . Kopirajte tekst veze u Firebug i zalijepite ga u okvir za ciljanje Selenium IDE. Prefiksirajte ga s "link =".

Korak 4. Kliknite gumb Pronađi i primijetite da je Selenium IDE uspio ispravno istaknuti vezu REGISTRACIJA.

Korak 5. Za daljnju provjeru unesite "clickAndWait" u naredbeni okvir i izvršite ga. Selenium IDE trebao bi uspješno kliknuti tu vezu REGISTRACIJA i odvesti vas na stranicu za registraciju prikazanu u nastavku.

Lociranje pomoću CSS Selektora

CSS selektori u seleniju su uzorci niza koji se koriste za identificiranje elementa na temelju kombinacije HTML oznake, id-a, klase i atributa. Lociranje pomoću CSS selektora u Seleniju složenije je od prethodnih metoda, ali to je najčešća strategija lociranja naprednih korisnika Selenium jer može pristupiti i onim elementima koji nemaju ID ili ime.

CSS Selectors u Seleniju imaju mnogo formata, ali mi ćemo se usredotočiti samo na one najčešće.

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

Kada koristimo ovu strategiju, uvijek ciljamo okvir Target sa "css =", kao što će biti prikazano u sljedećim primjerima.

Lociranje pomoću CSS Selektora - Oznaka i ID

Ponovno ćemo u ovom primjeru koristiti Facebook tekstni okvir za e-poštu. Kao što se sjećate, ima ID "e-pošte", a već smo mu pristupili u odjeljku "Lociranje prema ID-u". Ovoga puta koristit ćemo Selenium CSS Selector s ID-om za pristup tom istom elementu.

Sintaksa

Opis

css = oznaka # id
  • tag = HTML oznaka elementa kojem se pristupa
  • # = znak raspršivanja. To bi uvijek trebalo biti prisutno kada se koristi Selenium CSS Selector s ID-om
  • id = ID elementa kojem se pristupa

Imajte na umu da ID-u uvijek prethodi znak za raspršivanje (#).

Korak 1. Idite na www.facebook.com. Pomoću Firebuga pregledajte tekstni okvir "E-pošta ili telefon".

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

Korak 2. Unesite "css = input # email" u okvir Target Selenium IDE i kliknite gumb Pronađi. Selenium IDE trebao bi biti u stanju istaknuti taj element.

Lociranje pomoću CSS Selektora - Oznaka i klasa

Lociranje pomoću CSS Selector-a u Seleniju pomoću HTML oznake i naziva klase slično je korištenju oznake i ID-a, ali u ovom se slučaju umjesto znaka raspršivanja koristi točka (.).

Sintaksa

Opis

css = oznaka. razred
  • tag = HTML oznaka elementa kojem se pristupa
  • . = točka znak. To bi uvijek trebalo biti prisutno kada se s klasom koristi CSS Selector
  • class = klasa elementa kojem se pristupa

Korak 1. Idite na demo stranicu http://demo.guru99.com/test/facebook.html i pomoću Firebuga pregledajte tekstni okvir "E-pošta ili telefon". Primijetite da je njegova HTML oznaka "input", a klasa "inputtext".

Korak 2. U selenium IDE unesite "css = input.inputtext" u okvir Target i kliknite Find. Selenium IDE trebao bi biti u stanju prepoznati okvir za tekst E-pošta ili Telefon.

Imajte na umu da će više elemenata imati istu HTML oznaku i ime, prepoznat će se samo prvi element u izvornom kodu . Pomoću Firebuga pregledajte tekstni okvir Lozinka na Facebooku i primijetite da ima isto ime kao tekstni okvir E-pošta ili Telefon.

Razlog zašto je na prethodnoj ilustraciji istaknut samo okvir za tekst E-pošta ili Telefon jest taj što je na prvom mjestu u izvoru Facebook stranice.

Lociranje pomoću CSS selektora - oznaka i atribut

Ova strategija koristi HTML oznaku i određeni atribut elementa kojem treba pristupiti.

Sintaksa

Opis

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

Korak 1. Idite na stranicu za registraciju Mercury Toursa (http://demo.guru99.com/test/newtours/register.php) i pregledajte tekstni okvir "Prezime". Zabilježite njegovu HTML oznaku (u ovom slučaju "input") i njezino ime ("lastName").

Korak 2. U Selenium IDE unesite "css = input [name = lastName]" u okvir Target i kliknite Find. Selenium IDE trebao bi moći uspješno pristupiti okviru Prezime.

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

Lociranje pomoću CSS Selektora - oznaka, klasa i atribut

Sintaksa Opis
css = tag.class [atribut = vrijednost]
  • tag = HTML oznaka elementa kojem se pristupa
  • . = točka znak. To bi uvijek trebalo biti prisutno kada se s klasom koristi CSS Selector
  • class = klasa elementa kojem se pristupa
  • [i] = uglate zagrade unutar kojih će se postaviti određeni atribut i njegova odgovarajuća vrijednost
  • atribut = atribut koji se koristi. Preporučljivo je koristiti atribut koji je jedinstven za element kao što je ime ili ID.
  • vrijednost = odgovarajuća vrijednost odabranog atributa.

Korak 1. Idite na demo stranicu http://demo.guru99.com/test/facebook.html i pomoću Firebuga pregledajte polja za unos "E-pošta ili telefon" i "Lozinka". Zabilježite njihovu HTML oznaku, klasu i atribute. U ovom ćemo primjeru odabrati njihove atribute 'tabindex'.

Korak 2. Prvo ćemo pristupiti tekstnom okviru "E-pošta ili telefon". Stoga ćemo upotrijebiti tabindex vrijednost 1. Unesite "css = input.inputtext [tabindex = 1]" u okvir Target Selenium IDE i kliknite Pronađi. Treba biti označen okvir za unos "E-pošta ili telefon".

Korak 3. Da biste pristupili okviru za unos lozinke, jednostavno zamijenite vrijednost atributa tabindex. U okvir "Cilj" unesite "css = input.inputtext [tabindex = 2]" i kliknite gumb Pronađi. Selenium IDE mora biti u stanju uspješno prepoznati tekstni okvir Lozinka.

Lociranje pomoću CSS Selektora - unutarnji tekst

Kao što ste možda primijetili, HTML oznakama se rijetko daju atributi id, ime ili klasa. Pa, kako im pristupiti? Odgovor je kroz upotrebu njihovih unutarnjih tekstova. Unutarnji tekstovi stvarni su uzorci nizova koje HTML oznaka prikazuje na stranici.

Sintaksa

Opis

css = tag: sadrži ("unutarnji tekst")
  • tag = HTML oznaka elementa kojem se pristupa
  • unutarnji tekst = unutarnji tekst elementa

Korak 1. Idite na početnu stranicu Mercury Toursa (http://demo.guru99.com/test/newtours/) i upotrijebite Firebug da biste istražili oznaku "Lozinka". Zabilježite njegovu HTML oznaku (koja je u ovom slučaju "font") i primijetite da nema atribute klase, id-a ili imena.

Korak 2. Upišite css = font: contains ("Password:") u okvir Target Selenium IDE i kliknite Pronađi. Selenium IDE trebao bi moći pristupiti oznaci Lozinka kao što je prikazano na donjoj slici.

Korak 3. Ovog puta, unutarnji tekst zamijenite "Boston" tako da će vaš Target sada postati "css = font: contains (" Boston ")". Pritisnite Pronađi. Trebali biste primijetiti da oznaka "Boston do San Francisca" postaje istaknuta. To vam pokazuje da Selenium IDE može pristupiti dugoj naljepnici čak i ako ste upravo naznačili prvu riječ njegovog unutarnjeg teksta.

Lociranje prema DOM-u (objektni model dokumenta)

Objektni model dokumenta (DOM), jednostavnim riječima, način je na koji se strukturiraju HTML elementi. Selenium IDE može koristiti DOM za pristup elementima stranice. Ako se služimo ovom metodom, naš okvir Target uvijek će započeti s "dom = dokument ..."; međutim, prefiks "dom =" obično se uklanja jer je Selenium IDE u mogućnosti da automatski protumači sve što započinje s ključnom riječi "dokument" kao put unutar DOM-a u Seleniju.

Postoje četiri osnovna načina za pronalaženje elementa putem DOM-a u selenu:

  • getElementById
  • getElementsByName
  • dom: ime (odnosi se samo na elemente unutar imenovanog oblika)
  • dom: indeks

Lociranje pomoću DOM-a - getElementById

Usredotočimo se na prvu metodu - koristeći getElementById metodu DOM-a u selenu. Sintaksa bi bila:

Sintaksa

Opis

document.getElementById ("id elementa")

id elementa = ovo je vrijednost atributa ID elementa kojem treba pristupiti. Ovu vrijednost uvijek treba staviti u par zagrada ("").

Korak 1. Upotrijebite ovu demo stranicu http://demo.guru99.com/test/facebook.html Dođite do nje i pomoću Firebuga pregledajte potvrdni okvir "Ostavi me prijavljenim". Zabilježite njegov ID.

Vidimo da je ID koji bismo trebali koristiti "persist_box".

Korak 2. Otvorite Selenium IDE i u okvir Target unesite "document.getElementById (" persist_box ")" i kliknite Pronađi. Selenium IDE trebao bi moći pronaći potvrdni okvir "Ostavi me prijavljenim". Iako ne može istaknuti unutrašnjost potvrdnog okvira, Selenium IDE i dalje može element okružiti svijetlozelenim obrubom kao što je prikazano dolje.

Lociranje prema DOM-u - getElementsByName

Metoda getElementById može istodobno pristupiti samo jednom elementu, a to je element s ID-om koji ste naveli. Metoda getElementsByName je drugačija. Prikuplja niz elemenata koji imaju ime koje ste naveli. Pojedinim elementima pristupate pomoću indeksa koji počinje na 0.

getElementById

  • Dobit će samo jedan element za vas.
  • Taj element nosi ID koji ste naveli u zagradi getElementById ().

getElementsByName

  • Dobit će zbirku elemenata čija su imena ista.
  • Svaki se element indeksira brojem koji počinje od 0, baš poput niza
  • Navedite kojem elementu želite pristupiti stavljanjem njegovog indeksnog broja u uglate zagrade u donjoj sintaksi getElementsByName.

Sintaksa

Opis

document.getElementsByName ("ime") [indeks]
  • name = ime elementa definirano njegovim atributom 'name'
  • index = cijeli broj koji označava koji će se element unutar polja getElementsByName koristiti.

Korak 1. Idite na početnu stranicu Mercury Tours-a i prijavite se koristeći "tutorial" kao korisničko ime i lozinku. Firefox bi vas trebao otvoriti na zaslon Flight Finder.

Korak 2. Koristeći Firebug, pregledajte tri radio gumba na donjem dijelu stranice (radio gumbi ekonomske klase, poslovne klase i prve klase). Primijetite da svi imaju isto ime koje je "servClass".

Korak 3. Prvo pristupimo radio gumbu "Ekonomska klasa". Od sva ova tri radio gumba, ovaj je element na prvom mjestu, pa ima indeks 0. U ID programa Selenium upišite "document.getElementsByName (" servClass ") [0]" i kliknite gumb Pronađi. Selenium IDE trebao bi biti u stanju ispravno prepoznati izborni gumb ekonomske klase.

Korak 4. Promijenite broj indeksa u 1 tako da će vaš Target sada postati document.getElementsByName ("servClass") [1]. Kliknite gumb Pronađi i Selenium IDE trebao bi biti u mogućnosti istaknuti radio gumb "Poslovna klasa", kao što je prikazano u nastavku.

Lociranje prema DOM - dom: ime

Kao što je ranije spomenuto, ova metoda primijenit će se samo ako je element kojem pristupate sadržan u imenovanom obrascu.

Sintaksa

Opis

document.forms ["naziv obrasca"].. elementi ["naziv elementa"]
  • ime obrasca = vrijednost atributa imena oznake obrasca koji sadrži element kojem želite pristupiti
  • ime elementa = vrijednost atributa imena elementa kojem želite pristupiti

Korak 1. Idite na početnu stranicu Mercury Tours (http://demo.guru99.com/test/newtours/) i upotrijebite Firebug za pregled korisničkog imena. Primijetite da se nalazi u obrascu nazvanom "dom".

Korak 2. U Selenium IDE upišite "document.forms [" home "]. Elements [" userName "]" i kliknite gumb Pronađi. Selenium IDE mora moći uspješno pristupiti elementu.

Lociranje prema DOM - dom: indeks

Ova se metoda primjenjuje čak i kada element nije unutar imenovanog obrasca jer koristi indeks obrasca, a ne njegovo ime.

Sintaksa

Opis

document.forms [indeks obrasca] .elementi [indeks elementa]
  • indeks obrasca = broj indeksa (počevši od 0) obrasca s obzirom na cijelu stranicu
  • indeks elementa = broj indeksa (počevši od 0) elementa u odnosu na cijeli obrazac koji ga sadrži

Pristupit ćemo tekstnom okviru "Telefon" na stranici za registraciju Mercury Toursa. Obrazac na toj stranici nema naziv i atribut ID, pa će ovo biti dobar primjer.

Korak 1. Idite na stranicu za registraciju Mercury Tours i pregledajte tekstni okvir Telefon. Primijetite da obrazac koji ga sadrži nema atribute ID-a i imena.

Korak 2. Unesite "document.forms [0] .elements [3]" u okvir Target Selenium IDE i kliknite gumb Pronađi. Selenium IDE trebao bi biti u mogućnosti ispravno pristupiti tekstnom okviru telefona.

Korak 3. Alternativno, možete koristiti ime elementa umjesto njegovog indeksa i dobiti isti rezultat. Unesite "document.forms [0] .elements [" phone "]" u okvir za ciljanje Selenium IDE-a. Tekstualni okvir Telefon i dalje bi trebao biti istaknut.

Lociranje po XPathu

XPath je jezik koji se koristi za pronalaženje čvorova XML (Extensible Markup Language). Budući da se HTML može smatrati implementacijom XML-a, XPath možemo koristiti i za lociranje HTML elemenata.

Prednost: Može pristupiti gotovo svim elementima, čak i onima bez atributa klase, imena ili id.

Nedostatak: To je najsloženija metoda prepoznavanja elemenata zbog previše različitih pravila i razmatranja.

Srećom, Firebug može automatski generirati XPath Selenium lokatore. U sljedećem ćemo primjeru pristupiti slici kojoj se ne može pristupiti metodama o kojima smo ranije govorili.

Korak 1. Idite na početnu stranicu Mercury Tours i pomoću Firebuga pregledajte narančasti pravokutnik s desne strane žutog okvira "Veze". Pogledajte sliku u nastavku.

Korak 2 . Desnom tipkom miša kliknite HTML kôd elementa, a zatim odaberite opciju "Kopiraj XPath".

Korak 3. U selenium IDE upišite jednu crticu prema naprijed "/" u okvir Cilj, a zatim zalijepite XPath koji smo kopirali u prethodnom koraku. Unos u okvir Target sada treba započeti s dvije kose crte "//".

4. korak . Kliknite gumb Pronađi. Selenium IDE trebao bi biti u mogućnosti istaknuti narančasti okvir kao što je prikazano dolje.

Sažetak

Sintaksa za upotrebu lokatora

Metoda

Sintaksa cilja

Primjer
Osobom id = id_elementa id = e-pošta
Imenom ime = ime_elementa ime = korisničko ime
Po imenu pomoću filtara ime = ime_elementa filtar = vrijednost_filtra name = tripType vrijednost = oneway
Tekstom veze link = link_text veza = PRIJAVA
Oznaka i ID css = oznaka # id css = input # email
Oznaka i klasa css = oznaka. razred css = input.inputtext
Oznaka i atribut css = oznaka [atribut = vrijednost] css = input [ime = prezime]
Oznaka, klasa i atribut css = oznaka. klasa [atribut = vrijednost] css = input.inputtext [tabindex = 1]