Селектор CSS в Selenium

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

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

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

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

При использовании этой стратегии мы всегда добавляем префикс Target box с «css=", как будет показано ниже.wing примеры.

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

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

Синтаксис

css=tag#id

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

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

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

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

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

Шаг 2) Введите «css=input#email» в цель box of 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, чтобы проверить «E»mail или Телефон» текст box. Обратите внимание, что его HTML-тег — «input», а его класс — «inputtext».

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

Шаг 2) In Selenium IDE, введите «css=input.inputtext» в поле «Цель». box и нажмите «Найти». Selenium IDE должна уметь распознавать Email или текстовое сообщение на телефоне box.

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

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

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

Причина, почему только Email или текстовое сообщение на телефоне box На предыдущей иллюстрации было подчеркнуто, что он стоит первым в исходном коде страницы Facebook.

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

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

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

Синтаксис

css=tag[attribute=value]

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

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

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

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

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

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

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

Синтаксис

css=tag.class[attribute=value]

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

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

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

Шаг 2) Мы получим доступ к 'Email или текст телефона box первый. Таким образом, мы будем использовать значение tabindex, равное 1. Введите «css=input.inputtext[tabindex=1]» в Selenium Цель IDE box и нажмите «Найти». 'Е'mail или вход телефона box должны быть выделены.

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

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

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

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

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

Синтаксис

css=tag:contains("inner text")

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

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

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

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

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

Шаг 3) На этот раз замените внутренний текст на «Бостон», чтобы ваша цель теперь стала «css=font:contains(«Бостон»)». Нажмите «Найти». Вы должны заметить, что «Бостон — Сан-Франциско»ciscoметка станет выделенной. Это показывает вам, что Selenium IDE может получить доступ к длинной метке, даже если вы только что указали первое слово ее внутреннего текста.

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

Итого

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

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