Меню

Крайно XPath писане Cheat Sheet Урок със синтаксис и примери

ultimate xpath writing cheat sheet tutorial with syntax

Опитайте Нашия Инструмент За Премахване На Проблемите

Топ 20 начина за писане на Ultimate XPATH за ВСЕКИ тип уеб елемент (XPATH никога няма да бъде невалиден):

Уеб приложението се състои от различни видове уеб елементи като уеб елемент за бутон, върху който да щракнете, въвеждане на уеб елемент за въвеждане на текст, падащо меню, радио бутони и др.

Тези уеб елементи се наричат ​​още тагове или възли.

Когато става въпрос за автоматизиране на уеб приложения, той започва с писане на скрипт за автоматизация, който ще намери уеб елемента, ще извърши действие върху него, като например щракване върху бутон, въвеждане на текст в полето за въвеждане, поставяне на отметка, избор на радио бутон, превъртете нагоре или надолу и накрая проверете очакваното поведение в замяна на действието.

20 НАЧИНА ЗА ПИСАНЕ НА XPATH ЗА ВСЕКИ ТИП УЕБ ЕЛЕМЕНТ

Какво ще научите:

Какво представлява XPath и как изглежда?

Намирането на елемент е като намирането на нечия къща на картата. Единственият начин да намерим дома на приятел без никаква външна помощ е, че трябва да имаме карта и да знаем какво да намерим (къща).

За да поставим тази аналогия в нашия случай, картата ще се използва като DOM (HTML тагове, JavaScript и др.), Където съществуват всички уеб елементи, заедно със специфичния уеб елемент, който искаме да намерим.

След като се намери уникалният адрес или път на елемент, скриптът за автоматизация ще извърши някои действия върху него въз основа на тестовия сценарий. Например, искате да проверите URL адреса на страницата, който се отваря след щракване върху бутон.

Не е лесно обаче да се намери уникален адрес / път на уеб елемент, тъй като може да има подобни маркери, същите стойности на атрибути, идентични пътища, което затруднява създаването на точен уникален адрес към уеб елемент, наречен „XPATH“.

Тук ще се потопим дълбоко в някои страхотни и ефективни техники за генериране на валидни и уникални XPATH за всеки тип уеб елементи.

Препоръчително четене => Идентифицирайте уеб елементите с помощта на XPath в селен

Понякога можете лесно да създавате XPaths с помощта на разширения на браузъра, но в моя тестване за автоматизация кариера, срещал съм безброй ситуации, в които традиционните разширения на браузъра не работят и трябва да измислите свои собствени персонализирани XPaths, използвайки собственото си творчество. Сигурен съм, че имате или ще се сблъскате с подобни ситуации.

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

Познавайки всички тези техники, вие ще станете майстор на писането на своя XPath и ще можете да пишете убийствени XPaths с много малко шансове да станете невалидни.

Първо, нека започнем с разбирането на синтаксиса на XPath и да дефинираме всяка негова част.

Изображението по-долу ще покаже как ще изглежда XPath заедно с описание на всяка част:

Синтаксис на XPATH

  • //: Изберете текущ възел като вход, div и т.н.
  • Tagname: Име на таг на уеб елемента / възела
  • @: Изберете атрибут
  • Атрибут: Име на атрибута на възела / конкретния уеб елемент
  • Стойност: Стойност на атрибута

Просто искам да споделя няколко съвета тук, че 80% от случаите моят скрипт за тестване на автоматизация се е провалил поради XPath. Това е причинено от наличието на множество уеб елементи за предоставения XPath или XPath не е валиден или страницата все още не е заредена.

Така че, когато вашият тестов случай се провали:

  1. Копирайте вашия XPath.
  2. Потърсете го в браузъра (F12 или прозорец на инструмента за разработчици) в DOM, за да проверите дали е валиден или не (вижте изображението по-долу).

F12 прозорец

Про тип 1: Уверете се, че е уникален и не се появява друг уеб елемент, когато търсите два пъти в DOM.

Про тип 2: Понякога има проблем със синхронизирането, което означава, че вашият уеб елемент / страница все още не е зареден, докато скриптът го е търсил, следователно добавете малко време за изчакване и повторно тестване.

Про тип 3: Опитайте се да отпечатате целия DOM, преди да търсите уеб елемента. По този начин можете да разберете, като погледнете в Console дали вашият уеб елемент съществува в DOM или не.

Преди да се потопим дълбоко в търсенето на XPath, едно важно нещо, което искам да споделя, е, че ако имате директен достъп до екипа за разработка или ако екипът ви се намира там, където се намирате, помолете екипа ви за разработка да ви предостави уникални идентификатори в всеки уеб елемент или поне тези, които искате да използвате за автоматизация и това ще спести много от времето ви.

Ако това не е възможността, тогава може да се наложи да използвате творчеството си и да измислите свои собствени персонализирани XPaths и кое е това, което ще научим сега.

Топ 20 начина за писане на XPath за всеки уеб елемент

Нека да се потопим дълбоко в създаването на 20-те най-добри начина за убиец XPath.

# 1) Обратно търсене

Да кажем, че искате да щракнете върху бутон и има подобен бутон. И двата бутона имат атрибути id, но те са динамични и нито един от атрибутите не е уникален и в двата елемента на бутона.

В сценария по-долу искаме да щракнем върху бутона „Настройка“ на „Тест Интерактив“.

Ревърс Погледни нагоре

Код

Потърсете код

Ако погледнете бутоните „Настройка“, и двата кода са сходни. Използвайки традиционни начини като id, име, стойност, съдържа и т.н., никой от тях няма да работи например.

// * (съдържа (text (), ‘Setting’)), Това ще доведе до два уеб елемента. Следователно не е уникален.

Ето последната стратегия,

>> Първо намерете най-близкия таг, който е уникален и в този случай е такъв

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

>> Второ, намерете най-близкия уеб елемент до предвидения уеб елемент, който в този случай съдържа (text (), ‘TEST Interactive’). Сега сме в същото положение, където съществува бутонът „Настройка“, но за да щракнем върху него, първо трябва да отидем на главния, като използваме двойни точки, както е показано по-долу.

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

Намерете най-близкия уеб елемент

>> Както можете да видите, ние сме на нивото, което има втория уеб елемент като бутон ‘Setting’. Това има два бутона в него и ние искаме да преминем към втория бутон, който е бутонът „Настройка“. Чрез добавяне на „/ бутон (2)“ в края можем да получим нашия уникален XPATH за бутона „Настройка“, както е показано по-долу.

добавяне на „/ бутон (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 („ заглавие “) ще премине към конкретния ред и първата колона и ще получи стойността на атрибута на заглавието. Можем да съхраним действителното име на файл в друга променлива.

След като имаме както очакваните, така и действителните имена на файлове, можем да ги сравним и ако и двете съвпадат, можем просто да кликнете върху връзката му за изтегляне.

(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')”

Сега във всички форми намерете таблицата с id ‘tbl_testdm’.

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

В таблицата отидете на определен ред и колона.

най-доброто място за гледане на безплатни аниме
'//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/”

Ако в клетката има няколко входа, намерете вход, където value = ‘Open RFS’, и това ще ни даде окончателния XPath на полето.

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

# 5) Използване на атрибути, таблици и текст

Да предположим, че вашият предвиден уеб елемент се намира в панелната таблица и има някакъв общ текст.

Първо започнете с панел с уникален атрибут, който в този случай е „НАЗВАНЕ“.

//*(@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 по-долу успях да намеря целевия уеб елемент с помощта на id (относително 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, DIVs, атрибути, за да изляза с окончателния XPATH, както е показано по-долу.

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

# 9) Генериране на XPath с използване на Relative, CONTAINS, REVERSE, FOLLOWING SIBLING и др.

Имах ситуация, в която приложението показва графика и всяка стойност на графиката трябваше да бъде проверена. Но, за съжаление, всяка стойност не е имала уникална идентификация, така че измислих окончателния XPATH, както е показано по-долу, за една стойност на графиката, която съчетава относителни, съдържащи, обратни, след-близнаци и 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, следване, съдържане и др

В крайна сметка бихме казали това отново, че наистина ще улесни живота ви, ако поискате от вашия екип за разработка да добави уникални идентификатори във всички уеб елементи, които ви интересуват.

Всеки път, когато започне цикъл на спринт или се работи по нови изисквания и екипът се споделя с нови макети, аз винаги минавам през всички макети и мисля за потенциални тестови случаи на автоматизация в съзнанието си, изготвям списък с всички потенциални уеб елементи, които ще бъдат използвани в тестове за автоматизация и подготвям собствените си идентификатори.

След като списъкът с всички уеб елементи заедно с предложените ми идентификатори бъде завършен, бих го споделил предварително на разработчика, за да се използва в кода за разработка. По този начин винаги бих получил уникални идентификатори, като улеснявам битката си за писане на XPATH.

По-долу е даден комбиниран списък с различни начини за писане на XPATH:

  1. “// * (@ id =’ rcTEST ’) // * (съдържа (текст (),‘ TEST Interactive ’)) /../ бутон (2)”
  2. “// * (@ id =’ rcTEST ’) // * (съдържа (text (),‘ TEST Interactive ’)) /..//* (съдържа (text (),‘ Setting ’))“
  3. „// * (@ id =’ rcTEST ’) // * (съдържа (текст (),‘ TEST Interactive ’)) / след-брат :: бутон”
  4. “String actualFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (“ // * ”+ fileName +” / tr / td (1) ”)). GetAttribute (“ title ”);”
  5. WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + fileName + ”/ tr / td (4)”)). Щракнете ();
  6. '// адрес (@ class = 'ng-scope ng-isolate-scope') // div (съдържа (., Тестване ') и @ id =' msgTitle ')'
  7. “// * (@ name =’ myForm ’) // таблица (@ id =’ tbl_ testdm ’) / tbody / tr / td (6) /
  8. вход (@ value = ’Open RFS’) “
  9. „// * (@ title =’ Applet List Songs)) // таблица // td (съдържа (текст (), ‘Автор’)) ”
  10. „// * (@ id =’ параметри ’) // * (@ id =’ testUpdateTime ’)”) “
  11. “// * (@ id = 'MODEL / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) / div / div / бутон (1) ”
  12. „// * (съдържа (текст (),’ Гледане набиране)) /../ div / изберете (@ 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. “// * (съдържа (@ стил,’ дисплей: блок; отгоре: ’)) // въвеждане (@ 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 (съдържа (текст (),‘ Ниво на хелий ’)) / след-събрат :: div / label / input”
  22. “// div (div (p (съдържа (текст (),’ Статус ’))))) / predhodно-събрат :: div / div / span (3) / span”
  23. “// * (@ id =’ COUPLING ’) // * (съдържа (текст (),‘ COUPLE Trend ’)) /../ div / select”
  24. „// * (@ id =’ ffaHeaderDropdown ’) // a (съдържа (текст (),‘ Стартиране на работния поток ’))“

Надявам се, че тази информативна статия ще е обогатила вашите знания за писане на XPaths.

Автор Био: Тази статия е написана от Аднан Ариф, ИТ специалист с разнообразен опит и умения в кариерата си в продължение на повече от 9 години.

Препоръчително четене

^