Meni

Kako se koristi CSS Selector za prepoznavanje web elemenata za skripte za selen - Vodič za selen br. 6

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.

CSS Selector Selenium Locator

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.

Dakle, napredujući, razgovarajmo o primitivnim vrstama CSS selektora:

Korištenje CSS Selektora kao lokatora

Što ćete naučiti:

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.

Korištenje CSS Selektora kao lokatora 2

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.

Korištenje CSS Selektora kao lokatora 3

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.

kako koristiti naredbu cut u unixu

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

Korištenje CSS Selektora kao lokatora 4

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.

Korištenje CSS Selektora kao lokatora 5

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.

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

što je testiranje sustava na primjeru

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

Korištenje CSS Selektora kao lokatora 5

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']

kako koristiti svn u eclipse - u

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.

Detaljnije pokrivamo Selenium Locators jer je to važan dio stvaranja Selenium Script.

Javite nam svoje upite / komentare u nastavku.

Preporučena literatura

^