Освоєння XPath у Selenium: як знайти елементи

Автор

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

Для ефективної роботи тестувальники повинні вміти визначати та взаємодіяти з елементами веб-сторінок. Selenium є одним з найпопулярніших інструментів автоматизації тестування, який використовують команди розробників. Він включає в себе чотири основні компоненти: Selenium Grid, Selenium WebDriver, Selenium IDE та Selenium RC.

Сьогодні ми детальніше розглянемо Selenium WebDriver, оскільки він використовує XPath. У цій статті ми пояснимо, що таке XPath, розглянемо його основний синтаксис і покажемо, як застосовувати XPath у Selenium.

Що таке XPath

XPath (XML Path Language) – це мова запитів, яка дозволяє вибирати та навігувати по елементах і атрибутах у документах XML. XPath визначає шлях до елемента, надаючи можливість звертатися до конкретних частин XML-документа та отримувати з нього інформацію.

Синтаксис XPath схожий на структуру шляху в файловій системі. Він також містить функції та символи, що спрощують вибір елементів на основі їхніх атрибутів та ієрархії. XPath можна використовувати з такими технологіями, як XML, HTML та XSLT для вилучення та обробки даних.

Навіщо використовувати XPath?

  • Гнучкість: XPath, на відміну від CSS-селекторів, дозволяє знаходити елементи не тільки за назвою тегу, ідентифікатором або класом, а й за іншими атрибутами.
  • Повторне використання: вирази XPath можна зберігати в змінних і використовувати повторно у коді.
  • Точне визначення вузла: XPath забезпечує стандартизований спосіб точного визначення конкретних елементів веб-документа.

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

XPath дає змогу знаходити будь-який елемент на веб-сторінці, використовуючи DOM. Перш ніж ми перейдемо до синтаксису, давайте розберемо основні вирази XPath:

Вираз Опис
nodename/tagname Вибирає всі вузли з ім’ям ‘nodename’ або ‘tagname’.
/ Вибирає з кореневого вузла.
// Вибирає вузли в поточному документі з поточного вузла, незалежно від їх місця розташування.
@ Вибирає атрибути.
.. Вибирає батьківський елемент поточного вузла.
. Вибирає поточний вузол.

Стандартний синтаксис для XPath:

XPath=//tagname[@attribute="value"]

Як бачите, синтаксис починається з подвійної косої риски (//), яка вказує на пошук від поточного вузла, і далі визначається тегом або ім’ям вузла.

Абсолютний XPath проти відносного XPath

Існує два основних типи XPath: абсолютний і відносний XPath.

Абсолютний XPath

Абсолютний XPath представляє повний шлях від кореня документа до потрібного елемента. Він починається з кореневого вузла і завершується цільовим вузлом.

Наприклад, маємо наступний HTML-код:

<!DOCTYPE html>
<html>
<head>
    <title>techukraine.net</title>
</head>
<body>
    <div>
        <h1>Welcome to techukraine.net</h1>
    </div>
</body>
</html>

Якщо ми хочемо знайти елемент з текстом “Welcome to techukraine.net”, абсолютний XPath буде таким:

/html/body/div/h1

У наведеному прикладі:

  • HTML є кореневим вузлом: /html
  • Тіло є батьківським вузлом: /html/body
  • Div є дочірнім елементом вузла body: /html/body/div
  • h1 є дочірнім елементом вузла div: /html/body/div/h1

Щоб дістатися до потрібного елемента, потрібно точно пройти весь шлях.

Коли використовувати Absolute XPath

Абсолютний XPath ідеально підходить, коли потрібно знайти конкретні елементи на сторінці, особливо якщо є кілька елементів зі схожими атрибутами. Він гарантує, що ви звертаєтеся до потрібного елемента в документі.

Однак, цей тип XPath надто чутливий до змін у структурі HTML. Навіть незначна модифікація може порушити його працездатність.

Відносний XPath

Відносний XPath починається з будь-якого вузла і завершується цільовим вузлом. Він менш залежний від структури документа і тому кращий в більшості випадків. За допомогою відносного XPath можна знаходити елементи з будь-якої частини документа. Відносний XPath починається з подвійної косої риски ‘//’.

Знову використовуючи попередній HTML-приклад, наш відносний XPath до h1 з текстом “Welcome to techukraine.net” буде таким:

<!DOCTYPE html>
<html>
<head>
    <title>techukraine.net</title>
</head>
<body>
    <div>
        <h1>Welcome to techukraine.net</h1>
    </div>
</body>
</html>

Наш відносний XPath до h1 буде таким:

//body/div/h1

Коли використовувати Relative XPath

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

Знайти елементи за допомогою XPath у Selenium

Selenium – це платформа з відкритим кодом для автоматизації веб-браузерів. Вона включає набір бібліотек та інструментів, які дозволяють тестувальникам автоматично взаємодіяти з елементами веб-сторінок.

Припустимо, у нас є веб-документ зі списком пісень:

<!DOCTYPE html>
<html>
<head>
    <title>Song Library</title>
</head>
<body>
    <h1>Song Library</h1>
    <ul class="song-list">
        <li class="song" title="Song Title 1">Song 1 - Artist 1</li>
        <li class="song" title="Song Title 2">Song 2 - Artist 2</li>
        <li class="song" title="Song Title 3">Song 3 - Artist 1</li>
        <li class="song" title="Song Title 4">Song 4 - Artist 3</li>
    </ul>
</body>
</html>
  • Кореневим вузлом є <html>.
  • <body> є батьківським вузлом.
  • <h1> є дочірнім елементом <body>.
  • <ul> є дочірнім елементом <body>.
  • <li> є дочірнім елементом <ul>.

У наведеному прикладі HTML можна використовувати різні локатори XPath. Наприклад, можна знаходити елементи за ідентифікатором, назвою, класом, текстом, вмістом і так далі. Selenium підтримує різні мови програмування. Для демонстрації ми будемо використовувати Python.

Знайти за індексом

Для пошуку третьої пісні ми можемо використовувати наступний код:

third_song = driver.find_element_by_xpath("//li[@class="song"][3]")
print("Third Song:", third_song.text)

Ми використали відносний XPath, почавши з вузла “li”. Selenium знайде третю пісню у списку і виведе її текст.

Знайти за атрибутом

Можна створити XPath для пошуку всіх пісень “Artist 1” і вивести їх назви:

songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artist 1')]")
print("Songs by Artist 1:")
for song in songs_by_artist1:
    print(song.text)

Знайти за текстом

Цей локатор дозволяє знаходити елементи за певним текстом. Наприклад, ми можемо знайти пісню з текстом “Song 4” і вивести її текст:

song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Song 4')]")
print("Song with Text:", song_with_text.text)

Осі XPath

Описані вище підходи добре працюють на простих веб-сторінках. Однак у випадках з динамічним контентом, коли звичайні локатори не працюють, необхідно використовувати осі XPath.

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

Предок

Ось “предок” (ancestor) підходить для роботи з XML-документами з глибоко вкладеними елементами. Вона дозволяє вибрати всіх предків, таких як батьківський елемент, дідів і т.д., від найближчого до найвіддаленішого.

Приклад:

<bookstore>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fiction</genre>
  </book>
  <book>
    <title>The Biggest Dilemma</title>
    <author>George Orwell</author>
    <genre>Dystopian</genre>
  </book>
</bookstore>

Щоб вибрати всіх предків елемента ‘title’ для книги “The Biggest Dilemma”, використовуємо такий вираз XPath:

//title[text() = '1984']/ancestor::*

Слідую

Ось “слідуючий” (following) знаходить всі вузли, які йдуть після закриття поточного вузла. Вона не враховує ієрархію або розташування цільових вузлів. Наприклад, у XML-документі або веб-сторінці з кількома розділами можна визначити елемент, який з’являється після певного розділу, не обходячи всю структуру дерева.

Батько

Ось “батько” (parent) вибирає батьківський елемент поточного вузла. Використання такого шляху допоможе знайти батьківський вузол:

//tag[@attribute="value"]/parent::tagName

Цей підхід корисний, коли дочірні елементи мають унікальні атрибути, за якими їх легко ідентифікувати, а необхідно перевірити батьківський.

Дитина

Ось “дитина” (child) у XPath вибирає всіх дочірніх елементів поточного вузла. Це один із найпопулярніших методів, оскільки він дозволяє вибирати дочірні вузли конкретного елемента.

Приклад:

<section id='text'>
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
    <p>Paragraph four</p>
</section>

Щоб знайти всі елементи “p”, використовуємо:

//section[@id='text']/child::p

Поширені запитання

Чому використовувати XPath замість CSS-селекторів?

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

Які мови підтримує XPath в Selenium?

XPath можна використовувати з будь-якою мовою, яку підтримує Selenium. Ви можете писати сценарії на JavaScript, Java, Python, Ruby, C# та PHP.

Які є альтернативи XPath?

Альтернативою XPath можуть бути CSS-селектори, розпізнавання зображень та вбудовані локатори Selenium. CSS-селектори є найпоширенішими, вони дозволяють знаходити елементи за назвою тегу, ідентифікатором або класом. Розпізнавання зображень дозволяє шукати елементи за їх зображеннями. Вбудовані локатори Selenium розроблені для зручності використання.

Висновок

Тепер ви знаєте, що таке XPath в Selenium, розрізняєте абсолютний і відносний XPath, а також вмієте знаходити елементи за допомогою різних XPath локаторів. Вибір локатора залежить від типу контенту та ваших цілей.

Не забудьте ознайомитися з нашою статтею про питання для співбесіди Selenium, якщо готуєтесь до наступної співбесіди.