📖 Теория: Локаторы Selenium

Что такое локатор веб-элемента

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

Локаторы помогают найти элемент по его ID, имени, классу, атрибутам, тексту или структуре вложенности. Они применяются в инструментах Selenium, Playwright, Puppeteer и других.

Как найти локатор в DevTools

Для определения локатора используйте инструменты разработчика (DevTools) в браузере.

Как открыть DevTools

• Правый клик по элементу → «Просмотреть код» (Inspect)
• Или нажать F12 / Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac)
• Переключиться на вкладку Elements (Элементы)

Как быстро скопировать локатор

Кликнуть правой кнопкой по элементу в панели Elements → Copy (Копировать). Выбрать:

• «Copy selector» — получить CSS-селектор
• «Copy XPath» — получить XPath

CSS-селекторы

CSS-селекторы считаются быстрыми и удобными для поиска элементов. Они работают во всех браузерах и подходят для большинства задач автоматизации.

По ID — самый надёжный способ

Если у элемента есть уникальный ID — это лучший выбор.

<!-- HTML -->
<input id="username" type="text">

<!-- CSS-селектор -->
#username

По атрибуту name

Подходит, если у элемента есть атрибут name, но нет id.

<!-- HTML -->
<input name="email" type="text">

<!-- CSS-селектор -->
[name="email"]

По классу

Используется, если у элемента есть class. Важно: класс может быть не уникальным.

<!-- HTML -->
<button class="btn-primary">Login</button>

<!-- CSS-селектор -->
.btn-primary

По вложенности

Позволяет сузить поиск до элементов внутри определённого родителя.

<!-- HTML -->
<div class="container">
    <button>Купить</button>
</div>

<!-- CSS: любой button внутри .container (любой уровень) -->
.container button

<!-- CSS: только прямой потомок -->
.container > button

По частичному совпадению атрибута

Оператор *= ищет подстроку в значении атрибута.

<!-- HTML -->
<a href="/products/view/123">Подробнее</a>

<!-- CSS-селектор -->
a[href*="/products/view/"]

Псевдокласс :nth-child()

Позволяет выбрать N-й элемент среди дочерних.

<!-- Первая карточка в сетке -->
.col-sm-4:nth-child(1)

<!-- Шестая карточка -->
.col-sm-4:nth-child(6)

XPath

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

Базовый синтаксис

Примеры XPath

<!-- По ID -->
//*[@id="username"]

<!-- По имени (name) -->
//*[@name="email"]

<!-- По классу (осторожно: может вернуть несколько!) -->
//*[@class="btn-primary"]

<!-- По тексту кнопки -->
//button[text()="Отправить"]

<!-- По вложенности — прямой потомок -->
//div[@class="container"]/button

<!-- По частичному совпадению атрибута -->
//a[contains(@href, "/products/view/")]

<!-- По частичному совпадению текста -->
//button[contains(text(), "Купить")]

Метод find_element()

Метод find_element() ищет первый элемент, соответствующий локатору. Возвращает объект WebElement. Если элемент не найден — выбрасывает NoSuchElementException.

# Синтаксис
element = driver.find_element(By.LOCATOR, "значение")

Примеры

# test_locators.py
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("http://example.com")

# По ID
element = driver.find_element(By.ID, "login-button")

# По CSS-селектору
element = driver.find_element(By.CSS_SELECTOR, "div.container > p")

# По XPath
element = driver.find_element(By.XPATH, "//button[text()='Отправить']")

# По атрибуту name
element = driver.find_element(By.NAME, "username")

# По тегу
element = driver.find_element(By.TAG_NAME, "h1")

print(element.text)  # Читаем видимый текст
driver.quit()

Обработка NoSuchElementException

Если элемент не найден, Selenium выбрасывает NoSuchElementException. Используйте try-except, чтобы тест не упал с необработанным исключением.

# test_exception.py
from selenium.common.exceptions import NoSuchElementException

try:
    element = driver.find_element(By.ID, "non-existent")
    print("Элемент найден")
except NoSuchElementException:
    print("Элемент не найден")

Свойство .text

Свойство .text возвращает видимый текст внутри элемента (включая дочерние элементы). Скрытый текст (display: none, visibility: hidden) не считывается.

# test_text.py
header = driver.find_element(By.TAG_NAME, "h1")
print(header.text)  # Выведет текст заголовка h1

Метод is_displayed()

Метод is_displayed() проверяет, видим ли элемент пользователю в данный момент. Возвращает True или False.

Когда is_displayed() возвращает False

• Элемент скрыт через CSS: display: none или visibility: hidden
• Элемент за пределами экрана: position: absolute; left: -9999px
• Элемент полностью прозрачен: opacity: 0
• Элемент удалён из DOM
• Родительский элемент скрыт (наследуется)

# test_visibility.py
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("http://example.com")

element = driver.find_element(By.ID, "myElement")
if element.is_displayed():
    print("Элемент виден на странице")
else:
    print("Элемент скрыт")

driver.quit()

Метод find_elements()

Метод find_elements() ищет все элементы, соответствующие локатору. В отличие от find_element(), он не выбрасывает исключение, если элементы не найдены — возвращает пустой список [].

# Синтаксис
elements = driver.find_elements(By.LOCATOR, "значение")

Сравнение методов

# test_find_elements.py
cards = driver.find_elements(By.CSS_SELECTOR, ".col-sm-4")
print(f"Найдено карточек: {len(cards)}")

# Проверка каждого элемента
for card in cards:
    assert card.is_displayed(), f"Карточка скрыта: {card.text}"

Как выбирать надёжный локатор