Примери селектора ЦСС селектора

Лоцирање елемената помоћу ЦСС селектора је преферирани начин јер је бржи и читљивији од КСПатх-а.

Овај водич даје примере како лоцирати веб елементе у Селенијуму помоћу ЦСС селектора.



ЦСС селектори по атрибутима

Замислимо да имамо ознаку са следећим атрибутима [ид, цласс, наме, валуе]


Генерички начин лоцирања елемената према атрибуту је:

css = element_name[='']

Пример:


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

Ид Атрибут

У ЦСС-у можемо користити # нотација за одабир id атрибут елемента:

Пример:

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

Атрибут класе

Исти принцип се може користити за лоцирање елемената према њиховим class атрибут.

Користимо . нотација.


driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); Белешка:Будите пажљиви када користите . нотација јер на ХТМЛ извору може бити много веб елемената са истим атрибутом класе.

Вишеструки атрибути

Понекад је потребно прецизније одредити критеријуме за одабир како би се пронашао тачан елемент.

Вредност приказа може бити „ноне“ или „блоцк“, у зависности од ајак позива. У овој ситуацији елемент морамо лоцирати и према класи и према стилу.

Пример:

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

Атрибут НЕ садржи одређену вредност

Како у ВебДриверу можете пронаћи елементе чији атрибут садржи вредности које не желите да изаберете? Овај пример ЦСС селектора показује како НЕ треба одабрати према одређеној вредности атрибута


Претпоставимо да имате много елемената који деле исти атрибут и вредност атрибута, али неки од тих елемената имају друге променљиве додате вредности. на пример:

У горњем исечку желимо да изаберемо доступан дан (тј. Два последња div елемента)

Као што се може видети, сва четири див-а садрже „календарски дан-“, али прва два садрже и „недоступан“, што не желимо.

ЦСС селектор за Не одабир прва два див-а је


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

Лоцирање дечјег елемента

Да бисмо пронашли ознаку слике, користимо:

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

Вишеструки дечји елементи

Постоје случајеви када постоји више подређених елемената унутар истог надређеног елемента као што су елементи листе


  • Apple

  • Orange

  • Banana

Као што се може видети, појединачни елементи листе нису повезани са било којим ИД-ом. Да бисмо пронашли елемент са текстом ‘Оранге’, морамо да користимо nth-of-type.

Пример:


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

Исто тако, за одабир последњег подређеног елемента, тј. „Банана“, користимо:

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

Динамички генерисани ИД-ови

Подударање низова можемо користити за лоцирање елемената са динамички генерисаним ИД-овима.

У овом примеру, сва три елемента див садрже реч „случајно“.

Атрибут започиње са

Да бисте изабрали прву div елемент, користили бисмо ^= што значи „започиње са“:

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

Атрибут се завршава са

Да бисте изабрали другу div елемент, користили бисмо $= што значи „завршава се са“:

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

Атрибут садржи

Да бисте изабрали последњу div елемент који бисмо користили *= што значи „подниз“

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

Такође можемо користити contains

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

Додатна литература: