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

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

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

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

Зміст

Що таке XPath

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

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

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

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

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

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

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

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

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

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

Діаграми Fishbone або Ishikawa менш ніж за 5 хвилин

Абсолютний XPath проти відносного 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>

Якщо ми хочемо знайти елемент із вмістом «Ласкаво просимо до techukraine.net», ви підете цим шляхом;

/html/body/div/h1

У наведеному вище документі ми маємо;

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

Щоб отримати найпотаємніший елемент, ви повинні пройти цей шлях.

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

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

Однак XPath надто чутливий до змін у структурі документа HTML. Таким чином, проста зміна може порушити ваш Absolute XPath.

Відносний XPath

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

Якщо ми використовуємо документ HTML, ми можемо знайти наш H1 із написом «Ласкаво просимо до 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

Ви повинні використовувати Relative 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>

Наш кореневий вузол – .
Ми маємо як батьківський вузол.
У нас є

як дочірній елемент .
У нас є
- У нас є
- як дочірній елемент
  Ми можемо використовувати різні локатори XPath у наведеному вище HTML-документі. Наприклад, ми можемо знаходити елементи за ідентифікатором, іменем, назвою класу, вмістом, текстами, закінченнями та початками, серед багатьох інших локаторів. Ви можете використовувати Selenium з різними мовами програмування. Для демонстрації ми будемо використовувати Python.
  
  Знайти за індексом
  
  Припустимо, що ми хочемо знайти пісню номер 3, ми можемо мати цей код;
```
third_song = driver.find_element_by_xpath("//li[@class="song"][3]")
print("Third Song:", third_song.text)
```
  Ми використали Relative XPath і почали з вузла «li». Коли Selenium знайде третю пісню в нашому списку, він надрукує її текст.
  
  Знайти за атрибутом
  
  Ми можемо мати XPath, який шукає всі пісні з «Виконавця 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)
```
  Знайти за текстом
  
  Цей локатор допоможе знайти елементи з певним текстом. Ми можемо шукати пісню з текстом «Пісня 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 Axes;
  
  Предок
  
  Метод Ancestor Axis ідеально підходить для роботи з 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’ для книги «Найбільша дилема», ми можемо мати цей метод Ancestor Axis;
```
//title[text() = '1984']/ancestor::*
```
  Слідую
  
  Метод Following Axis знаходить усі вузли після тегу закриття поточного вузла. Цей метод не враховує ієрархію або розташування цільових вузлів. Наприклад, якщо у вас є XML-документ або веб-сторінка з кількома розділами, ви можете визначити елемент, який з’являється після певного розділу, не переходячи по всій структурі дерева.
  
  Батько
  
  Метод Parent Axis у XPath вибирає батьківський елемент поточного вузла. Ви можете використовувати наступний шлях, щоб знайти батьківський вузол;
```
//tag[@attribute="value"]/parent::tagName
```
  Цей підхід працює, коли дочірні елементи в поточному вузлі мають унікальні атрибути, які ви можете легко знайти, і ви хочете перевірити у батьківського.
  
  дитина
  
  Метод Child Axis у XPath вибирає всіх дочірніх елементів поточного вузла. Він залишається одним із найпопулярніших методів XPath Axis, оскільки допомагає вибрати дочірні вузли певного елемента.
  
  Розглянемо цей фрагмент коду;
```
<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?
  
  Ви можете використовувати селектори CSS, розпізнавання зображень або вбудовані локатори Selenium як альтернативу XPath. Селектори CSS є найпоширенішими; ви можете знайти елементи на основі їх імені тегу, ідентифікатора або класу. Розпізнавання зображень дозволяє знаходити елементи на основі їхніх зображень. Вбудовані локатори Selenium розроблені для зручності використання.
  
  Висновок
  
  Тепер ви можете визначати XPath у Selenium, розрізняти абсолютний і відносний XPath і знаходити елементи за допомогою різних локаторів XPath. Вибір локатора залежатиме від характеру вмісту та ваших кінцевих цілей.
  
  Ознайомтеся з нашою статтею про питання для співбесіди Selenium, якщо ви хочете успішно пройти наступну співбесіду.

Що таке XPath

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

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

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

Абсолютний XPath

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

Відносний XPath

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

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

як дочірній елемент .

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

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

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

Осі XPath

Предок

Слідую

Батько

дитина

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

Висновок