Primjeri selektora za CSS selenium

Lociranje elemenata pomoću CSS selektora je preferirani način jer je brži i čitljiviji od XPath-a.

Ovaj vodič daje primjere kako locirati web elemente u Seleniju pomoću CSS selektora.

CSS selektori prema atributima

Zamislimo da imamo oznaku sa sljedećim atributima [id, class, name, value]

Generički način lociranja elemenata prema atributu je:

css = element_name[='']

Primjer:

WebElement firstName = driver.findElement(By.cssSelector('input[name='first_name']'));

Atribut Id

U CSS-u možemo koristiti # notacija za odabir id atribut elementa:



Primjer:

driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname'));

Atribut klase

Isti se princip može koristiti za lociranje elemenata prema njihovim class atribut.

Koristimo . notacija.

driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); Bilješka:Budite oprezni kada koristite . notacija jer na HTML izvoru može biti mnogo web elemenata s istim atributom klase.

Višestruki atributi

Ponekad treba biti precizniji s kriterijima odabira kako bi se pronašao točan element.

Vrijednost zaslona može biti 'ništa' ili 'blokirati', ovisno o ajax pozivu. U ovoj situaciji moramo locirati element prema klasi i stilu.

Primjer:

driver.findElement(By.cssSelector('div[class='ajax_enabled'] [style='display:block']'));

Atribut NE sadrži određenu vrijednost

Kako u WebDriveru možete pronaći elemente čiji atribut sadrži vrijednosti koje ne želite odabrati? Ovaj primjer CSS selektora pokazuje kako NE odabrati prema određenoj vrijednosti atributa

Pretpostavimo da imate mnogo elemenata koji dijele isti atribut i vrijednost atributa, ali neki od tih elemenata imaju i druge varijable dodane vrijednosti. npr.

U gornjem isječku želimo odabrati dostupan dan (tj. Dva zadnja div elementa)

Kao što se može vidjeti, sva četiri div-a sadrže 'kalendarski dan-', ali prva dva sadrže i 'nedostupan', što ne želimo.

CSS selektor za Ne odabir prva dva div-a je

driver.findElement(By.cssSelector('div[class*=calendar-day-]:not([class*='unavailable'])'));'

Lociranje dječjeg elementa

Da bismo pronašli oznaku slike, koristimo:

driver.findElement(By.cssSelector('div#logo img'));

Višestruki dječji elementi

Postoje slučajevi kada unutar istog nadređenog elementa postoji više podređenih elemenata kao što su elementi popisa


  • Apple

  • Orange

  • Banana

Kao što se može vidjeti, pojedinačni elementi popisa nisu povezani s nikakvim ID-om. Da bismo pronašli element s tekstom ‘Orange’, moramo upotrijebiti nth-of-type.

Primjer:

driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)'));

Isto tako, za odabir posljednjeg podređenog elementa, tj. „Banana“, koristimo:

driver.findElement(By.cssSelector('ul#fruit li:last-child'));

Dinamički generirani ID-ovi

Podudaranje nizova možemo koristiti za lociranje elemenata s dinamički generiranim ID-ovima.

U ovom primjeru sva tri elementa div sadrže riječ 'slučajno'.

Atribut započinje s

Za odabir prvog div element, koristili bismo ^= što znači 'započinje s':

driver.findElement(By.cssSelector('div[id^='123']'));

Atribut završava sa

Za odabir drugog div element, koristili bismo $= što znači 'završava sa':

driver.findElement(By.cssSelector('div[id$='456']'));

Atribut sadrži

Za odabir posljednjeg div element koji bismo koristili *= što znači 'podniz'

driver.findElement(By.cssSelector('div[id*='_pattern_']'));

Također možemo koristiti contains

driver.findElement(By.cssSelector('div:contains('_pattern_')'));

Daljnje čitanje: