Меню

Як використовувати селектор CSS для ідентифікації веб-елементів для сценаріїв селену - Підручник з селену №6

how use css selector

Спробуйте Наш Інструмент Для Усунення Проблем

В нашому попередній підручник із селену , ми вивчили різні типи локаторів. Ми також дізналися, як використовувати: ідентифікатори, ClassName, Name, Text Link та XPath локатори для ідентифікації веб-елементів на веб-сторінці.

На продовження цього сьогодні ми дізнаємось як використовувати CSS Selector як локатор . Це наш 6-й підручник у нашому безкоштовна серія Навчальна селена .

Використання CSS Selector як локатора:

CSS Selector - це комбінація селектора елемента та значення селектора, що ідентифікує веб-елемент на веб-сторінці. Складений елемент селектора елемента та значення селектора відомий як шаблон селектора.

Локатор селену CSS Selector

Шаблон селектора побудований з використанням тегів HTML, атрибутів та їх значень. Центральна тема процедури створення CSS Selector та Xpath дуже схожа, що лежить в основі єдиної різниці в їх протоколі побудови.

Як і Xpath, селектор CSS може також знаходити веб-елементи, що не мають ідентифікатора, класу чи імені.

найкращий засіб очищення реєстру для Windows 7 64 bit

Отже, рухаючись вперед, давайте обговоримо примітивні типи CSS-селекторів:

Використання CSS Selector як локатора

Що ви дізнаєтесь:

Селектор CSS: ідентифікатор

У цьому зразку ми отримаємо доступ до текстового поля “Електронна пошта”, яке є у формі для входу на Gmail.com.

Текстове поле електронної пошти має атрибут ID, значення якого визначається як “Електронна пошта”. Таким чином, атрибут ID та його значення можна використовувати для створення CSS Selector для доступу до текстового поля електронної пошти.

Створення селектора CSS для веб-елемента

Крок 1 : Знайдіть / огляньте веб-елемент (текстове поле 'Електронна пошта' в нашому випадку) і зауважте, що тег HTML є 'вхідним', а значення атрибута ID - 'Електронна пошта', і обидва вони спільно посилаються на 'Текстове поле електронної пошти'. Отже, наведені вище дані будуть використані для створення CSS Selector.

Використання CSS Selector як локатора 2

Перевірте значення локатора

Крок 1 : Введіть “css = input # Email”, тобто значення локатора в поле призначення в IDE Selenium і натисніть кнопку Знайти. Зверніть увагу, що поле Текст електронної пошти буде виділено.

Використання CSS Selector як локатора 3

Синтаксис

css =

  • Тег HTML - Це тег, який використовується для позначення веб-елемента, до якого ми хочемо отримати доступ.
  • # - Знак хеш використовується для символізації атрибута ID. Якщо атрибут ID використовується для створення селектора CSS, обов’язково використовувати хеш-знак.
  • Значення атрибута ID - Це значення атрибута ID, до якого здійснюється доступ.
  • Значенню ID завжди передує знак хешу.

Примітка: Також застосовується для інших типів селекторів CSS

  • Визначаючи CSS Selector у цільовому текстовому полі Selenium IDE, завжди пам’ятайте, щоб перед ним ставився префікс “css =”.
  • Послідовність вищезазначених артефактів незмінна.
  • Якщо два або більше веб-елементів мають однакові HTML-теги та значення атрибутів, буде позначено перший елемент, позначений у джерелі сторінки.

Селектор CSS: Клас

У цьому зразку ми отримаємо доступ до прапорця 'Залишатися в системі' під формою для входу на gmail.com.

Прапорець «Залишатися в системі» має атрибут Class, значення якого визначається як «запам'ятати». Таким чином, атрибут Class та його значення можуть бути використані для створення селектора CSS для доступу до призначеного веб-елементу.

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

Створення селектора CSS для веб-елемента

Крок 1 : Знайдіть / огляньте веб-елемент (у нашому випадку прапорець «Залишатися в системі») і зауважте, що тег HTML - це «мітка», а значення атрибута ID - «пам’ятати», і обидва вони спільно посилаються на «Залишатися підписаним у прапорці ”.

Перевірте значення локатора

Крок 1 : Введіть “css = label.remember”, тобто значення локатора в цільовому полі в середовищі IDE Selenium і натисніть кнопку Знайти. Зверніть увагу, що прапорець “Залишатися в системі” буде виділено.

Використання CSS Selector як локатора 4

Синтаксис

css =

  • . - Знак крапки використовується для символізації атрибута класу. Обов’язковим є використання крапкового знака, якщо атрибут Class використовується для створення селектора CSS.
  • Значенню Class завжди передує крапковий знак.

Селектор CSS: Атрибут

У цьому зразку ми отримаємо доступ до кнопки «Увійти», яка знаходиться під формою для входу на gmail.com.

Кнопка «Увійти» має атрибут типу, значення якого визначається як «надіслати». Таким чином, атрибут type та його значення можна використовувати для створення селектора CSS для доступу до призначеного веб-елементу.

Створення селектора CSS для веб-елемента

Крок 1 : Знайдіть / огляньте веб-елемент (у нашому випадку кнопка «Увійти») і зауважте, що тег HTML є «вхідним», атрибут - тип, а значення атрибута типу - «подати», і всі вони разом роблять посилання на кнопку 'Увійти'.

Перевірте значення локатора

Крок 1 : Введіть “css = input (type =’ submit ’)”, тобто значення локатора в цільовому полі в середовищі IDE Selenium і натисніть кнопку Знайти. Зверніть увагу, що кнопка “Увійти” буде виділена.

Використання CSS Selector як локатора 5

Синтаксис

css =

  • Атрибут - Це атрибут, який ми хочемо використовувати для створення селектора CSS. Він може мати значення, тип, ім’я тощо. Рекомендується вибрати атрибут, значення якого однозначно ідентифікує веб-елемент.
  • Значення атрибута - Це значення атрибута, до якого здійснюється доступ.

Селектор CSS: ідентифікатор / клас та атрибут

У цьому зразку ми отримаємо доступ до текстового поля „Пароль”, яке є у формі для входу на gmail.com.

У текстовому полі 'Пароль' є атрибут ID, значення якого визначено як 'Passwd', атрибут типу, значення якого визначено як 'пароль'. Таким чином, атрибут ID, атрибут type та їх значення можуть бути використані для створення CSS Selector для доступу до призначеного веб-елементу.

найкращий інструмент огляду коду для git - -

Створення селектора CSS для веб-елемента

Крок 1 : Знайдіть / огляньте веб-елемент (текстове поле 'Пароль' у нашому випадку) і зауважте, що тег HTML є 'вхідним', атрибути - ідентифікатор і тип, а відповідні їм значення - 'Passwd' і 'пароль', і всі вони разом зробіть посилання на текстове поле «Пароль».

Перевірте значення локатора

Крок 1 : Введіть 'css = input # Passwd (name = 'Passwd')', тобто значення локатора в цільовому полі в IDE Selenium і натисніть кнопку 'Знайти'. Зверніть увагу, що текстове поле 'Пароль' буде виділено.

Використання CSS Selector як локатора 5

Синтаксис

css =

Два або більше атрибутів також можуть бути представлені в синтаксисі.Наприклад, 'Css = input # Passwd (type = 'password') (name = 'Passwd')'.

Селектор CSS: підрядок

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

Види механізмів

Усі механізми, що знаходяться внизу, мають символічне значення.

  • Зіставте префікс
  • Установіть відповідність між суфіксами
  • Зіставте підрядок

Обговоримо їх детально.

Зіставте префікс

Він використовується для відповідності рядку за допомогою відповідного префікса.

Синтаксис

css =

  • ^ - Символічне позначення, що відповідає рядку за допомогою префікса.
  • Префікс - Це рядок, на основі якого виконується операція збігу. Очікується, що ймовірний рядок розпочнеться із зазначеного рядка.

Наприклад: Давайте розглянемо “Текстове поле для пароля”, тому відповідний селектор CSS буде:

css = input # Passwd (name ^ = 'Pass')

Установіть відповідність між суфіксами

Він використовується для відповідності рядку за допомогою відповідного суфікса.

Синтаксис

css =

  • # - Символічне позначення, що відповідає рядку за допомогою суфікса.
  • Суфікс - Це рядок, на основі якого виконується операція збігу. Очікується, що ймовірний рядок закінчується вказаним рядком.

Наприклад,Давайте знову розглянемо “Текстове поле для пароля”, тому відповідний селектор CSS буде:

css = input # Passwd (name $ = ’wd’)

Зіставте підрядок

Він використовується для відповідності рядку за допомогою відповідного підрядка.

Синтаксис

css =

  • * - Символічне позначення, що відповідає рядку за допомогою підрядка.
  • Підрядковий рядок - Це рядок, на основі якого виконується операція збігу. Очікується, що ймовірний рядок має вказаний зразок рядка.

Наприклад,давайте знову розглянемо “Текстове поле Пароль”, тому відповідний CSS Selector буде:

css = input # Passwd (name $ = ’wd’)

Селектор CSS: Внутрішній текст

Внутрішній текст допомагає нам ідентифікувати та створити CSS Selector, використовуючи рядок, який HTML-тег відображає на веб-сторінці.

Подумайте: 'Потрібна допомога?' гіперпосилання під формою для входу на gmail.com.

Тег прив'язки, що представляє гіперпосилання, містить текст, укладений всередині. Таким чином, цей текст можна використовувати для створення селектора CSS для доступу до призначеного веб-елементу.

Синтаксис:

css =

  • : - Знак точки використовується для символізації методу містить
  • Містить - це значення атрибута Class, до якого здійснюється доступ.
  • Текст - текст, який відображається в будь-якому місці веб-сторінки, незалежно від його місцезнаходження.

Це одна з найбільш часто використовуваних стратегій пошуку веб-елемента через його спрощений синтаксис.

Завдяки тому, що створення CSS Selector та Xpath вимагає великих зусиль та практики, таким чином, цей процес здійснюють лише більш досвідчені та навчені користувачі.

Наступний підручник No7 : Продовжуючи наступний підручник, ми скористаємось можливістю, щоб представити вам розширення стратегій пошуку. Таким чином, у наступному підручнику ми вивчимо механізм пошуку веб-елементів у Google Chrome та Internet Explorer.

скільки постачальників послуг електронної пошти

Ми розглядаємо Selenium Locators більш докладно, оскільки це є важливою частиною створення Selenium Script.

Повідомте нам про ваші запитання / коментарі нижче.

Рекомендована література

^