Вступ до XPath та CSS-селекторів

1. Що таке XPath та CSS-селектори?

Сьогодні ми зробимо величезний крок на шляху до майстерності веб-автоматизації з Selenium і познайомимось з XPath та CSS-селекторами. Ці маленькі, але потужні інструменти стануть вашими вірними супутниками у пошуку елементів на веб-сторінках. Давайте разом заглибимося у світ селекторів і навчимося використовувати їх для більш точного та ефективного пошуку.

Якби HTML-документ був густим лісом, то XPath та CSS-селектори були б вашими картами-шпаргалками. Вони дозволяють вам прокласти шлях до потрібного дерева (або елемента, якщо вам більше до вподоби програмування). Ці інструменти допомагають знаходити елементи на веб-сторінках, навіть якщо вони ховаються за метрами коду та мільйонами тегів.

XPath

XPath (XML Path Language) — це мова, призначена для навігації в XML-документах. Але ж хтось сказав, що HTML — це гібрид XML, так? Ось чому XPath так зручно застосовувати до HTML-документів. Він може буквально дістатися до елемента будь-яким шляхом, який ви задасте.

CSS-селектори

CSS-селектори прийшли зі світу каскадних таблиць стилів. Не хвилюйтесь, їх вивчення не вимагатиме від вас стати дизайнером! Вони потрібні, щоб точно вибрати елементи за їх типом, класом, ідентифікатором і навіть станом. Користуватись ними простіше, ніж здається — ви, ймовірно, вже використовували їх неусвідомлено при стилізації веб-сторінок.

2. Застосування XPath та CSS-селекторів у коді

Тепер, коли ви знаєте, що це за диво такі — селектори, давайте одразу до практики. Ми дізнаємось, як застосовувати їх разом з Selenium і творити дива!

Використання XPath

Ось приклад того, як можна використовувати XPath для пошуку елемента в Selenium:

from selenium import webdriver

# Налаштування драйвера
driver = webdriver.Chrome()

# Відкриття сторінки
driver.get('https://example.com')

# Пошук елемента через XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Виведення тексту елемента
print(element.text)

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

Пояснення:

• //div[@id="menu"]/ul/li/a — це наш XPath. Він каже: "Гей, драйвере, знайди мені елемент a, який знаходиться всередині li, який всередині ul, який у div з id="menu"."

Використання CSS-селекторів

Тепер давайте подивимось, як можна використовувати CSS-селектори:

from selenium import webdriver

# Налаштування драйвера
driver = webdriver.Chrome()

# Відкриття сторінки
driver.get('https://example.com')

# Пошук елемента через CSS-селектор
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Виведення тексту елемента
print(element.text)

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

Пояснення:

• div#menu > ul > li > a — наш CSS-селектор. Він шукав елемент аналогічно XPath, але з більш лаконічним синтаксисом.

3. Відмінності між XPath та CSS-селекторами

Запитаєте ви, в чому різниця між XPath та CSS-селекторами? Чудове запитання! Давайте розберемо, коли і що використовувати.

Гнучкість vs. Простота

XPath більш гнучкий: з його допомогою можна рухатись "вгору" по дереву DOM та використовувати складні логічні умови. Це робить його корисним для складніших запитів. Однак, іноді простота CSS-селекторів і їх лаконічність роблять їх більш переважними. CSS-селектори легше читаються і записуються, особливо коли потрібно знайти елемент за класом або ідентифікатором.

Підтримка функцій

XPath підтримує використання функцій — від перевірки тексту до роботи з атрибутами, наприклад, contains() або starts-with(). CSS-селектори, у свою чергу, не мають такої комплексної підтримки.

Швидкість роботи

У деяких сценаріях CSS-селектори працюють швидше. Це пов'язано з тим, що браузери спочатку оптимізовані для роботи з CSS-селекторами, що робить їх вибором за замовчуванням для простих завдань.

Синтаксис

XPath має складніший синтаксис, що може стати як його перевагою, так і недоліком. CSS-селектори простіші у записі та освоєнні.

4. Застосування на практиці

Давайте застосуємо ці знання для реального завдання. Скажімо, у нас є веб-сторінка з таблицею товарів, і нам потрібно зібрати всі назви товарів і їх ціни. Ось як це можна зробити:

Приклад із використанням XPath

from selenium import webdriver

# Налаштування драйвера
driver = webdriver.Chrome()

# Відкриття сторінки
driver.get('https://example.com/products')

# Пошук усіх елементів товарів
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Витяг даних про кожний товар
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Товар: {name}, Ціна: {price}")

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

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

from selenium import webdriver

# Налаштування драйвера
driver = webdriver.Chrome()

# Відкриття сторінки
driver.get('https://example.com/products')

# Пошук усіх елементів товарів
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Витяг даних про кожний товар
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Товар: {name}, Ціна: {price}")

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

5. Особливості і типові помилки

Коли ви використовуєте XPath та CSS-селектори, є декілька пасток, яких варто остерігатися. Наприклад, коли ви використовуєте абсолютні шляхи в XPath, є ризик, що найменша зміна у структурі HTML призведе до поломки вашого скрипта. Тому завжди намагайтесь використовувати відносні шляхи, щоб залишатися гнучкими.

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

Також варто згадати про обробку помилок. Якщо елемент не знайдено, Selenium викине NoSuchElementException. Використовуйте try-except блоки або методи очікування, такі як WebDriverWait, щоб справлятися з цим і робити ваші скрипти більш надійними.