Селектор CSS в Selenium

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

Що таке селектор CSS?

Селектори CSS в Selenium це шаблони рядків, які використовуються для ідентифікації елемента на основі комбінації тегу HTML, ідентифікатора, класу та атрибутів. Розташування за допомогою селекторів CSS у Selenium є більш складним, ніж попередні методи, але це найпоширеніша стратегія визначення місцезнаходження передових Selenium користувачів, оскільки він може отримати доступ навіть до тих елементів, які не мають ідентифікатора чи імені.

Селектори CSS в Selenium мають багато форматів, але ми зупинимося лише на найпоширеніших. Різні типи CSS Locator в Selenium IDE

  • Тег та ID
  • Тег і клас
  • Тег і атрибут
  • Тег, клас і атрибут
  • Внутрішній текст

Використовуючи цю стратегію, ми завжди ставимо префікс the Target поле з «css=», як буде показано в наступних прикладах.

тег і ідентифікатор – CSS Selector

У цьому прикладі ми знову використаємо текстове поле електронної пошти Facebook. Як ви пам’ятаєте, він має ідентифікатор «email», і ми вже відкривали його в розділі «Пошук за ідентифікатором». Цього разу ми використаємо a Selenium Селектор CSS з ідентифікатором для доступу до того самого елемента.

синтаксис

css=tag#id

  • tag = тег HTML елемента, до якого здійснюється доступ
  • # = знак решітки. Це має бути завжди при використанні a Selenium Селектор CSS з ідентифікатором
  • id = ідентифікатор елемента, до якого здійснюється доступ

Пам’ятайте, що перед ідентифікатором завжди стоїть символ решетки (#).

Крок 1) перейдіть до www.facebook.com. За допомогою Firebug перевірте текстове поле «Електронна пошта або телефон».

На цьому етапі зверніть увагу, що тег HTML – це «вхід», а його ідентифікатор — «електронна пошта». Отже, наш синтаксис буде «css=input#email».

Тег та ідентифікатор - CSS Selector

Крок 2) Введіть «css=input#email» у поле Target коробка Selenium IDE та натисніть кнопку Знайти. Selenium IDE повинна мати можливість підсвічувати цей елемент.

Тег та ідентифікатор - CSS Selector

тег і клас – CSS Selector

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

синтаксис

css=tag.class

  • tag = тег HTML елемента, до якого здійснюється доступ
  • . = знак крапки. Це завжди має бути присутнім під час використання селектора CSS із класом
  • class = клас елемента, до якого здійснюється доступ

Крок 1) Перейдіть на демонстраційну сторінку https://demo.guru99.com/test/facebook.html і використовуйте Firebug, щоб перевірити текстове поле «Електронна пошта або телефон». Зверніть увагу, що його HTML-тег — «вхід», а його клас — «вхідний текст».

Тег і клас - CSS Selector

Крок 2) In Selenium IDE, введіть «css=input.inputtext» у Target і натисніть Знайти. Selenium IDE має розпізнавати текстове поле електронної пошти або телефону.

Тег і клас - CSS Selector

Зверніть увагу, що коли кілька елементів мають однаковий HTML-тег і назву, розпізнається лише перший елемент у вихідному коді. Використовуючи Firebug, перевірте текстове поле Password у Facebook і зверніть увагу, що воно має таке ж ім’я, як і текстове поле Email або Phone.

Тег і клас - CSS Selector

Причина, чому лише текстове поле «Електронна пошта» або «Телефон» було виділено на попередній ілюстрації, полягає в тому, що воно стоїть першим у вихідному коді сторінки Facebook.

Тег і клас - CSS Selector

СТАТТІ ПО ТЕМІ

тег і атрибут – CSS Selector

Ця стратегія використовує тег HTML і певний атрибут елемента, до якого потрібно отримати доступ.

синтаксис

css=tag[attribute=value]

  • tag = тег HTML елемента, до якого здійснюється доступ
  • [ і ] = квадратні дужки, у яких буде розміщено певний атрибут і відповідне йому значення
  • attribute = атрибут, який буде використано. Бажано використовувати атрибут, унікальний для елемента, наприклад ім’я або ідентифікатор.
  • значення = відповідне значення вибраного атрибута.

Крок 1) перейдіть до Mercury Сторінка реєстрації на тури https://demo.guru99.com/test/newtours/register.php і перевірте текстове поле «Прізвище». Зверніть увагу на тег HTML (у цьому випадку «вхід») і назву («прізвище»).

Тег і атрибут - CSS Selector

Крок 2) In Selenium IDE, введіть «css=input[name=lastName]» у Target і натисніть Знайти. Selenium IDE повинна успішно отримати доступ до поля «Прізвище».

Тег і атрибут - CSS Selector

Якщо кілька елементів мають однаковий HTML-тег і атрибут, буде розпізнано лише перший. Така поведінка схожа на пошук елементів за допомогою селекторів CSS з тим самим тегом і класом.

тег, клас і атрибут – CSS Selector

синтаксис

css=tag.class[attribute=value]

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

Крок 1) Перейдіть на демонстраційну сторінку https://demo.guru99.com/test/facebook.html і використовуйте Firebug, щоб перевірити поля введення «Електронна пошта або телефон» і «Пароль». Зверніть увагу на тег, клас і атрибути HTML. Для цього прикладу ми виберемо їхні атрибути 'tabindex'.

Тег, клас і атрибут - CSS Selector

Крок 2) Спочатку ми отримаємо доступ до текстового поля «Електронна пошта або телефон». Таким чином, ми будемо використовувати значення tabindex 1. Введіть «css=input.inputtext[tabindex=1]» у Selenium IDE Target і натисніть Знайти. Поле введення «Електронна пошта або телефон» має бути виділено.

Тег, клас і атрибут - CSS Selector

Крок 3) Щоб отримати доступ до поля введення пароля, просто замініть значення атрибута tabindex. Введіть «css=input.inputtext[tabindex=2]» у полі Target і натисніть кнопку Знайти. Selenium IDE має мати можливість успішно ідентифікувати текстове поле пароля.

Тег, клас і атрибут - CSS Selector

внутрішній текст – CSS Selector

Як ви могли помітити, міткам HTML рідко надають атрибути id, name або class. Отже, як нам отримати до них доступ? Відповідь полягає у використанні їхніх внутрішніх текстів. Внутрішні тексти — це фактичні шаблони рядків, які мітка HTML показує на сторінці.

синтаксис

css=tag:contains("inner text")

  • tag = тег HTML елемента, до якого здійснюється доступ
  • внутрішній текст = внутрішній текст елемента

Крок 1) перейдіть до Mercury Домашня сторінка турів https://demo.guru99.com/test/newtours/ і використовуйте Firebug, щоб дослідити мітку «Пароль». Зверніть увагу на його тег HTML (який у цьому випадку є «шрифтом») і зауважте, що він не має атрибутів класу, ідентифікатора чи імені.

Внутрішній текст - CSS Selector

Крок 2) тип css=font:contains(“Пароль:”) в Selenium IDE Target і натисніть Знайти. Selenium IDE має мати доступ до мітки пароля, як показано на зображенні нижче.

Внутрішній текст - CSS Selector

Крок 3) Цього разу замініть внутрішній текст на «Boston», щоб ваш Target тепер стане “css=font:contains(“Boston”)”. Натисніть Знайти. Слід помітити, що напис «Бостон — Сан-Франциско» стає виділеним. Це показує вам це Selenium IDE може отримати доступ до довгої мітки, навіть якщо ви просто вказали перше слово її внутрішнього тексту.

Внутрішній текст - CSS Selector

Підсумки

Синтаксис для визначення місця розташування за використанням селектора CSS

Метод Target синтаксис Приклад
Тег та ID css=tag#id css=input#email
Тег і клас css=tag.class css=input.inputtext
Тег і атрибут css=тег[атрибут=значення] css=вхід[ім'я=прізвище]
Тег, клас і атрибут css=tag.class[атрибут=значення] css=input.inputtext[tabindex=1]