Селекторы CSS в Selenium используются для идентификации желаемого пользователем веб-элемента HTML. Это вписывается в стратегию локаторов элементов автоматизированной разработки тестов, где основной целью является взаимодействие с элементами страницы с помощью различных типов локаторов. Хотя существует несколько других методов определения локатора элемента, таких как идентификатор, имя, имя класса, текст ссылки, частичный текст ссылки, XPath, имя тега и т. д., кроме селекторов CSS в Selenium, мы предпочитаем способ CSS из-за следующих преимуществ.
Новичок в CSS-селекторах? Ознакомьтесь с этой Шпаргалкой Ultimate CSS Selector, чтобы повысить свою карьеру веб-дизайнера.
Если вы новичок в Selenium и вам интересно, что это такое, мы рекомендуем ознакомиться с нашим руководством — Что такое Selenium?
Кроме того, попробуйте эту онлайн-сеть Selenium Grid для запуска сценариев автоматического тестирования браузера: https://www.lambdatest.com/selenium-automation
Зачем выбирать селекторы CSS в Selenium, а не другие идентификаторы элементов?
- Более быстрая идентификация и сокращенное время выполнения теста. По сравнению с XPath CSS-селекторы в Selenium, как правило, лучше идентифицируют элементы, поскольку большинство используемых браузеров, таких как Chrome и Firefox, настроены на лучшую производительность с CSS-селекторами в Selenium. Вот ссылка, которая предоставляет статистику производительности для справки.
- Наличие лучшей документации.
- Улучшенная читаемость.
Различные способы идентификации селекторов CSS в Selenium
Давайте обсудим различные способы идентификации CSS Selenium локаторов веб-элементов.
Загадка выбора класса
‘.’ представляет класс в CSS и используется для идентификации веб-элементов с определенным классом. Например, если наш веб-элемент p состоит из класса, указанного ниже. Следующее может быть связано с программированием XPath для идентификации класса с именем тега [@class = 'value'] или может также быть связано с локатором элемента имени класса в Selenium.
<p class=" pages-sub-title"> Lambda Test blog post on validating CSS Selectors in Selenium </p>
Селектор CSS в Selenium для того же самого может быть идентифицирован с именем класса как“.page-sub-title”
Синтаксис CSS в Selenium селектора класса будет -<.> < Class Name> (or)
<.>
Эта сертификация предназначена для всех, кто хочет оставаться впереди среди профессионалов, которые строят свою карьеру в области автоматизированного тестирования Selenium.
Вот краткий обзор сертификации Selenium 101 от LambdaTest:
Автоматизируйте тесты Cypress и выполняйте автоматизированное тестирование браузера с помощью LambdaTest. Наша облачная инфраструктура включает более 3000 настольных и мобильных сред: https://www.lambdatest.com/blog/cypress-test-automation-framework/
Загадка выбора идентификатора
«#» представляет идентификатор в CSS и используется для идентификации веб-элементов с определенным идентификатором. Ниже приведен пример сопоставления веб-элемента с идентификатором. Если вы наблюдаете это на высоком уровне, это можно сравнить с селектором имени идентификатора с использованием методов Selenium, а также с поиском элемента с идентификатором в программировании XPath, например, с именем тега [@id = ‘id_value’].
<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143"> <a href="https://www.lambdatest.com/blog/category/lambdatest-updates/">Product Updates</a> </li>
Селектор CSS в Selenium для того же самого может быть идентифицирован с именем класса как
#menu-item-143 или div#menu-item-143
Синтаксис CSS в Selenium для селектора ID будет –<#> < ID Name> (or)
<#>
Загадка выбора атрибута
Атрибуты могут быть представлены парами ключ-значение, например, в приведенном ниже примере у нас есть несколько атрибутов и значений, таких как «роль = диалог», «данные-закрыть = модальный» и т. д. Версия программирования Xpath селектора атрибута может быть соотнесена с тегом имя [@attribute key = 'значение атрибута'].
<div class="modal fade" id="whitepaper-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <span class="close" data-dismiss="modal" style="top: 4px; position: absolute; right: 10px;"> <span aria-hidden="true">×</span> </span>
Селектор CSS в Selenium для того же самого может быть идентифицирован с именем класса как div[role=’dialog’] or [role=’dialog’]
«Класс или идентификатор» и загадка выбора атрибута
Комбинация класса или идентификатора и атрибута может служить лучшей стратегией, которая является более мощной, чем использование только селектора класса, идентификатора или атрибута. Чтобы добиться уникальности элемента, если вышеперечисленные 3 способа идентификации не работают из-за нескольких экземпляров одного и того же локатора, это может быть решением. Давайте возьмем стратегию поиска элементов для приведенного ниже примера из нашего блога LambdaTest.
<nav id="site navigation" class="navigation main-navigation" role="navigation">
В приведенном выше фрагменте HTML, если вы заметили, что в имени класса есть пробел, который является «navigation main-navigation», это может быть представлено как navigation.main-navigation space можно игнорировать и заменить на «.».
Селектор CSS в Selenium для того же можно определить, как показано ниже:
nav.navigation.main-navigation[role='navigation']
Синтаксис CSS в Selenium селектора класса или идентификатора и атрибута будет таким:
<HTML Tag> <Class Or ID> [ <attribute key> = ‘<attribute value>’ ]
or
<Class Or ID> [ <attribute key> = ‘<attribute value>’ ]
Головоломка соответствия подстроки
Чтобы включить даже мощную технику запросов, мы можем использовать совпадения подстрок с указанным префиксом ^, суффиксом $ и *, указывающим подстроку. Если внимательно присмотреться, это похоже на представление функций XPath, таких как «начинается с», «содержит» и «заканчивается». Давайте подробно рассмотрим использование всех трех способов обращения со спичками.
^ Указание совпадения префикса
Синтаксис:
<HTML Tag> [ <Class Or ID> ^= <Class or ID Name> ]
Пример:
div[class^=’aria-label’]
$ Указывает совпадение суффикса
Синтаксис:
<HTML Tag> [ <Class Or ID> $= <Class or ID Name> ]
Пример:
a[class$=’aria-label’]
* Указание совпадения подстроки
Синтаксис:
<HTML Tag> [ <Class Or ID> *= <Class or ID Name> ]
Пример
p[class*=’aria-label’]
Загадка внутреннего текста:
Один из самых легко читаемых синтаксисов, но мощный. Вы можете использовать этот механизм для идентификации текста в любом месте DOM с помощью шаблона строки.
Синтаксис:
<HTML Tag> <:> <contains> < (text) >
Пример
div:contains("^lambdatest$")
«Навигация по дочерним элементам» — дочерняя головоломка:
Это расширенный способ обработки локаторов элементов через селекторы CSS в Selenium при навигации по дочерним элементам. Есть три возможности, как показано ниже:
- Прямой ребенок
- Дочерний ребенок
- N-й ребенок
Прямой ребенок
Прямой потомок к родительскому локатору представлен символом «›». Предположим, у нас есть тег кнопки внутри тега div, который является прямым дочерним элементом, как показано во фрагменте HTML ниже.
Пример:<div class="lambdatest-xs-ng">
<button id="tertiary" class="sidebar-container" role="complementary">
div — родительский локатор, а кнопка — дочерний локатор, представленный как:div.lambdatest-xs-ng>button
Синтаксис:Parentlocator > directchildlocator
Дочерний ребенок или ребенок
Идентификация дочернего элемента включает в себя тот же способ идентификации элементов, что и для прямого дочернего элемента, но мы можем игнорировать символ «›» в качестве дочернего элемента, как показано в примере ниже.
Пример:
<div id="primary" class="content area"> <div id="content" class="site content" role="main"> <header class="archive header"> <h1 class="archive title">Category Archives : Infographics </h1>
Sub Child или child будут представлены как:
div#primary header
Синтаксис:
<parent locator=""> <child locator=""> or <sub child="" locator=""></sub></child></parent>
N-й дочерний элемент для выбора определенного значения из списка
Это расширенный способ обработки локаторов элементов через селекторы CSS в Selenium при навигации по дочерним элементам. Есть три возможности, как показано ниже:
- Прямой ребенок
- Дочерний ребенок
- N-й ребенок
Прямой ребенок
Прямой потомок к родительскому локатору представлен символом «›». Предположим, у нас есть тег кнопки внутри тега div, который является прямым дочерним элементом, как показано во фрагменте HTML ниже.
Пример:
<div class="lambdatest-xs-ng"> <button id="tertiary" class="sidebar-container" role="complementary">
div — родительский локатор, а кнопка — дочерний локатор, представленный как:
div.lambdatest-xs-ng>button
Синтаксис:
Parentlocator > directchildlocator
Дочерний ребенок или ребенок
Идентификация дочернего элемента включает в себя тот же способ идентификации элементов, что и для прямого дочернего элемента, но мы можем игнорировать символ «›» в качестве дочернего элемента, как показано в примере ниже.
Пример:
<div id="primary" class="content area"> <div id="content" class="site content" role="main"> <header class="archive header"> <h1 class="archive title">Category Archives : Infographics </h1>
Sub Child или child будут представлены как:
div#primary header
Синтаксис:
<Parent locator> <child locator> or <sub child locator>
N-й дочерний элемент для выбора определенного значения из списка
Концепция N-го потомка будет полезна при навигации по упорядоченным или неупорядоченным элементам списка. N становится номером желаемого списка, который пользователь хочет выбрать. Давайте рассмотрим пример ниже, чтобы понять, как работает n-й дочерний элемент. Я не
Пример:
<<ul id = "lambdaTestBrowsers"> <li>Chrome</li> <li>Firefox</li> <li>Edge</li> <li>Safari</li> </ul>
N-й дочерний элемент firefox из списка тестовых лямбда-браузеров будет представлен как:
#lambdaTestBrowsers li:nth-child(2)
Синтаксис:
<HTML Tag> <Clas or ID> <list> <:> <nth-child (number of desired item in the list)>
Используете ли вы Playwright для автоматизированного тестирования? Мгновенно запускайте тестовые сценарии Playwright в более чем 50 комбинациях браузера и ОС с помощью облака LambdaTest. Зарегистрируйтесь бесплатно: https://www.lambdatest.com/playwright-testing
Заключение
Мы столкнулись с различными стратегиями идентификации через вышеупомянутые загадки локатора элементов. Чтобы ознакомиться с селекторами CSS в Selenium, отправив запрос, вы можете использовать инструменты разработчика Chrome, а также есть инструмент с открытым исходным кодом для того же, чтобы попробовать и просмотреть результаты в более интерактивном режиме на http://flukeout.github.io/ . Мы также обсудили преимущества использования селекторов CSS в Selenium по сравнению с другими локаторами элементов. Один из основных недостатков селекторов CSS в Selenium заключается в том, что обход DOM невозможен с помощью CSS, как в XPath. Мы можем переходить от дочернего к родительскому и от родительского к дочернему, используя XPath. Но мы можем перемещаться от родителя к дочернему только с помощью селекторов CSS в Selenium. Если у вас есть какие-либо вопросы или предложения относительно селекторов CSS, оставьте комментарий ниже, и я буду рад пообщаться. Получайте удовольствие от поиска элементов с помощью селекторов CSS. Удачного тестирования!
