Seleno CSS selektorių pavyzdžiai

Pirmenybė teikiama elementų nustatymui CSS selektorių pagalba, nes tai yra greitesnė ir lengviau skaitoma nei XPath.

Šioje pamokoje pateikiami pavyzdžiai, kaip rasti žiniatinklio elementus „Selenium“ naudojant CSS selektorius.

CSS selektoriai pagal atributą

Įsivaizduokime, kad turime žymą su šiais atributais [id, class, name, value]

Bendras būdas rasti elementus pagal atributą yra:

css = element_name[='']

Pavyzdys:

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

Id atributas

CSS galime naudoti # žymėjimas pasirinkti id elemento atributas:

Pavyzdys:

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

Klasės atributas

Tuo pačiu principu galima rasti elementus pagal jų class atributas.

Mes naudojame . žymėjimas.

driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); Pastaba:Būkite ypač atsargūs naudodami . žymėjimas, nes HTML šaltinyje gali būti daug žiniatinklio elementų su tuo pačiu klasės atributu.

Keli atributai

Kartais reikia tiksliai nurodyti pasirinkimo kriterijus, norint rasti teisingą elementą.

Ekrano vertė gali būti „nėra“ arba „blokuoti“, atsižvelgiant į ajax skambutį. Šioje situacijoje turime surasti elementą pagal klasę ir stilių.

Pavyzdys:

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

Atribute NĖRA konkrečios vertės

Kaip rasti „WebDriver“ elementus, kurių atribute yra reikšmių, kurių nenorite pasirinkti? Šis CSS parinkiklio pavyzdys parodo, kaip NE pasirinkti pagal konkrečią atributo vertę

Tarkime, kad turite daug elementų, turinčių tą patį atributą ir atributo vertę, tačiau prie kai kurių iš šių elementų prie vertės pridedami kiti kintamieji. pvz .:

Ankstesniame fragmente norime pasirinkti galimą dieną (t. Y. Du paskutinius div elementus)

Kaip matome, visuose keturiuose skyriuose yra „kalendoriaus diena“, tačiau dviejuose pirmuose taip pat yra „nepasiekiami“, kurių mes nenorime.

CSS parinkiklis, skirtas nepasirinkti pirmųjų dviejų divų, yra

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

Vaiko elemento nustatymas

Norėdami rasti vaizdo žymą, mes naudojame:

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

Keli vaiko elementai

Yra atvejų, kai tame pačiame pagrindiniame elemente yra keli antriniai elementai, pvz., Sąrašo elementai

• Apple


• Orange


• Banana

Kaip matyti, atskirų sąrašo elementų ID nėra susietos. Norėdami rasti elementą su tekstu „Oranžinė“, turime naudoti nth-of-type.

Pavyzdys:

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

Panašiai norėdami pasirinkti paskutinį vaiko elementą, t. Y. „Bananą“, naudojame:

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

Dinamiškai sugeneruoti ID

Norėdami rasti elementus su dinamiškai sugeneruotais ID, galime naudoti eilučių atitikmenis.

Šiame pavyzdyje visuose trijuose div elementuose yra žodis „atsitiktinis“.

Atributas prasideda

Norėdami pasirinkti pirmąjį div elementą, naudotume ^= tai reiškia „prasideda“:

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

Atributas baigiasi

Norėdami pasirinkti antrą div elementą, naudotume $= tai reiškia „baigiasi“:

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

Atributas yra

Norėdami pasirinkti paskutinį div elementą, kurį naudotume *= tai reiškia „sub-string“

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

Taip pat galime naudoti contains

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

Papildoma literatūra:

• „Selenium“ mokymo programa: sužinokite vartotojo sąsajos naršyklės automatizavimą