Как найти элементы с помощью селектора CSS в Selenium

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

Введение в селекторы CSS

Селекторы CSS позволяют выбирать элементы HTML на основе идентификатора, класса, атрибута, позиции в дереве DOM и т. д. Вот некоторые из наиболее часто используемых селекторов CSS:

Селектор ID – Выбирает элемент на основе его уникального идентификатора. Например #main-header выберет элемент с id="main-header".
Селектор класса – Выбирает элементы на основе имени класса. Например .article выберет все элементы с class="article".
Селектор атрибутов – Выбирает элементы на основе определенного атрибута или значения атрибута. Например input[type="text"] выберет все элементы ввода с type="text".
Селектор потомков – Выбирает элементы, являющиеся потомками другого указанного элемента. Например div p выберет все элементы p внутри элементов div.
Дочерний селектор – Выбирает элементы, которые являются прямыми дочерними элементами другого указанного элемента. Например div > p выберет p элементов, которые являются прямыми дочерними элементами div.
Селектор соседнего родственного элемента – Выбирает родственный элемент, который следует сразу за другим элементом. Например h2 + p выберет элемент p, который идет сразу после элемента h2.
Общий выбор родственного уровня – Выбирает все родственные элементы, следующие за другим элементом. Например h2 ~ p выберет все элементы p, которые идут после элемента h2.

Это всего лишь несколько примеров из множества типов селекторов CSS. Вы можете комбинировать несколько селекторов для целевых элементов особым образом.

Поиск элементов с помощью селектора CSS в Selenium

Selenium предоставляет два основных метода поиска элементов с помощью селекторов CSS:

driver.find_element_by_css_selector()

Этот метод вернет первый соответствующий элемент.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

Этот метод вернет список всех совпадающих элементов.

elements = driver.find_elements_by_css_selector(‘.article‘)

При использовании этих методов вы передаете селектор CSS в виде строки. Вот несколько примеров того, как можно найти элементы с помощью разных селекторов:

Автор:

driver.find_element_by_css_selector(‘#signup-form‘)

Поклассу:

driver.find_element_by_css_selector(‘.footer-links‘)

По атрибуту:

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

Потомок:

driver.find_element_by_css_selector(‘div#content p.summary‘)

Ребенок:

driver.find_element_by_css_selector(‘ul.menu > li.active‘)

Соседний брат:

driver.find_element_by_css_selector(‘h1 + p.intro‘)

Общий брат:

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

Как видите, селекторы CSS предоставляют множество возможностей для выбора элементов различными способами.

Советы по написанию эффективных селекторов CSS

Вот несколько советов, которым следует следовать при написании селекторов CSS для поиска элементов в Selenium:

Будьте как можно более конкретными. Используйте идентификатор, класс, атрибуты и несколько селекторов вместе, чтобы точно нацеливаться на элементы. Это позволяет избежать ложноположительных совпадений.
Предпочитайте класс имени тега. Имена тегов, такие как div, p, a и т. д., не очень различимы. Классы позволяют более конкретизировать таргетинг.
Используйте уникальные атрибуты, такие как имя или заголовок. Атрибуты имени и заголовка обычно имеют уникальные значения, которые могут определить один элемент.
Используйте одноуровневые селекторы осторожно. Смежные и общие одноуровневые селекторы могут соответствовать большему количеству элементов, чем предполагалось, если они написаны неправильно.
Избегайте сложных вложенных селекторов. Объединение множества селекторов-потомков может привести к поломке селекторов. Постарайтесь ограничить каждый селектор 3-4 связанными между собой уровнями.
Разбейте длинные селекторы на несколько строк — селекторы CSS не обязательно должны быть однострочными. Разбивка их на несколько строк может улучшить читабельность.

Следование этим советам поможет вам написать надежные и удобные в обслуживании селекторы CSS для автоматизации веб-тестов.

Распространенные примеры и варианты использования

Теперь давайте посмотрим на некоторые распространенные примеры того, как селекторы CSS используются для очистки веб-страниц и тестирования браузера с помощью Selenium:

Выбор навигационных ссылок

Чтобы выбрать основные навигационные ссылки, мы можем использовать селектор классов:

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

Выбор полей формы

Мы можем выбрать поля ввода формы на основе тега ввода и атрибута типа:

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

Выбор строк и столбцов таблицы

Селекторы CSS упрощают выбор определенных строк и ячеек в таблице HTML:

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

Выбор дочерних элементов

Чтобы выбрать только прямые дочерние элементы контейнера, мы можем использовать дочерний селектор:

children = driver.find_elements_by_css_selector(‘#container > div‘)

Выбор элементов на основе текста

Мы можем частично сопоставить текст ссылки, используя селектор *:

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

Эти примеры демонстрируют, как селекторы CSS можно использовать в реальных сценариях автоматизации тестирования.

Использование селекторов CSS на других языках

До сих пор в примерах использовался Python, но селекторы CSS можно использовать в любых языковых привязках для Selenium:

Java

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

JavaScript

// $ 
const element = await driver.$(‘div.main #login-form‘);

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

Поиск элементов по имени класса

Распространенным вариантом использования является поиск элементов по имени класса. Вот несколько советов по выбору по классам в Selenium:

Сопоставьте точное имя класса – driver.find_element_by_class_name(‘primary-btn‘)
Используйте селектор классов CSS – driver.find_element_by_css_selector(‘.primary-btn‘)
Частичное совпадение нескольких классов – driver.find_element_by_css_selector(‘.primary.btn‘)
Сопоставить потомка с классом – driver.find_element_by_css_selector(‘div .primary-btn‘)
Используйте несколько классов для уникальности – driver.find_element_by_css_selector(‘.primary-btn.large‘)

Сопоставление по имени класса очень полезно, но обязательно выбирайте классы, уникальные на странице.

Поиск элементов по имени тега

Поиск элементов по имени HTML-тега — еще одна распространенная задача Selenium. Вот некоторые примеры:

Найдите первый экземпляр имени тега:

element = driver.find_element_by_tag_name(‘button‘)

Найдите все экземпляры имени тега:

buttons = driver.find_elements_by_tag_name(‘button‘)

Объедините с селектором CSS:

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

Поскольку имена тегов типа <div> и <span> распространены, попробуйте также использовать идентификаторы, классы или атрибуты для уникальной идентификации элемента.

Поиск элементов по имени или идентификатору

Если элементы имеют атрибуты id или name, самый простой вариант — найти по имени или идентификатору.

Найти по точному идентификатору:

element = driver.find_element_by_id(‘signup-form‘)

Найти по точному названию:

element = driver.find_element_by_name(‘email‘)

Локаторы идентификаторов и имен будут соответствовать только точным значениям атрибутов. Это делает их очень специфичными, но также склонными к взлому при изменении идентификаторов или имен.

Поиск элементов с помощью XPath и CSS-селектора

XPath — еще одна распространенная стратегия расположения элементов в Selenium. Так когда же следует использовать селекторы XPath или CSS?

Вот некоторые отличия:

читабельность – Селекторы CSS более читабельны и понятны большинству разработчиков.
Обслуживание – Селекторы CSS менее хрупкие и склонны к сбоям в изменениях по сравнению с длинными сложными XPath.
Возможности – XPath может получить доступ к некоторым свойствам элемента, которые недоступны селекторам CSS, например к текстовому содержимому.
Перфоманс – Селекторы CSS быстрее сопоставляются браузерами по сравнению со сложными XPath.

В общем, отдавайте предпочтение селекторам CSS из-за удобства обслуживания и производительности. Используйте XPath только тогда, когда необходимо получить доступ к чему-то, что невозможно с помощью CSS.

Лучшие практики при использовании селекторов CSS

Вот несколько рекомендаций, которым следует следовать при поиске элементов с помощью селекторов CSS:

Отдавайте предпочтение уникальности, а не сложности. По возможности избегайте длинных цепочек вложенных селекторов.
Используйте идентификаторы и классы вместо имен тегов и вложенности.
Постарайтесь собрать 3 или меньше связанных уровней. Чем больше уровней, тем выше хрупкость.
Избегайте универсальных селекторов, таких как * – Они склонны к ложноположительным совпадениям.
Разбейте длинные селекторы на несколько строк. Улучшает читаемость.
Кэшировать часто используемые селекторы. Сохраняет повторяющиеся поиски селекторов.
Используйте описательные имена селекторов. Помогает прояснить намерение и избежать магических строк.

Следование этим рекомендациям поможет написать надежные, читаемые и надежные селекторы CSS для автоматизации Selenium.

Советы по отладке селекторов CSS

Отладка селекторов CSS — важный навык для автоматизации тестирования. Вот несколько советов по устранению неполадок:

Используйте инструменты разработчика вашего браузера для тестирования селекторов: Chrome DevTools предоставляет удобный инспектор элементов.
Распечатайте и проверьте совпадающие элементы – после запуска find_elements(), распечатайте результаты, чтобы увидеть, что совпало.
Привлекайте NoSuchElementException – Обертка находит в блоке try/Exception, чтобы перехватить, когда элемент не найден.
Создать XPath из целевого элемента. Многие браузеры позволяют копировать XPath, что может помочь в создании селектора CSS.
Упростите сложные селекторы. Попробуйте удалить атрибуты/классы/вложенность, пока селектор не заработает.
При необходимости используйте явное ожидание. Динамическим страницам может потребоваться ожидание, пока селекторы станут доступными.
Проверьте точность селектора. Убедитесь, что селектор действительно находит нужный элемент, а не любой элемент.

Потраченное время на тщательную отладку селекторов окупится за счет более стабильных тестов.

Заключение

В этом руководстве рассмотрены все ключевые аспекты поиска элементов с помощью селектора CSS в Selenium:

Синтаксис и типы селектора CSS
Использование с Selenium find_element методы
Написание точных и удобных в сопровождении селекторов
Распространенные случаи использования и примеры
Сравнение с XPath
Отладка и лучшие практики

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