Главная Селен Примеры селекторов Selenium CSS

Примеры селекторов Selenium CSS

Поиск элементов с помощью селекторов CSS является предпочтительным способом, поскольку он быстрее и удобочитаем, чем XPath.

В этом руководстве представлены примеры того, как находить веб-элементы в Selenium с помощью селекторов CSS.

Селекторы CSS по атрибуту

Представим, что у нас есть тег со следующими атрибутами [id, class, name, value]

Общий способ поиска элементов по атрибуту:

css = element_name[='']

Пример:

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

Атрибут Id

В CSS мы можем использовать # обозначение, чтобы выбрать 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')); Примечание:Будьте особенно осторожны при использовании . нотации, поскольку в исходном HTML-коде может быть много веб-элементов с одним и тем же атрибутом класса.

Множественные атрибуты

Иногда необходимо уточнить критерии выбора, чтобы найти правильный элемент.

Значение отображения может быть либо «none», либо «block» в зависимости от вызова ajax. В этой ситуации мы должны найти элемент как по классу, так и по стилю.

Пример:

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

Атрибут НЕ содержит определенного значения

Как в WebDriver находить элементы, атрибуты которых содержат значения, которые вы не хотите выбирать? Этот пример селектора CSS показывает, как НЕ выбирать по определенному значению атрибута

Предположим, у вас есть много элементов, которые имеют один и тот же атрибут и значение атрибута, но некоторые из этих элементов имеют другие переменные, добавленные к значению. например:

В приведенном выше фрагменте мы хотим выбрать доступный день (т.е. два последних элемента div).

Как видно, все четыре блока div содержат «calendar-day-», но первые два также содержат «unavailable», что нам не нужно.

Селектор CSS для отказа от выбора первых двух 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'));