Примеры селекторов 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'));

Динамически генерируемые идентификаторы

Мы можем использовать сопоставители строк для поиска элементов с динамически генерируемыми идентификаторами.

В этом примере все три элемента div содержат слово «random».

Атрибут начинается с

Выбрать первый 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_')'));

Дальнейшее чтение: