Селектор CSS в Selenium

Автор: Krishna Рунгта Krishna Рунгта
Hours обновлено

Что такое CSS-селектор?

CSS-селекторы в Selenium представляют собой строковые шаблоны, используемые для идентификации элемента на основе комбинации тега HTML, идентификатора, класса и атрибутов. Поиск с помощью селекторов CSS в Selenium более сложен, чем предыдущие методы, но это наиболее распространенная стратегия поиска продвинутых Selenium пользователей, поскольку он может получить доступ даже к тем элементам, которые не имеют идентификатора или имени.

CSS-селекторы в Selenium имеют множество форматов, но мы остановимся только на самых распространенных. Различные типы CSS-локаторов в Selenium IDE

  • Тег и идентификатор
  • Тег и класс
  • Тег и атрибут
  • Тег, класс и атрибут
  • Внутренний текст

При использовании этой стратегии мы всегда добавляем префикс Target поле с «css=», как будет показано в следующих примерах.

тег и идентификатор — CSS-селектор

Опять же, в этом примере мы будем использовать текстовое поле Facebook Email. Как вы помните, у него есть идентификатор «email», и мы уже обращались к нему в разделе «Поиск по идентификатору». На этот раз мы будем использовать Selenium CSS-селектор с идентификатором для доступа к тому же элементу.

Синтаксис

css=tag#id

  • tag = HTML-тег элемента, к которому осуществляется доступ.
  • # = знак решетки. Это всегда должно присутствовать при использовании Selenium CSS-селектор с идентификатором
  • id = идентификатор элемента, к которому осуществляется доступ

Имейте в виду, что идентификатору всегда предшествует знак решетки (#).

Шаг 1) Перейдите в www.facebook.com. Используя Firebug, проверьте текстовое поле «Электронная почта или телефон».

На этом этапе обратите внимание, что HTML-тег является «входным», а его идентификатор — «электронной почтой». Итак, наш синтаксис будет «css=input#email».

Тег и идентификатор — селектор CSS

Шаг 2) Введите «css=input#email» в поле Target коробка Selenium IDE и нажмите кнопку «Найти». Selenium IDE должна иметь возможность выделить этот элемент.

Тег и идентификатор — селектор CSS

тег и класс — CSS-селектор

Селектор CSS в Selenium использование тега HTML и имени класса аналогично использованию тега и идентификатора, но в этом случае вместо знака решетки используется точка (.).

Синтаксис

css=tag.class

  • tag = HTML-тег элемента, к которому осуществляется доступ.
  • . = знак точки. Это всегда должно присутствовать при использовании селектора CSS с классом
  • class = класс элемента, к которому осуществляется доступ

Шаг 1) Перейти на демо-страницу http://demo.guru99.com/test/facebook.html и используйте Firebug, чтобы проверить текстовое поле «Электронная почта или телефон». Обратите внимание, что его HTML-тег — «input», а его класс — «inputtext».

Тег и класс — селектор CSS

Шаг 2) In Selenium IDE, введите «css=input.inputtext» в поле Target и нажмите Найти. Selenium IDE должна распознавать текстовые поля «Электронная почта» и «Телефон».

Тег и класс — селектор CSS

Обратите внимание: если несколько элементов имеют одинаковый тег HTML и имя, распознается только первый элемент в исходном коде.. Используя Firebug, проверьте текстовое поле «Пароль» в Facebook и обратите внимание, что оно имеет то же имя, что и текстовое поле «Электронная почта» или «Телефон».

Тег и класс — селектор CSS

Причина, по которой на предыдущей иллюстрации было выделено только текстовое поле «Электронная почта» или «Телефон», заключается в том, что оно стоит первым в исходном коде страницы Facebook.

Тег и класс — селектор CSS

СТАТЬИ ПО ТЕМЕ

тег и атрибут – CSS-селектор

Эта стратегия использует тег HTML и определенный атрибут элемента, к которому осуществляется доступ.

Синтаксис

css=tag[attribute=value]

  • tag = HTML-тег элемента, к которому осуществляется доступ.
  • [ и ] = квадратные скобки, в которых будет помещен определенный атрибут и соответствующее ему значение.
  • атрибут = атрибут, который будет использоваться. Целесообразно использовать атрибут, уникальный для элемента, например имя или идентификатор.
  • значение = соответствующее значение выбранного атрибута.

Шаг 1) Перейдите в Mercury Страница регистрации туров http://demo.guru99.com/test/newtours/register.php и проверьте текстовое поле «Фамилия». Обратите внимание на его HTML-тег («input» в данном случае) и его имя («lastName»).

Тег и атрибут — селектор CSS

Шаг 2) In Selenium IDE, введите «css=input[name=lastName]» в поле Target и нажмите Найти. Selenium IDE должна успешно получить доступ к полю «Фамилия».

Тег и атрибут — селектор CSS

Если несколько элементов имеют одинаковый тег и атрибут HTML, распознается только первый из них.. Это поведение похоже на поиск элементов с помощью селекторов CSS с тем же тегом и классом.

тег, класс и атрибут – CSS-селектор

Синтаксис

css=tag.class[attribute=value]

  • tag = HTML-тег элемента, к которому осуществляется доступ.
  • . = знак точки. Это всегда должно присутствовать при использовании селектора CSS с классом
  • class = класс элемента, к которому осуществляется доступ
  • [ и ] = квадратные скобки, в которых будет помещен определенный атрибут и соответствующее ему значение.
  • атрибут = атрибут, который будет использоваться. Целесообразно использовать атрибут, уникальный для элемента, например имя или идентификатор.
  • значение = соответствующее значение выбранного атрибута.

Шаг 1) Перейти на демо-страницу http://demo.guru99.com/test/facebook.html и используйте Firebug для проверки полей ввода «Электронная почта или телефон» и «Пароль». Обратите внимание на их тег HTML, класс и атрибуты. В этом примере мы выберем их атрибуты tabindex.

Тег, класс и атрибут — селектор CSS

Шаг 2) Сначала мы получим доступ к текстовому полю «Email or Phone». Таким образом, мы будем использовать значение tabindex 1. Введите «css=input.inputtext[tabindex=1]» в Selenium Иды Target и нажмите «Найти». Поле ввода «Email или телефон» должно быть выделено.

Тег, класс и атрибут — селектор CSS

Шаг 3) Чтобы получить доступ к полю ввода пароля, просто замените значение атрибута tabindex. Введите «css=input.inputtext[tabindex=2]» в Target и нажмите кнопку Найти. Selenium Среда IDE должна успешно идентифицировать текстовое поле «Пароль».

Тег, класс и атрибут — селектор CSS

внутренний текст – CSS-селектор

Как вы, возможно, заметили, HTML-меткам редко присваиваются атрибуты id, name или class. Итак, как нам получить к ним доступ? Ответ заключается в использовании их внутренних текстов. Внутренние тексты — это фактические шаблоны строк, которые HTML-метка отображает на странице.

Синтаксис

css=tag:contains("inner text")

  • tag = HTML-тег элемента, к которому осуществляется доступ.
  • внутренний текст = внутренний текст элемента

Шаг 1) Перейдите в Mercury Домашняя страница туров http://demo.guru99.com/test/newtours/ и используйте Firebug для изучения метки «Пароль». Обратите внимание на его HTML-тег (в данном случае это «шрифт») и обратите внимание, что он не имеет атрибутов класса, идентификатора или имени.

Внутренний текст — селектор CSS

Шаг 2) Тип css=font:contains(“Пароль:”) в Selenium Иды Target и нажмите Найти. Selenium IDE должна иметь доступ к метке пароля, как показано на рисунке ниже.

Внутренний текст — селектор CSS

Шаг 3) На этот раз замените внутренний текст на «Бостон», чтобы ваш Target теперь станет «css=font:contains(«Boston»)». Нажмите Find. Вы должны заметить, что метка «Boston to San Francisco» становится выделенной. Это показывает, что Selenium IDE может получить доступ к длинной метке, даже если вы только что указали первое слово ее внутреннего текста.

Внутренний текст — селектор CSS

Резюме

Синтаксис для поиска с помощью селектора CSS

Способ доставки Target Синтаксис Пример
Тег и идентификатор css=тег#id css=вход#электронная почта
Тег и класс css=tag.класс css=input.inputtext
Тег и атрибут css=тег[атрибут=значение] css=вход[имя=фамилия]
Тег, класс и атрибут css=тег.класс[атрибут=значение] css=input.inputtext[tabindex=1]

Вы могли бы: