Selenium WebDriver – мощный инструмент для автоматизации веб-тестирования. Часто возникает задача найти элемент на странице не по его идентификатору или классу, а по содержащемуся в нем тексте. Хотя стандартные CSS-селекторы не поддерживают прямой поиск по тексту, существуют обходные пути и расширения, позволяющие реализовать эту функциональность.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Зачем искать элементы по тексту?

Поиск по тексту необходим в ситуациях, когда:

• Отсутствуют уникальные идентификаторы или классы.
• Текст элемента является динамическим и меняется в зависимости от контекста.
• Необходимо проверить наличие определенного текста на странице.

Пример: нам нужно кликнуть на кнопку с текстом «Добавить в корзину», но у этой кнопки нет уникального id или class, или они генерируются динамически. Поиск по тексту – оптимальное решение.

Ограничения стандартных CSS-селекторов для поиска по тексту

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

Например, нельзя написать CSS-селектор вида: button:contains('Подтвердить'). Такой синтаксис неверен и не будет работать.

Обзор Selenium WebDriver и CSS-селекторов

Selenium WebDriver позволяет управлять браузером и взаимодействовать с элементами веб-страницы. CSS-селекторы предоставляют удобный и эффективный способ указания элементов для взаимодействия.

Пример использования CSS-селектора для поиска элемента по id: driver.find_element(By.CSS_SELECTOR, '#elementId')

Использование расширений CSS-селекторов для поиска по тексту

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

Атрибут data-* и его использование для хранения текста

Атрибуты data-* позволяют добавлять пользовательские данные к HTML-элементам. Это полезно для хранения информации, которая не влияет на отображение, но необходима для JavaScript или CSS.

Примеры использования data-* атрибутов в HTML

<button data-text="Подтвердить">Подтвердить</button>
<a href="#" data-title="Читать далее">Читать далее</a>

CSS-селекторы для поиска элементов с определенным текстом в атрибуте data-*

Используйте следующий синтаксис для поиска элементов с определенным текстом в атрибуте data-*:

• [data-attribute='текст'] — точное соответствие текста
• [data-attribute*='текст'] — текст содержится в атрибуте
• [data-attribute^='текст'] — текст начинается с указанного
• [data-attribute$='текст'] — текст заканчивается указанным

Пример поиска кнопки с текстом «Подтвердить» в атрибуте data-text:

from selenium import webdriver
from selenium.webdriver.common.by import By

# Инициализация драйвера (пример для Chrome)
driver = webdriver.Chrome()

driver.get("https://example.com") # Замените на URL вашей страницы

# Поиск элемента
button = driver.find_element(By.CSS_SELECTOR, '[data-text="Подтвердить"]')

# Действия с элементом
button.click()

# Закрытие браузера
driver.quit()

Поиск элемента по содержащемуся тексту с помощью JavaScript и CSS-селекторов

Если необходимо найти элемент, содержащий определенный текст, и при этом нельзя использовать атрибуты data-*, можно использовать JavaScript.

Получение текста элемента с помощью JavaScript

JavaScript позволяет получить текст элемента с помощью свойства textContent или innerText.

Внедрение JavaScript в Selenium WebDriver

Selenium WebDriver позволяет выполнять JavaScript код на странице с помощью метода execute_script().

Комбинация JavaScript и CSS-селекторов для точного поиска

from selenium import webdriver
from selenium.webdriver.common.by import By

# Инициализация драйвера (пример для Chrome)
driver = webdriver.Chrome()

driver.get("https://example.com") # Замените на URL вашей страницы

# JavaScript для поиска элемента, содержащего текст
script = """
let elements = document.querySelectorAll('button'); // Замените 'button' на нужный селектор
let foundElement = null;
for (let i = 0; i < elements.length; i++) {
  if (elements[i].textContent.includes('Подтвердить')) {
    foundElement = elements[i];
    break;
  }
}
return foundElement;
"""

# Выполнение JavaScript кода
element = driver.execute_script(script)

if element:
    element.click()

# Закрытие браузера
driver.quit()

Альтернативные подходы и обходные пути

Использование XPath для поиска по тексту (альтернатива CSS)

XPath предоставляет мощные возможности для поиска элементов по тексту. Функция contains() позволяет найти элементы, содержащие определенный текст.

Пример поиска кнопки с текстом «Подтвердить» с использованием XPath:

«`python
from selenium import webdriver
from selenium.webdriver.common.by import By

Инициализация драйвера (пример для Chrome)

driver = webdriver.Chrome()

driver.get(«https://example.com») # Замените на URL вашей страницы

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

button = driver.find_element(By.XPATH, ‘//button[contains(text(),