Как искать элементы внутри таблиц/списков/динамических компонентов?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

XPath

XPath — это язык запросов, который используется для навигации по XML-документам, но также применяется для работы с HTML-документами в веб-тестировании. Он позволяет находить элементы на основе их иерархического расположения в DOM-дереве.

Пример использования XPath

//table[@id='example-table']//tr[2]/td[3]

• //table[@id='example-table'] — находит таблицу с атрибутом id, равным example-table.
• //tr[2] — выбирает вторую строку (tr) внутри найденной таблицы.
• /td[3] — выбирает третью ячейку (td) во второй строке.

XPath позволяет использовать различные функции и операторы для более сложных запросов, например, contains(), starts-with(), text(), что делает его мощным инструментом для поиска элементов.

CSS-селекторы

CSS-селекторы — это другой способ выбора элементов на веб-странице, который основывается на стилях и классах. Они более просты и часто более читаемы, чем XPath, но могут быть менее гибкими в сложных структурах.

Пример использования CSS-селекторов

#example-table tr:nth-child(2) td:nth-child(3)

• #example-table — выбирает элемент с id, равным example-table.
• tr:nth-child(2) — выбирает вторую строку внутри таблицы.
• td:nth-child(3) — выбирает третью ячейку во второй строке.

CSS-селекторы поддерживают различные псевдоклассы и псевдоэлементы, такие как :nth-child, :first-child, :last-child, что позволяет точно выбирать нужные элементы.

Динамические компоненты

Динамические компоненты, такие как элементы, которые появляются или изменяются в результате действий пользователя (например, выпадающие списки, модальные окна), требуют особого подхода. Для работы с ними важно учитывать:

• Ожидания: Использование явных или неявных ожиданий (waits) для того, чтобы убедиться, что элемент доступен для взаимодействия.
• Уникальные идентификаторы: Использование уникальных атрибутов или комбинаций атрибутов для точного выбора элементов.
• Обработка изменений: Обработка изменений в DOM, которые могут происходить после взаимодействия с элементами.

Пример кода с использованием Selenium WebDriver

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
​
# Инициализация драйвера
driver = webdriver.Chrome()
​
# Открытие веб-страницы
driver.get("http://example.com")
​
# Ожидание, пока таблица не станет доступной
table = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "example-table"))
)
​
# Поиск элемента внутри таблицы с использованием XPath
cell = driver.find_element(By.XPATH, "//table[@id='example-table']//tr[2]/td[3]")
​
# Вывод текста найденной ячейки
print(cell.text)
​
# Закрытие драйвера
driver.quit()

• WebDriverWait и EC.presence_of_element_located используются для ожидания появления таблицы на странице.
• find_element с By.XPATH используется для поиска конкретной ячейки в таблице.
• print(cell.text) выводит текст найденной ячейки, что позволяет проверить правильность поиска.

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