Меню

Кінцевий підручник з написання шпаргалок XPath із синтаксисом та прикладами

ultimate xpath writing cheat sheet tutorial with syntax

Спробуйте Наш Інструмент Для Усунення Проблем

Найкращі 20 способів написати Ultimate XPATH для будь-якого типу веб-елемента (XPATH ніколи не буде недійсним):

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

Ці веб-елементи також називаються тегами або вузлами.

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

20 СПОСОБІВ НАПИСАТИ XPATH ДЛЯ БУДЬ-ЯКОГО ВИДУ ВЕБ-ЕЛЕМЕНТА

Що ви дізнаєтесь:

Що таке XPath і як він виглядає?

Знайти елемент - це все одно, що знайти чийсь будинок на карті. Єдиний спосіб, за допомогою якого ми можемо знайти будинок друга без будь-якої сторонньої допомоги, полягає в тому, що ми повинні мати карту і знати, що знайти (будинок).

Для того, щоб застосувати цю аналогію у нашому випадку, карта буде використовуватися як DOM (теги HTML, JavaScript тощо), де існують всі веб-елементи, разом із конкретним веб-елементом, який ми хочемо знайти.

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

Однак нелегко знайти унікальну адресу / шлях веб-елемента, оскільки можуть бути схожі теги, однакові значення атрибутів, однакові шляхи, що ускладнює створення точної унікальної адреси веб-елементу під назвою “XPATH”.

Тут ми глибоко заглибимось у кілька чудових та ефективних методів для створення дійсних та унікальних XPATH для будь-якого типу веб-елемента.

Рекомендуємо прочитати => Визначте веб-елементи за допомогою XPath у селені

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

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

Знаючи всі ці прийоми, ви станете майстром написання власного XPath і зможете писати вбивчі XPaths з дуже мало шансів стати недійсними.

Спочатку давайте почнемо з розуміння синтаксису XPath та визначимо кожну його частину.

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

Синтаксис XPATH

  • //: Виберіть поточний вузол, такий як введення, div тощо.
  • Тег: Тег веб-елемента / вузла
  • @: Виберіть атрибут
  • Атрибут: Ім'я атрибута вузла / конкретного веб-елемента
  • Значення: Значення атрибута

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

Отже, щоразу, коли ваш тест не вдається:

Запитання та відповіді на тестування програмного забезпечення для досвідчених
  1. Скопіюйте свій XPath.
  2. Знайдіть його у браузері (F12 або вікно інструменту розробника) у DOM, щоб переконатися, що він дійсний чи ні (див. Зображення нижче).

F12 Вікно

Pro Type 1: Переконайтесь, що він унікальний і не з’являється жоден інший веб-елемент, коли ви двічі шукаєте в DOM.

Pro Type 2: Іноді виникає проблема із синхронізацією, що означає, що ваш веб-елемент / сторінка ще не завантажений, поки сценарій шукав його, отже, додайте трохи часу очікування та повторного тестування.

Pro Type 3: Спробуйте роздрукувати весь DOM перед пошуком веб-елемента. Таким чином ви можете визначити, заглянувши в Console, чи існує ваш веб-елемент у DOM чи ні.

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

Якщо такої можливості немає, то, можливо, вам доведеться використати свій творчий потенціал і придумати власні налаштовані XPaths, і саме про це ми зараз дізнаємось.

20 найкращих способів написання XPath для будь-якого веб-елемента

Давайте глибоко заглибимось у створення 20 найкращих шляхів до вбивчого XPath.

# 1) Зворотний пошук

Скажімо, ви хочете натиснути кнопку, і є подібна кнопка. Обидві кнопки мають атрибути id, але вони динамічні, і жоден з атрибутів не є унікальним в обох елементах кнопки.

У наведеному нижче сценарії ми хочемо натиснути кнопку «Налаштування» в «Тестувати інтерактив».

Реверс Подивіться вгору

Код

Реверс Шукайте код

Якщо ви подивитеся на кнопки “Setting”, обидва коди схожі. Використовуючи традиційні способи, такі як ідентифікатор, ім’я, значення, вміст тощо, жоден з них не працюватиме, наприклад.

// * (містить (text (), ‘Setting’)), Це призведе до двох веб-елементів. Отже, це не унікально.

Тож ось остання стратегія,

>> Спочатку знайдіть найближчий тег, який є унікальним, і в даному випадку він є

XPATH: “//*(@id='rcTEST')

>> По-друге, знайдіть найближчий веб-елемент до передбачуваного веб-елементу, який у цьому випадку містить (text (), „TEST Interactive“). Зараз ми знаходимося в тому самому місці, де існує кнопка «Налаштування», але щоб натиснути на неї, нам спочатку потрібно перейти до основної, використовуючи подвійні крапки, як показано нижче.

XPATH: “//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..

Знайдіть найближчий веб-елемент

>> Як бачите, ми знаходимося на рівні, який має другий веб-елемент як кнопку «Налаштування». У ньому є дві кнопки, і ми хочемо перейти до другої кнопки, яка є кнопкою «Налаштування». Додавши в кінці ‘/ button (2)’, ми можемо отримати наш унікальний XPATH для кнопки «Setting», як показано нижче.

додавання «/ кнопки (2)»

Остаточний XPATH:

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/../button(2)”

Ось ще один спосіб генерувати, якщо ви вважаєте, що вони можуть змінити тип веб-елемента з 'кнопки' на щось інше.

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..//*(contains(text(), 'Setting'))”

або з використанням 'наступного брата'

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/following-sibling::button”

# 2) Використання змінних та користувацьких значень

Скажімо, існує веб-програма, яка має функцію FTP («Протокол передачі файлів») для завантаження / завантаження файлів, і у вас є тест для завантаження певного файлу, натиснувши посилання для завантаження.

По-перше, ми можемо визначити назву файлу, яку ми шукаємо, як змінну.

Рядок очікуєтьсяfileName = “Test1”;

зробити копію масиву

Тепер за допомогою XPATH ми можемо знайти фактичне ім'я файлу.

“String actualFileName = WebDriverAccess.getDriver().findElement (By.xpath('//*'+fileName +'/tr/td(1)')).getAttribute('title');”

У наведеному вище XPath,… / / tr / td (1) .getAttribute (“title”) ”перейде до конкретного рядка та першого стовпця та отримає значення атрибута title. Ми можемо зберегти фактичне ім’я файлу в іншу змінну.

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

(if acutalFileName == expectedFileName) { WebDriverAccess.getDriver().findElement(By.xpath('//*'+fileName +'/tr/td(4)')).click(); }

Ми також можемо створити цикл у кожному рядку та продовжувати перевіряти ім'я файлу, поки не знайдемо його.

Loop(int count <30) { String actualFileName = WebDriverAccess. getDriver ().findElement (By. xpath ('//*'+acutalFileName +'/tr(' + count + ')/td(1)')).getAttribute('title'); (if acutalFileName == expectedFileName) { WebDriverAccess. getDriver ().findElement(By. xpath ('//*'+fileName +'/tr/td(4)')).click(); } Count++; }

# 3) Використання тегів “XML”, “І” тощо

Ми можемо створити унікальний XPATH за допомогою індивідуальних тегів, а також додати інші умови.

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

// address(@class='ng-scope ng-isolate-scope')

Ми помітили, що наш веб-елемент, що передбачається, міститься в тезі, який містить текст, що називається „Тестування”.

// address(@class='ng-scope ng-isolate-scope')//div(contains(.,'Testing')

Ми з’ясували, що в результаті виявлено кілька веб-елементів. Отже, щоб зробити його більш унікальним, ми можемо додати інші умови, такі як “id”, що, нарешті, вкаже на веб-елемент, який ми шукаємо.

// address(@class='ng-scope ng-isolate-scope')//div(contains(.,Testing') and @id='msgTitle')

# 4) Використання атрибутів та таблиці XPATH

Припустимо, що ми хочемо ввести веб-елемент, який розміщений всередині таблиці, а таблиця розміщена всередині елемента форми.

Ми можемо знайти всі форми всередині DOM з назвою «myForm».

“//*(@name='myForm')”

Тепер у всіх формах знайдіть таблицю з ідентифікатором «tbl_testdm».

'//*(@name='myForm')//table(@id='tbl_ testdm’)”

У таблиці перейдіть до певного рядка та стовпця.

'//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/”

Якщо всередині комірки є кілька входів, знайдіть вхідні дані, де значення = «Відкрити RFS», і це дасть нам остаточний XPath поля.

//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/ input(@value='Open RFS')'

# 5) Використання атрибутів, таблиць та тексту

Припустимо, що передбачуваний веб-елемент лежить у таблиці панелей і містить загальний текст.

Спочатку починайте з панелі, що має унікальний атрибут, який у цьому випадку має назву «TITLE».

//*(@title=’Songs Lis Applet')

Тепер перейдіть по всіх тегах таблиці.

//*(@title=’Songs Lis Applet')//table

У всіх таблицях знайдіть стовпець із текстом „Автор”.

Остаточний XPath мав би вигляд:

//*(@title=’Songs List Applet')//table//td(contains(text(),'Author'))

# 6) Генерування XPATH за допомогою вкладених атрибутів

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

//*(@id='parameters')//*(@id='testUpdateTime')')

# 7) Генерування XPath, комбінуючи атрибути, розділи та кнопки

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

“//*(@id='MODEL/PLAN')/div(1)/div(2)/div(1)/div(1)/widget/section/div(1)/div/div(1)/div/div/button(1)'

# 8) Генерування XPATH за допомогою CONTAINS, REVERSE LOOKUP тощо.

Одного разу у мене було розкривне меню без прямої ідентифікації. Мені довелося використовувати атрибути CONTAINS, REVERSE, DIV, щоб придумати остаточний XPATH, як показано нижче.

//*(contains(text(),'Watch Dial))/../div/select(@data-ng-model='context.questions (subqts.subHandleSubId)')'),

# 9) Генерування XPath за допомогою Relative, CONTAINS, REVERSE, FOLLOWING SIBLING тощо.

У мене була ситуація, коли програма відображає графік, і кожне значення графіка повинно бути перевірено. Але, на жаль, кожне значення не мало жодної унікальної ідентифікації, тому я придумав остаточний XPATH, як показано нижче, для одного значення графіка, яке поєднує теги relative, contains, reverse, following-sibling і div.

//*(@id='RESEARCH/PLAN')//*(contains(@id, 'A4'))/../../following-sibling::div(1)/div(1)/span(1)/span(1)

# 10) Генерування XPath з використанням атрибутів, містять, реверсує, попереднє відновлення, Divs та Span

Одного разу мені довелося перевірити різні дані тривоги, і кожне значення тривоги відображалося на основі конкретного розрахунку або часу. Для того, щоб захопити кожне значення, мені довелося придумати XPATH нижче, який використовує атрибути, містить теги зворотного, попереднього побратиму, div та span.

//*(@id='ALARMDATA')//*(contains(@id, 'AFC2'))/../../preceding-sibling::div(1)/div(1)/span(1)/span(1)

# 11) Використання атрибутів, тегів XML тощо.

У наведених нижче XPATH, атрибутах та тегах XML, послідовність використовується для виведення остаточної унікальної адреси веб-елемента.

//*(@id='RESEARCH/REVIEW') //widget/section/div(1)/div/div(2)/div(1)/div(3)/div(1)//span(@class='details')

# 12) Генерація XPath, не заглядаючи на цілу сторінку, а переглядаючи всі посилання замість цього і містить

Нижче XPath шукатиме лише посилання на цілу сторінку, які містять текст як “Введення даних параметрів вручну”.

//a(contains(.,'Parameter Data Manual Entry'))

# 13) Використання вмісту та атрибутів

//*(contains(@style,'display: block; top:'))//input(@name='daterangepicker_end')

# 14) Використання атрибутів, слідування за братами та сестрами

//*(@id='dropdown-filter-serviceTools')/following-sibling::ul/descendant::a(text()='Notepad')

# 15) Використання атрибутів, слідування за братами та сестрами, нащадка та тексту

//*(@id='dropdown-filter-service tools') /following-sibling::ul/descendant::a(text()='Trigger Dashboard')

# 16) Використання заголовка та тексту

Якщо веб-елемент є заголовком з певним текстом, тоді XPath може бути таким, як показано нижче:

//h3(text()='Internal Debrief')

# 17) Використання тексту заголовка, слідування за братами та сестрами, шляху тощо.

//h3(contains(text(),'Helium Level'))/following-sibling::div/label/input

# 18) Використання атрибутів, місць та попередніх братів і сестер

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

//div(div(p(contains(text(),'Status'))))/preceding-sibling::div/div/span(3)/span

# 19) Шукаємо спадне меню за допомогою атрибута Id, певного тексту та зворотного пошуку

//*(@id='COUPLING')//*(contains(text(),'COUPLE Trend'))/../div/select

# 20) Поєднання атрибута “id” та пошук посилання з конкретним текстом

//*(@id='ffaHeaderDropdown')//a(contains(text(),'Start Workflow'))

Висновок

Коли справа доходить до написання вбивчого XPATH, це справді залежить від того, наскільки добре ви розумієте та аналізуєте код. Чим більше ви розумієте код, тим більше буде кількість способів, які ви знайдете при написанні ефективних XPATH.

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

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

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

найкраще розширення блокування реклами для chrome -

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

Нижче наведено комбінований перелік різних способів написання XPATH:

  1. “// * (@ id =’ rcTEST ’) // * (містить (текст (),‘ TEST Interactive ’)) /../ кнопка (2)”
  2. “// * (@ id =’ rcTEST ’) // * (містить (text (),‘ TEST Interactive ’)) /..//* (містить (text (),‘ Setting ’))»
  3. “// * (@ id =’ rcTEST ’) // * (містить (text (),‘ TEST Interactive ’)) / follow-sibling :: button”
  4. “String actualFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (“ // * ”+ fileName +” / tr / td (1) ”)). GetAttribute (“ title ”);”
  5. WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + FileName + ”/ tr / td (4)”)). Click ();
  6. '// адреса (@ class = 'ng-scope ng-isolate-scope') // div (містить (., Тестування ') та @ id =' msgTitle ')'
  7. “// * (@ name =’ myForm ’) // таблиця (@ id =’ tbl_ testdm ’) / tbody / tr / td (6) /
  8. вхід (@ value = ’Відкрити RFS’) ”
  9. “// * (@ @ title =’ Аплет зі списку пісень ’) // таблиця // td (містить (text (),‘ Автор ’))”
  10. “// * (@ id =’ параметри ’) // * (@ id =’ testUpdateTime ’)”) ”
  11. “// * (@ id = 'МОДЕЛЬ / ПЛАН') / div (1) / div (2) / div (1) / div (1) / віджет / розділ / div (1) / div / div (1) / div / div / кнопка (1) ”
  12. “// * (містить (text (),‘ Watch Dial)) /../ div / select (@ data-ng-model = ’context.questions (subqts.subHandleSubId)))”), ”
  13. “// * (@ id = 'ДОСЛІДЖЕННЯ / ПЛАН') // * (містить (@id, 'A4')) /../../ following-sibling :: div (1) / div (1) / span (1) / span (1) ”
  14. “// * (@ id = 'ALARMDATA') // * (містить (@id, 'AFC2')) /../../ preceding-sibling :: div (1) / div (1) / span ( 1) / діапазон (1) ”
  15. “// * (@ id = 'ДОСЛІДЖЕННЯ / ПЕРЕГЛЯД') // віджет / розділ / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'подробиці') ”
  16. “//A(містить(.,’Введення даних параметру вручну’)) ”
  17. “// * (містить (@ стиль,’ display: block; top: ’)) // введення (@ name =’ daterangepicker_end ’)”
  18. “// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Notepad ’)”
  19. “// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =‘ Trigger Dashboard ’)”
  20. “// h3 (text () =‘ Внутрішній опис ’)”
  21. “// h3 (містить (текст (),‘ Рівень гелію ’)) / follow-sibling :: div / label / input”
  22. “// div (div (p (містить (текст (),‘ Статус ’))))) / preceding-sibling :: div / div / span (3) / span”
  23. “// * (@ id =’ COUPLING ’) // * (містить (text (),‘ COUPLE Trend ’)) /../ div / select”
  24. “// * (@ id =’ ffaHeaderDropdown ’) // a (містить (text (),‘ Почати робочий процес ’))”

Сподіваюся, ця інформативна стаття збагатила б ваші знання про написання XPaths.

Автор біографії: Ця стаття написана Аднаном Аріфом, ІТ-спеціалістом, який має різноманітний досвід та навички у своїй кар'єрі, що триває понад 9 років.

Рекомендована література

^