Лоцирање елемената помоћу ЦСС селектора је преферирани начин јер је бржи и читљивији од КСПатх-а.
Овај водич даје примере како лоцирати веб елементе у Селенијуму помоћу ЦСС селектора.
Замислимо да имамо ознаку са следећим атрибутима [ид, цласс, наме, валуе]
Генерички начин лоцирања елемената према атрибуту је:
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_')'));
Додатна литература: