how use css selector
U našem prethodni tutorial o selenu , naučili smo različite vrste lokatora. Također smo naučili kako koristiti: ID, ClassName, Name, Text Link i XPath lokatore za prepoznavanje web elemenata na web stranici.
U nastavku s tim, danas ćemo naučiti kako koristiti CSS Selector kao lokator . Ovo je naš 6. tutorial u našem besplatna serija Treninga za selen .
Korištenje CSS Selektora kao lokatora:
CSS Selector je kombinacija selektora elementa i vrijednosti selektora koji identificira web element unutar web stranice. Sastav selektora elemenata i vrijednosti selektora poznat je kao uzorak selektora.
Uzorak selektora izrađuje se pomoću HTML oznaka, atributa i njihovih vrijednosti. Središnja tema iza postupka za stvaranje CSS Selector-a i Xpath-a vrlo su slične u osnovi jedine razlike u njihovom protokolu konstrukcije.
Kao i Xpath, CSS selektor također može locirati web elemente koji nemaju ID, klasu ili Ime.
kako koristiti naredbu cut u unixu
Dakle, napredujući, razgovarajmo o primitivnim vrstama CSS selektora:
Što ćete naučiti:
- CSS Selector: ID
- CSS Selector: Razred
- CSS Selector: Atribut
- CSS Selector: ID / klasa i atribut
- CSS Selector: Podniz
- CSS Selector: Unutarnji tekst
- Preporučena literatura
CSS Selector: ID
U ovom primjeru pristupili bismo tekstnom okviru 'E-pošta' koji se nalazi u obrascu za prijavu na Gmail.com.
Okvir za tekst e-pošte ima atribut ID čija je vrijednost definirana kao 'E-pošta'. Dakle, ID atribut i njegova vrijednost mogu se koristiti za stvaranje CSS Selektora za pristup okviru za tekst e-pošte.
Izrada CSS Selektora za web element
Korak 1 : Pronađite / pregledajte web element (u našem slučaju tekstualni okvir 'E-pošta') i primijetite da je HTML oznaka 'ulaz', a vrijednost atributa ID 'E-pošta' i obojica zajedno upućuju na 'Okvir e-pošte'. Stoga bi se gornji podaci koristili za stvaranje CSS Selektora.
Provjerite vrijednost lokatora
Korak 1 : Upišite 'css = input # Email', tj. Vrijednost lokatora u ciljani okvir u IDE-u Selenium i kliknite gumb Pronađi. Primijetite da će biti označen okvir Tekst e-pošte.
Sintaksa
css =
- HTML oznaka - To je oznaka koja se koristi za označavanje web elementa kojem želimo pristupiti.
- # - Hash znak služi za simboliziranje atributa ID. Obavezno je koristiti znak raspršivanja ako se za izradu CSS Selektora koristi atribut ID.
- Vrijednost atributa ID - To je vrijednost ID atributa kojem se pristupa.
- Vrijednosti ID-a uvijek prethodi znak raspršivanja.
Bilješka: Primjenjivo i za druge vrste CSS birača
- Dok specificirate CSS Selector u ciljnom tekstualnom okviru Selenium IDE-a, uvijek ga zaboravite dodati ispred 'css ='.
- Slijed gore navedenih artefakata je nepromjenjiv.
- Ako dva ili više web elemenata imaju istu vrijednost HTML oznake i atributa, prepoznat će se prvi element označen u izvoru stranice.
CSS Selector: Razred
U ovom primjeru pristupili bismo potvrdnom okviru 'Ostani prijavljen' koji se nalazi ispod obrasca za prijavu na gmail.com.
Potvrdni okvir 'Ostani prijavljen' ima atribut Class čija je vrijednost definirana kao 'zapamti'. Stoga se atribut Class i njegova vrijednost mogu koristiti za stvaranje CSS Selektora za pristup naznačenom web elementu.
Lociranje elementa pomoću Klase kao CSS Selektora vrlo je slično korištenju ID-a, osamljena razlika leži u njihovoj sintaksi formiranja.
Izrada CSS Selektora za web element
Korak 1 : Pronađite / pregledajte web element (potvrdni okvir „Ostani prijavljen“ u našem slučaju) i primijetite da je HTML oznaka „label“, a vrijednost ID atributa „Remember“ i oboje zajedno upućuju na „Ostanite potpisani“ u potvrdnom okviru '.
Provjerite vrijednost lokatora
Korak 1 : Upišite 'css = label.remember', tj. Vrijednost lokatora u ciljani okvir u IDE-u Selenium i kliknite gumb Pronađi. Primijetite da će biti označen potvrdni okvir 'Ostani prijavljen'.
Sintaksa
css =
- . - Znak točke koristi se za simboliziranje atributa klase. Obavezno je koristiti točku ako se atribut Class koristi za stvaranje CSS Selektora.
- Vrijednosti klase uvijek prethodi točkasti znak.
CSS Selector: Atribut
U ovom primjeru pristupili bismo gumbu 'Prijava' koji se nalazi ispod obrasca za prijavu na gmail.com.
Gumb 'Prijavi se' ima atribut tipa čija je vrijednost definirana kao 'pošalji'. Stoga se atribut type i njegova vrijednost mogu koristiti za stvaranje CSS Selektora za pristup naznačenom web elementu.
Izrada CSS Selektora za web element
Korak 1 : Pronađite / pregledajte web element (u našem slučaju gumb „Prijavi se“) i primijetite da je HTML oznaka „input“, atribut je vrsta, a vrijednost atributa type „submit“ i svi oni zajedno upućuju na gumb 'Prijavi se'.
Provjerite vrijednost lokatora
Korak 1 : Upišite 'css = input (type = 'submit')', tj. Vrijednost lokatora u ciljani okvir u selenium IDE-u i kliknite gumb Pronađi. Primijetite da će gumb 'Prijavi se' biti istaknut.
Sintaksa
css =
- Atribut - To je atribut koji želimo koristiti za stvaranje CSS Selektora. Može vrednovati, tip, ime itd. Preporučuje se odabrati atribut čija vrijednost jedinstveno identificira web element.
- Vrijednost atributa - To je vrijednost atributa kojem se pristupa.
CSS Selector: ID / klasa i atribut
U ovom primjeru pristupili bismo tekstnom okviru 'Lozinka' koji se nalazi u obrascu za prijavu na gmail.com.
Tekstualni okvir 'Lozinka' ima atribut ID čija je vrijednost definirana kao 'Passwd', atribut tipa čija je vrijednost definirana kao 'lozinka'. Stoga se ID atribut, atribut tipa i njihove vrijednosti mogu koristiti za stvaranje CSS Selektora za pristup naznačenom web elementu.
što je testiranje sustava na primjeru
Izrada CSS Selektora za web element
Korak 1 : Pronađite / pregledajte web element (u našem slučaju tekstualni okvir 'Password') i primijetite da je HTML oznaka 'input', atributi su ID i vrsta i odgovarajuće vrijednosti su 'Passwd' i 'password' i svi oni zajedno uputite na tekstualni okvir 'Lozinka'.
Provjerite vrijednost lokatora
Korak 1 : Upišite 'css = input # Passwd (name = 'Passwd')', tj. Vrijednost lokatora u ciljnom okviru u IDE-u Selenium i kliknite gumb Pronađi. Primijetite da će biti istaknut tekstni okvir 'Lozinka'.
Sintaksa
css =
Dva ili više atributa također se mogu dati u sintaksi.Na primjer, 'Css = input # Passwd (type = 'password') (name = 'Passwd')'.
CSS Selector: Podniz
CSS u Seleniju omogućuje podudaranje djelomičnog niza i tako izvođenje vrlo zanimljive značajke za stvaranje CSS Selektora pomoću podniza. Tri su načina na koja se CSS Selektori mogu stvoriti na temelju mehanizma koji se koristi za podudaranje podniza.
Vrste mehanizama
Svi donji mehanizmi imaju simboličko značenje.
- Uskladite prefiks
- Uskladite sufiks
- Uskladite podniz
Razmotrimo ih detaljno.
Uskladite prefiks
Koristi se za odgovaranje nizu uz pomoć odgovarajućeg prefiksa.
Sintaksa
css =
- ^ - Simbolički zapis koji odgovara nizu pomoću prefiksa.
- Prefiks - To je niz na temelju kojeg se izvodi operacija podudaranja. Očekuje se da vjerojatni niz započinje navedenim nizom.
Na primjer: Razmotrimo “Tekstualni okvir lozinke”, pa bi odgovarajući CSS Selector bio:
css = input # Passwd (name ^ = 'Pass')
Uskladite sufiks
Koristi se za odgovaranje nizu uz pomoć odgovarajućeg sufiksa.
Sintaksa
css =
- # - Simbolički zapis koji odgovara nizu pomoću sufiksa.
- Sufiks - To je niz na temelju kojeg se izvodi operacija podudaranja. Očekuje se da će vjerojatni niz završiti navedenim nizom.
Na primjer,Ponovno razmotrimo 'Tekstualni okvir lozinke', pa bi odgovarajući CSS Selector bio:
css = input # Passwd (ime $ = 'wd')
Uskladite podniz
Koristi se za odgovaranje nizu uz pomoć odgovarajućeg podniza.
Sintaksa
css =
- * - Simbolički zapis koji odgovara nizu pomoću podniza.
- Podniz - To je niz na temelju kojeg se izvodi operacija podudaranja. Očekuje se da će vjerojatni niz imati navedeni obrazac niza.
Na primjer,omogućuje ponovno razmatranje 'Tekstualnog okvira lozinke', tako da bi odgovarajući CSS Selector bio:
css = input # Passwd (ime $ = 'wd')
CSS Selector: Unutarnji tekst
Unutarnji tekst pomaže nam identificirati i stvoriti CSS Selector koristeći obrazac niza koji se HTML oznaka manifestira na web stranici.
Razmislite: 'Trebate pomoć?' hiperveza prisutna ispod obrasca za prijavu na gmail.com.
Oznaka sidra koja predstavlja hipervezu sadrži tekst zatvoren unutar. Stoga se ovaj tekst može koristiti za stvaranje CSS Selektora za pristup određenom web elementu.
Sintaksa:
css =
- : - Točkasti znak služi za simboliziranje sadrži metodu
- Sadrži - to je vrijednost atributa klase kojoj se pristupa.
- Tekst - Tekst koji se prikazuje bilo gdje na web stranici, bez obzira na njegovo mjesto.
Ovo je jedna od najčešće korištenih strategija lociranja web elementa zbog njegove pojednostavljene sintakse.
Zbog činjenice da izrada CSS Selector-a i Xpath-a zahtijeva puno truda i prakse, tako da taj postupak provode samo sofisticiraniji i obučeniji korisnici.
Sljedeći vodič # 7 : Nastavljajući s našim sljedećim vodičem, iskoristili bismo priliku da vam predstavimo proširenje strategija lociranja. Tako bismo u sljedećem tutorijalu proučavali mehanizam za pronalaženje web elemenata na Google Chromeu i Internet Exploreru.
kako koristiti svn u eclipse - u
Detaljnije pokrivamo Selenium Locators jer je to važan dio stvaranja Selenium Script.
Javite nam svoje upite / komentare u nastavku.
Preporučena literatura
- Kako locirati elemente u preglednicima Chrome i IE za izgradnju skripti za selen - Vodič za selen br. 7
- Provjerite vidljivost web elemenata pomoću različitih tipova naredbi WebDriver - Vodič za selenij # 14
- Uvod u Selenium WebDriver - Vodič za selen br. 8
- Učinkoviti scenariji za skriptiranje i rješavanje problema sa selenijem - Vodič za selenij br. 27
- Otklanjanje pogrešaka u skriptama za selen sa zapisnicima (Vodič za Log4j) - Vodič za selen # 26
- 30+ najboljih vodiča za selen: naučite selen na stvarnim primjerima
- Vodič za krastavac selenij: Integracija Java Selenium WebDriver krastavaca
- Korištenje selenijske klase za rukovanje padajućim elementima na web stranici - Vodič za selenij br. 13