Meni

Kako uporabljati izbirnik CSS za prepoznavanje spletnih elementov za skripte za selen - Vadnica za selenij št. 6

how use css selector

Preizkusite Naš Instrument Za Odpravo Težav

V našem prejšnja vadnica za Selen , smo se naučili različnih vrst lokatorjev. Naučili smo se tudi, kako uporabljati lokatorje ID, ClassName, Name, Text Text in XPath za prepoznavanje spletnih elementov na spletni strani.

V nadaljevanju tega se bomo danes naučili kako uporabiti CSS Selector kot Locator . To je naša 6. vadnica v našem brezplačna serija Selen Training .

Uporaba izbirnika CSS kot lokatorja:

CSS Selector je kombinacija izbirnika elementov in vrednosti izbirnika, ki identificira spletni element na spletni strani. Sestavljeni element izbirnika in vrednosti izbirnika je znan kot vzorec izbirnika.

CSS Selector Selen Locator

Vzorec izbirnika je sestavljen z uporabo oznak HTML, atributov in njihovih vrednosti. Osrednja tema postopka za ustvarjanje CSS Selector in Xpath sta si zelo podobni, saj je edina razlika v njihovem konstrukcijskem protokolu.

Tako kot Xpath lahko tudi izbirnik CSS poišče spletne elemente, ki nimajo ID-ja, razreda ali imena.

vprašanja in odgovori za intervju z informatiko za 5 let izkušenj

Torej, zdaj se usmerimo naprej, razpravljajmo o primitivnih vrstah izbirnikov CSS:

Uporaba izbirnika CSS kot lokatorja

Kaj se boste naučili:

Izbirnik CSS: ID

V tem vzorcu bi dostopali do besedilnega polja »E-pošta«, ki je v obrazcu za prijavo na Gmail.com.

Besedilo e-pošte ima atribut ID, katerega vrednost je definirana kot »E-pošta«. Tako lahko atribut ID in njegovo vrednost uporabimo za ustvarjanje izbirnika CSS za dostop do e-poštnega polja z besedilom.

Ustvarjanje izbirnika CSS za spletni element

Korak 1 : Poiščite / preglejte spletni element (v našem primeru besedilno polje »E-pošta«) in opazite, da je oznaka HTML »vhod«, vrednost atributa ID pa »E-pošta« in oba se skupaj sklicujeta na »E-poštno polje z besedilom«. Zato bi bili zgornji podatki uporabljeni za ustvarjanje CSS Selectorja.

Uporaba izbirnika CSS kot lokatorja 2

Preverite vrednost lokatorja

Korak 1 : Vtipkajte »css = input # Email«, to je vrednost lokatorja v ciljno polje v ID-ju Selenium in kliknite gumb Poišči. Upoštevajte, da bo označeno polje Besedilo e-pošte.

Uporaba izbirnika CSS kot lokatorja 3

Sintaksa

css =

  • Oznaka HTML - To je oznaka, ki se uporablja za označevanje spletnega elementa, do katerega želimo dostopati.
  • # - Hash znak se uporablja za simboliziranje atributa ID. Če se za izdelavo izbirnika CSS uporablja atribut ID, je obvezno uporabiti znak zgoščevanja.
  • Vrednost atributa ID - Dostopa se do vrednosti atributa ID.
  • Pred vrednostjo ID vedno stoji znak zgoščevanja.

Opomba: Velja tudi za druge vrste izbirnikov CSS

  • Medtem ko v ciljnem besedilnem polju programa Selenium IDE določite CSS Selector, vedno ne pozabite nanj dodati predpono »css =«.
  • Zaporedje zgornjih artefaktov je nespremenljivo.
  • Če imata dva ali več spletnih elementov isto oznako HTML in vrednost atributa, bo prepoznan prvi element, označen v izvoru strani.

Izbirnik CSS: razred

V tem vzorcu bi odprli potrditveno polje »Ostani prijavljen«, ki je pod obrazcem za prijavo na gmail.com.

Potrditveno polje »Ostani prijavljen« ima atribut Class, katerega vrednost je definirana kot »zapomni«. Tako lahko atribut Class in njegovo vrednost uporabimo za ustvarjanje izbirnika CSS za dostop do določenega spletnega elementa.

Iskanje elementa z uporabo razreda kot izbirnika CSS je zelo podobno uporabi ID-ja, osamljena razlika je v njihovi sintaksi.

Ustvarjanje izbirnika CSS za spletni element

Korak 1 : Poiščite / preglejte spletni element (v našem primeru potrditveno polje »Ostani prijavljen«) in opazite, da je oznaka HTML »oznaka«, vrednost atributa ID pa »zapomni« in oba se skupaj sklicujeta na »Ostani podpisana« v potrditveno polje «.

Preverite vrednost lokatorja

Korak 1 : Vnesite »css = label.remember«, tj. Vrednost lokatorja v ciljno polje v IDE-ju Selenium in kliknite gumb Poišči. Upoštevajte, da bo označeno potrditveno polje »Ostani prijavljen«.

Uporaba izbirnika CSS kot lokatorja 4

Sintaksa

css =

  • . - Znak pike se uporablja za simboliziranje atributa razreda. Če se atribut razreda uporablja za ustvarjanje izbirnika CSS, je obvezno uporabiti znak pike.
  • Pred vrednostjo razreda vedno stoji pika.

Izbirnik CSS: Atribut

V tem vzorcu bi dostopali do gumba »Prijava«, ki je pod obrazcem za prijavo na gmail.com.

Gumb »Prijava« ima atribut tipa, katerega vrednost je definirana kot »pošlji«. Tako lahko atribut tipa in njegovo vrednost uporabimo za ustvarjanje izbirnika CSS za dostop do določenega spletnega elementa.

Ustvarjanje izbirnika CSS za spletni element

Korak 1 : Poiščite / preglejte spletni element (v našem primeru gumb »Prijavi se«) in opazite, da je oznaka HTML »input«, atribut je vrsta, vrednost atributa type pa »submit« in vsi skupaj se sklicujejo na gumb »Prijava«.

Preverite vrednost lokatorja

Korak 1 : Vtipkajte »css = input (type =’ submit ’)«, to je vrednost lokatorja v ciljno polje v selenium IDE in kliknite gumb Poišči. Upoštevajte, da bo označen gumb »Prijava«.

Uporaba izbirnika CSS kot lokatorja 5

Sintaksa

css =

  • Atribut - To je atribut, ki ga želimo uporabiti za ustvarjanje izbirnika CSS. Lahko vrednost, tip, ime itd. Priporočljivo je izbrati atribut, katerega vrednost enolično identificira spletni element.
  • Vrednost atributa - Dostopa se do vrednosti atributa.

Izbirnik CSS: ID / razred in atribut

V tem vzorcu bi dostopali do besedilnega polja »Geslo«, ki je v obrazcu za prijavo na gmail.com.

Besedilno polje »Geslo« vsebuje atribut ID, katerega vrednost je definirana kot »Passwd«, atribut tipa, katerega vrednost je definirana kot »geslo«. Tako lahko atribut ID, atribut tipa in njihove vrednosti uporabite za ustvarjanje izbirnika CSS za dostop do določenega spletnega elementa.

kako odpreti bin datoteke na računalniku

Ustvarjanje izbirnika CSS za spletni element

Korak 1 : Poiščite / preglejte spletni element (v našem primeru besedilno polje »Geslo«) in opazite, da je oznaka HTML »vhodna«, atributi so ID in vrsta ter njihovi ustrezni vrednosti »Passwd« in »geslo« in vsi skupaj sklic na besedilno polje »Geslo«.

Preverite vrednost lokatorja

Korak 1 : Vtipkajte »css = input # Passwd (name = 'Passwd’) «, to je vrednost lokatorja v ciljnem polju v ID-ju Selenium in kliknite gumb Najdi Upoštevajte, da bo označeno besedilno polje »Geslo«.

Uporaba izbirnika CSS kot lokatorja 5

Sintaksa

css =

V sintaksi je lahko tudi dva ali več atributov.Na primer, 'Css = input # Passwd (type = 'password') (name = 'Passwd')'.

Izbirnik CSS: podniz

CSS v seleniju omogoča ujemanje delnega niza in s tem izpeljavo zelo zanimive funkcije za ustvarjanje izbirnikov CSS z uporabo podnizov. Obstajajo trije načini, na katere je mogoče ustvariti izbirnike CSS na podlagi mehanizma, ki se uporablja za ujemanje podnizov.

Vrste mehanizmov

Vsi spodnji mehanizmi imajo simbolni pomen.

  • Ujemanje predpone
  • Ujemanje končnice
  • Ujemite podniz

Pogovorimo se o njih podrobno.

Ujemanje predpone

Uporablja se za ujemanje niza s pomočjo ustrezne predpone.

Sintaksa

css =

  • ^ - Simbolni zapis, ki se ujema z nizom s predpono.
  • Predpona - To je niz, na podlagi katerega se izvede operacija ujemanja. Verjetni niz naj bi se začel z navedenim nizom.

Na primer: Razmislimo o 'besedilnem polju za geslo', zato bi bil ustrezni izbirnik CSS:

css = input # Passwd (name ^ = 'Pass')

Ujemanje končnice

Uporablja se za ujemanje niza s pomočjo ustrezne končnice.

Sintaksa

css =

  • # - Simbolni zapis, ki se ujema z nizom s pripono.
  • Pripona - To je niz, na podlagi katerega se izvede operacija ujemanja. Verjetni niz naj bi se končal z navedenim nizom.

Na primer,Ponovno razmislimo o besedilnem polju za geslo, zato bi bil ustrezen izbirnik CSS:

css = input # Passwd (ime $ = 'wd')

Ujemite podniz

Uporablja se za ujemanje niza s pomočjo ustreznega podniza.

Sintaksa

css =

  • * - Simbolični zapis, ki se ujema z nizom z uporabo podniza.
  • Podniz - To je niz, na podlagi katerega se izvede operacija ujemanja. Verjetni niz naj bi imel določen vzorec niza.

Na primer,znova razmislimo o 'besedilnem polju za geslo', zato bi bil ustrezen izbirnik CSS:

css = input # Passwd (ime $ = 'wd')

Izbirnik CSS: notranje besedilo

Notranje besedilo nam pomaga prepoznati in ustvariti izbirnik CSS z uporabo vzorca niza, ki ga oznaka HTML prikaže na spletni strani.

Razmislite: 'Potrebujete pomoč?' hiperpovezava pod obrazcem za prijavo na gmail.com.

Sidrna oznaka, ki predstavlja hiperpovezavo, ima v sebi zaprto besedilo. Tako lahko to besedilo uporabimo za ustvarjanje izbirnika CSS za dostop do določenega spletnega elementa.

Sintaksa:

css =

  • : - Znak s piko se uporablja za simbolizacijo metode
  • Vsebuje - Dostopa se do vrednosti atributa razreda.
  • Besedilo - besedilo, ki je prikazano kjer koli na spletni strani, ne glede na njegovo lokacijo.

Zaradi poenostavljene sintakse je to ena najpogosteje uporabljenih strategij za iskanje spletnega elementa.

Ker ustvarjanje CSS Selector in Xpath zahteva veliko truda in prakse, zato postopek izvajajo le bolj izpopolnjeni in usposobljeni uporabniki.

Naslednja vadnica št : Nadaljujemo z naslednjo vadnico in izkoristili bomo priložnost, da vam predstavimo razširitev strategij iskanja. Tako bi v naslednji vadnici preučevali mehanizem za iskanje spletnih elementov v brskalnikih Google Chrome in Internet Explorer.

najboljše orodje za upravljanje testnih primerov za jiro

Podrobneje pokrivamo Selenium Locators, saj je pomemben del ustvarjanja Selenium Script.

Spodaj nam sporočite svoja vprašanja / komentarje.

Priporočeno branje

^