XPath в Selenium: Навчальний посібник

У чому полягає XPath Selenium?

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

In Selenium автоматизація, якщо елементи не знайдено за загальними локаторами, такими як ідентифікатор, клас, ім'я тощо, тоді XPath використовується для пошуку елемента на веб-сторінці.

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

Синтаксис XPath

XPath містить шлях до елемента, розташованого на веб-сторінці. Стандартний синтаксис XPath для створення XPath:

Xpath=//tagname[@attribute='value']

Основний формат XPath у селені пояснюється нижче зі знімком екрана.

• // : Виберіть поточний вузол.
• Тег: Тег конкретного вузла.
• @: Виберіть атрибут.
• Атрибут: Назва атрибута вузла.
• Значення: Значення атрибута.

Щоб точно знайти елемент на веб-сторінках, існують різні типи локаторів:

Локатори XPath	Знайдіть різні елементи на веб-сторінці
ID	Щоб знайти елемент за ідентифікатором елемента
Назва класу	Щоб знайти елемент за назвою класу елемента
ІМ'Я	Щоб знайти елемент за назвою елемента
Текст посилання	Щоб знайти елемент за текстом посилання
XPath	XPath необхідний для пошуку динамічного елемента та переходу між різними елементами веб-сторінки
Шлях CSS	Шлях CSS також знаходить елементи без імені, класу чи ідентифікатора.

Види Х-шляху

Існує два типи XPath:

1) Абсолютний XPath

2) Відносний XPath

Абсолютний XPath

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

Ключовою характеристикою XPath є те, що він починається з однієї косої риски (/), що означає, що ви можете вибрати елемент із кореневого вузла.

Нижче наведено приклад абсолютного виразу Xpath для елемента, показаного на екрані нижче.

ПРИМІТКА. Ви можете виконати наведену нижче вправу XPath щодо цього https://demo.guru99.com/test/selenium-xpath.html

Натисніть тут якщо відео недоступне

Абсолютний XPath:

/html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div[1]/h4[1]/b[1]

Відносний Xpath

Відносний Xpath починається з середини структури HTML DOM. Починається з подвійної косої риски (//). Він може шукати елементи будь-де на веб-сторінці, тобто не потрібно писати довгий шлях xpath, і ви можете почати з середини структури HTML DOM. Відносний Xpath завжди є кращим, оскільки це не повний шлях від кореневого елемента.

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

Натисніть тут якщо відео недоступне

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

Що таке осі XPath?

Осі XPath шукають різні вузли в XML-документі з поточного вузла контексту. Осі XPath — це методи, які використовуються для пошуку динамічних елементів, які інакше неможливі за допомогою звичайного методу XPath без ідентифікатора, назви класу, назви тощо. XPath у Selenium містить кілька методів, таких як Contains, AND, Absolute XPath і Relative XPath, щоб ідентифікувати та знайти динамічні елементи на основі різних атрибутів і умов.

Методи Axes використовуються для пошуку тих елементів, які динамічно змінюються під час оновлення або будь-яких інших операцій. Існує кілька методів осей, які зазвичай використовуються в Selenium Веб-драйвер як дитина, батько, предок, рідний брат, попередній, сам тощо.

Як написати динамічний XPath Selenium веб-драйвер

1) Базовий XPath

Вираз XPath вибирає вузли або список вузлів на основі таких атрибутів, як ID, ім'я, ім'я класутощо з XML-документа, як показано нижче.

Xpath=//input[@name='uid']

Ось посилання для доступу до сторінки https://demo.guru99.com/test/selenium-xpath.html

Ще кілька основних виразів xpath:

Xpath=//input[@type='text']
Xpath=//label[@id='message23']
Xpath=//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='https://demo.guru99.com/']
Xpath=//img[@src='//guru99.com/images/home/java.png']

2) містить()

Contains() — це метод, який використовується у виразі XPath. Він використовується, коли значення будь-якого атрибута динамічно змінюється, наприклад, дані для входу.

Функція contain має можливість знаходити елемент із частковим текстом, як показано у прикладі XPath нижче.

У цьому прикладі ми намагалися ідентифікувати елемент, використовуючи лише часткове текстове значення атрибута. У наведеному нижче виразі XPath часткове значення 'sub' використовується замість кнопки надсилання. Можна помітити, що елемент знайдено успішно.

Повне значення "Type" - "submit", але використовується лише часткове значення "sub".

Xpath=//*[contains(@type,'sub')]

Повне значення 'name' - це 'btnLogin', але використовується лише часткове значення 'btn'.

Xpath=//*[contains(@name,'btn')]

У наведеному вище виразі ми взяли 'name' як атрибут і 'btn' як часткове значення, як показано на знімку екрана нижче. Буде знайдено 2 елементи (LOGIN & RESET), оскільки їхній атрибут «name» починається з «btn».

Подібним чином у наведеному нижче виразі ми взяли «id» як атрибут, а «message» — як часткове значення. Буде знайдено 2 елементи ("Ідентифікатор користувача не повинен бути порожнім" і "Пароль не повинен бути порожнім"), оскільки його атрибут "id" починається з "message".

Xpath=//*[contains(@id,'message')]

У наведеному нижче виразі ми взяли «текст» посилання як атрибут, а «тут» — як часткове значення, як показано на знімку екрана нижче. Буде знайдено посилання («тут»), оскільки воно відображає текст «тут».

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) Використання АБО & І

У виразі АБО використовуються дві умови, чи має значення 1-а АБО 2-га умова. Він також застосовний, якщо виконується одна умова або, можливо, обидві. Означає, що будь-яка умова має виконуватися, щоб знайти елемент.

У наведеному нижче виразі XPath він ідентифікує елементи, одна чи обидві умови яких є істинними.

Xpath=//*[@type='submit' or @name='btnReset']

Виділення обох елементів як елемента «LOGIN» з атрибутом «type» та елемента «RESET» з атрибутом «name».

У виразі І використовуються дві умови, обидві умови мають бути істинними, щоб знайти елемент. Не вдається знайти елемент, якщо будь-яка умова є хибною.

Xpath=//input[@type='submit' and @name='btnLogin']

У виразі нижче виділено елемент «LOGIN», оскільки він має атрибути «type» і «name».

4) Xpath починається з

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

Наприклад -: припустимо, що ідентифікатор певного елемента динамічно змінюється, як:

Id=”повідомлення12”

Id=”повідомлення345”

Id=”повідомлення8769”

і так далі.. але початковий текст той самий. У цьому випадку ми використовуємо вираз Start-with.

У наведеному нижче виразі є два елементи з ідентифікатором, що починається з «повідомлення» (тобто «Ідентифікатор користувача не має бути пустим» і «Пароль не має бути пустим»). У наведеному нижче прикладі XPath знаходить ті елементи, чий «ID» починається з «message».

Xpath=//label[starts-with(@id,'message')]

5) Функція XPath Text().

Команда Функція XPath text(). це вбудована функція selenium webdriver, яка використовується для пошуку елементів на основі тексту веб-елемента. Це допомагає знайти точні текстові елементи та знаходить елементи в наборі текстових вузлів. Елементи, які потрібно розташувати, мають бути у формі рядка.

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

Xpath=//td[text()='UserID']

Методи осей XPath

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

Для ілюстрації цього методу осей XPath ми використаємо демонстраційний сайт банку Guru99.

1) Слідуючи

Вибирає всі елементи в документі поточного вузла ( ) [Поле введення UserID є поточним вузлом], як показано на екрані нижче.

Xpath=//*[@type='text']//following::input

Є 3 «вхідні» вузли, що відповідають за допомогою «слідуючої» осі: пароль, вхід і кнопка скидання. Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете скористатися наведеним нижче методом XPath:

Xpath=//*[@type='text']//following::input[1]

Ви можете змінити XPath відповідно до вимог, поставивши [1], [2]…………і так далі.

Якщо ввести значення «1», на наведеному нижче знімку екрана буде знайдено певний вузол, який є елементом поля введення «Пароль».

2) Предок

Вісь предка вибирає всі елементи предків (дідуся, батька тощо) поточного вузла, як показано на екрані нижче.

У наведеному нижче виразі ми знаходимо елемент предків поточного вузла (вузол «ТЕСТУВАННЯ ПІДПРИЄМСТВА»).

Xpath=//*[text()='Enterprise Testing']//ancestor::div

Є 13 вузлів «div», які відповідають за допомогою осі «предка». Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете використати наведений нижче XPath, де ви змінюєте число 1, 2 відповідно до ваших вимог:

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

Ви можете змінити XPath відповідно до вимог, поставивши [1], [2]…………і так далі.

3) Дитина

Вибирає всі дочірні елементи поточного вузла (Java), як показано на екрані нижче.

Xpath=//*[@id='java_technologies']//child::li

Є 71 вузол «li», який відповідає за допомогою «дочірньої» осі. Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете використати наведений нижче шлях xpath:

Xpath=//*[@id='java_technologies']//child::li[1]

Ви можете змінити xpath відповідно до вимог, поставивши [1], [2]…………і так далі.

4) Попередній

Виберіть усі вузли, які передують поточному вузлу, як показано на екрані нижче.

У наведеному нижче виразі він визначає всі елементи введення перед кнопкою «ВХІД». Ідентифікатор користувача та пароль вхідний елемент.

Xpath=//*[@type='submit']//preceding::input

Є 2 «вхідні» вузли, що збігаються за допомогою «попередньої» осі. Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете використати наведений нижче XPath:

Xpath=//*[@type='submit']//preceding::input[1]

Ви можете змінити xpath відповідно до вимог, поставивши [1], [2]…………і так далі.

5) Наступний брат

Виберіть наступних братів і сестер контекстного вузла. Брати та сестри знаходяться на тому самому рівні поточного вузла, як показано на екрані нижче. Він знайде елемент після поточного вузла.

xpath=//*[@type='submit']//following-sibling::input

Зіставлення одного вхідного вузла за допомогою осі «наступного брата».

6) Батько

Вибирає батьківський елемент поточного вузла, як показано на екрані нижче.

Xpath=//*[@id='rt-feature']//parent::div

Є 65 «div» вузлів, які відповідають за допомогою «батьківської» осі. Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете використати наведений нижче XPath:

Xpath=//*[@id='rt-feature']//parent::div[1]

Ви можете змінити XPath відповідно до вимог, поставивши [1], [2]…………і так далі.

7) Сам

Вибирає поточний вузол або «self» означає, що вказує сам вузол, як показано на екрані нижче.

Зіставлення одного вузла за допомогою “власної” осі. Він завжди знаходить лише один вузол, оскільки він представляє самостійний елемент.

Xpath =//*[@type='password']//self::input

8) Нащадок

Вибирає нащадків поточного вузла, як показано на екрані нижче.

У наведеному нижче виразі він ідентифікує всі елементи-нащадки поточного елемента (елемент кадру «Основного корпусу»), що означає нижчий вузол (дочірній вузол, вузол-онук тощо).

Xpath=//*[@id='rt-feature']//descendant::a

Є 12 вузлів «посилання», які відповідають за допомогою осі «нащадка». Якщо ви хочете зосередитися на якомусь конкретному елементі, ви можете використати наведений нижче XPath:

Xpath=//*[@id='rt-feature']//descendant::a[1]

Ви можете змінити XPath відповідно до вимог, поставивши [1], [2]…………і так далі.

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

Резюме

Також перевірте: - Selenium Посібник для початківців: Вивчіть WebDriver за 7 днів