Селектор CSS в Selenium

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

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

CSS-селекторы в Selenium Они бывают разных форм, но в этом руководстве рассматриваются пять наиболее распространенных шаблонов, используемых в Selenium ИДЕ:

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

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

Зачем использовать CSS-селекторы? Selenium?

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

К основным преимуществам использования CSS-селекторов относятся:

• Производительность: CSS-селекторы обрабатываются собственным движком браузера, поэтому они выполняются быстрее, чем эквивалентные выражения XPath, особенно в старых браузерах, таких как Internet Explorer.
• Гибкость: Они объединяют логику тегов, классов, атрибутов и частичного соответствия, позволяя тестировщикам нацеливаться на элементы, не имеющие стабильного идентификатора.
• Читаемость: Синтаксис повторяет то, как разработчики уже пишут правила CSS, что сокращает время обучения как для инженеров по контролю качества, так и для фронтенд-команд.
• Стабильность работы в разных браузерах: CSS-селекторы ведут себя одинаково во всех браузерах Chrome. FirefoxEdge и Safari позволяют снизить количество нестабильных сбоев при тестировании.

Тег и ID – CSS-селектор

В этом примере используется текстовое поле «Электронная почта» на странице входа в Facebook. Элемент имеет идентификатор «e-mail«…и к нему уже обращались в разделе «Поиск по ID». Теперь тот же элемент нацелен с помощью…» Selenium CSS-селектор с атрибутом ID.

Синтаксис

css=tag#id

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

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

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

Обратите внимание, что HTML-тег — это «вход«и его идентификатор — «e-mailТаким образом, полный CSS-селектор становится следующим:css=вход#электронная почта».

Шаг 2) Войти "css=вход#электронная почта”В Target коробка Selenium IDE и нажмите кнопку «Найти». Selenium IDE выделяет соответствующий элемент на странице.

Теги и классы – CSS-селектор

CSS-селектор в Selenium Использование HTML-тега и имени класса основано на том же принципе, что и использование тега и идентификатора, но точка (.) заменяет знак решетки.

Синтаксис

css=tag.class

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

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

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

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

На предыдущем рисунке выделено только поле для ввода адреса электронной почты или номера телефона, поскольку оно отображается первым в исходном коде страницы.

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

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

Синтаксис

css=tag[attribute=value]

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

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

Шаг 2) In Selenium IDE, введите «css=вход[имя=фамилия]"В Target и нажмите Найти. Selenium IDE успешно находит поле «Фамилия».

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

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

Синтаксис

css=tag.class[attribute=value]

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

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

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

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

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

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

Синтаксис

css=tag:contains("inner text")

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

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

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

Шаг 3) На этот раз замените внутренний текст на «Бостон», чтобы Target становится «css=font:contains(“Boston”)Нажмите «Найти». Подсветка «Бостон — Сан-Франциско» демонстрирует, что Selenium IDE может обнаружить длинную метку, даже если указано только первое слово её внутреннего текста.

CSS-селектор против XPath в Selenium

Для идентификации веб-элементов используются как CSS-селекторы, так и XPath. SeleniumОднако у них разные преимущества. В таблице ниже сравниваются две стратегии поиска по ключевым параметрам:

Критерии	CSS Selector	XPath
Скорость	Быстрее, работает на собственном движке браузера.	Работает медленнее, особенно в старых браузерах.
Руководство	Только пересылка (от родителя к ребенку)	Вперед и назад (от ребенка к родителю)
Синтаксис	Более короткие и похожие на правила CSS.	Более длинные, иерархические выражения путей
Сопоставление текста	Ограничено псевдоклассом :contains()	Строгие функции text() и contains()
лучше всего для	Статические макеты и современные веб-приложения	Сложный обход DOM и текстовые локаторы

Рекомендации по написанию CSS-селекторов Selenium

Написание надежных CSS-селекторов выходит за рамки простого знания синтаксиса. Следующие методы помогают тестировщикам создавать стабильные и поддерживаемые селекторы. Selenium Скрипты, сохраняющие свою работоспособность после изменений пользовательского интерфейса:

1. Предпочтение отдается уникальным характеристикам: Всегда выбирайте атрибуты id, data-test-id или name, которые явно добавляются для автоматизации. Они остаются неизменными даже при изменении визуального макета.
2. Избегайте чрезмерно вложенных селекторов: Длинные цепочки, такие как div > div > ul > li > a При рефакторинге разметки разработчики часто допускают ошибки. Старайтесь, чтобы селекторы были как можно короче.
3. Используйте частичные совпадения с умом: Такие модели, как [class*="btn-primary"] Допускаются небольшие изменения имен классов, но они также могут соответствовать непредусмотренным элементам.
4. Избегайте использования локаторов на основе индексов: Селекторы, такие как nth-child(3) Они ненадежны, потому что добавление соседнего элемента сдвигает все позиции.
5. Проверка селекторов в инструментах разработчика: Перед запуском Selenium Для вставки выбранного фрагмента скрипта в консоль разработчиков Chrome используйте... document.querySelector() чтобы убедиться, что возвращается ровно один элемент.
6. Для уникальности сочетайте различные атрибуты: Если класс используется многими элементами, добавьте фильтр атрибутов, например: input.form-control[name="email"] для уточнения цели.
7. Документирование и повторное использование: Централизуйте селекторы внутри класса Page Object, чтобы одно обновление исправляло все проверки, ссылающиеся на один и тот же элемент.

Следование этим рекомендациям снижает нестабильность, повышает скорость выполнения тестов и делает их более эффективными. Selenium Такие номера проще обслуживать в течение длительного времени.

Краткое описание: Краткий справочник по синтаксису селекторов CSS

В таблице ниже приведена сводная информация по всем пунктам. Selenium В этом руководстве рассматривается следующий шаблон CSS-селектора:

Способ доставки	Target Синтаксис	Пример
Тег и идентификатор	css=тег#id	css=вход#электронная почта
Тег и класс	css=tag.класс	css=input.inputtext
Тег и атрибут	css=тег[атрибут=значение]	css=вход[имя=фамилия]
Тег, класс и атрибут	css=тег.класс[атрибут=значение]	css=input.inputtext[tabindex=1]
Внутренний текст	css=tag:contains(“text”)	css=font:contains(“Пароль:”)

Часто задаваемые вопросы (FAQ)