View source for Reference - XPath and Locators

{{: Header_Nav}}
[[File:HTMLAnatomy.png|frameless|931x931px]]


'''XPath Locator Fundamentals'''

The following are Best Practice XPath models to be used in object location for automated testing. A few fundamental rules to apply when setting up object locators.

# Tune XPath locators using Chrome browser and Developer Tools. Craft minimum number of attributes necessary to reliably locate an object, typically 1 HTML Tag and 1 Attribute Tag are all that’s needed.
# Locators should typically begin with an HTML Tag followed by an Attribute Tag such as ID or Name.
# Error on the side of data-testid, id or Name attributes as these tend not to change as often when an application goes through look-and-feel changes.
# Avoid using Class or other look-and-feel attributes in XPath locators as these are most likely to change over time.

{| class="wikitable" style="width: 100%;"
|+
! colspan="4" |Most to Least Desirable Locator Attributes
|-
|'''Multi'''
|'''Description'''
|'''XPath'''
|'''HTML Sample'''
|-
|
|<code>data-testid</code>
|<code>{xpath: "//input[@data-testid='TransferAmount']"}</code>
|
|-
|
|<code>id</code>
|<code>{xpath: "//button[@id='ChangePasswordForm_save']"}</code>
|
|-
|
|<code>value</code>
|<code>{xpath: "//input[@value='Get the Free Guide!']"}</code>
|
|-
|
|<code>class</code>
|<code>{xpath: "//button[@class='ResetBudget']"}</code>
|
|-
|
|<code>type</code>
|<code>{xpath: "//input[@type='password']"}</code>
|
|-
|
|<code>contains(text)</code>
|<code>{xpath: "//div[contains(text(), 'Transactions')]"}</code>
|
|-
|
|<code>name()</code>
|<code>{xpath: "//*[name()='svg' and @class='ct-chart-line']"}</code>
|
|}
{| class="wikitable" style="width: 100%;"
|+
! colspan="4" |XPath Best Practice Examples
|-
|'''Multi'''
|'''Description'''
|'''XPath'''
|'''HTML Sample'''
|-
|
|<code>Page containing Text</code>
|<code>{xpath: "//*[text()='Start free trial']"}</code>
|
|-
|
|<code>Page containing Text with escaped apostrophe</code>
|<code>{xpath: "//*[text()='Don\'t remember it? No problem,']"}</code>
|
|-
|
|<code>Header containing Text</code>
|<code>{xpath: "//h1[contains(text(),'Dashboard')]"}</code>
|
|-
|
|<code>Header containing Text (normalized)</code>
|<code>{xpath: "//h6[normalize-space()='My Timesheets']"}</code>
|<code><h6 class="abc123">My Timesheets</h6></code>
|-
|
|<code>Anchor containing Text</code>
|<code>{xpath: "//a[contains(text(),'Remove')]"}</code>
|<code><a href="www.someurl.com">Remove</a></code>
|-
|
|<code>Anchor containing href</code>
|<code>{xpath: "//a[contains(@href,'/report/admin/advisors/')]"}</code>
|<code><a href="/report/admin/advisor">5417 QA</a></code>
|-
|
|<code>Anchor with class</code>
|<code>{xpath: "//a[@class='AppBadges']"}</code>
|<code><a class="AppBadges" href="https://itunes.apple.com"></code>
|-
|
|<code>Button with ID</code>
|<code>{xpath: "//button[@id='company_advisor']"}</code>
|<code><button id="company_advisor">Add Advisor</button></code>
|-
|
|<code>Button containing Text</code>
|<code>{xpath: "//button[contains(text(),'Create My Account')]"}</code>
|<code><button type="button">Create My Account</button></code>
|-
|
|<code>Span containing Text</code>
|<code>{xpath: "//span[contains(text(),'Next')]"}</code>
|
|-
|
|<code>Input with Name</code>
|<code>{xpath: "//input[@name='firstName']"}</code>
|
|-
|
|<code>Input with Value, Indexed</code>
|<code>{xpath: "(//input[@value='View Details'])[2]"}</code>
|
|-
|
|<code>Select with Name</code>
|<code>{xpath: "//select[@name='country']"}</code>
|<code><select name="country"></code>
|-
|
|<code>Select with ID</code>
|<code>{xpath: "//select[@id='salesforce_web_lead']"}</code>
|<code><select id="salesforce_web_lead"></code>
|-
|
|<code>Textarea with ID</code>
|<code>{xpath: "//textarea[@id='salesforce_web_lead_description']"}</code>
|
|-
|
|<code>Span with Class containing specific text</code>
|<code>{xpath: "//span[@class='card-title'][contains(text(),'Income')]"}</code>
|<code><nowiki><span class="card-title">Income</span></nowiki></code>
|-
|
|<code>Named element with class</code>
|<code>{xpath: "//*[name()='svg' and @class='ct-chart-line']"}</code>
|<code><svg xmlns:ct="<nowiki>http://www.github.com/chartist-js/ct</nowiki>" class="ct-chart-line"></svg></code>
|-
|
|<code>Named element with attribute</code>
|<code>line = //*[name()='line' and @y1='213']</code>
|<code><line y1="213" y2="213" x1="50" x2="544.453125" class="ct-grid ct-vertical"></line></code>
|-
|<code>*</code>
|<code>Section with class name & Span containing text</code>
|<code>{xpath: "//section[@class='HeroRow']//span[contains(text(),'Live')]"}</code>
|<code><section class="HeroRow"></code>
<code>  <nowiki><div class="HeroRow-wrapper"></nowiki></code>

<code>     <nowiki><h1 class="HeroRow-header"></nowiki></code>

<code>        <nowiki><span style="white">Live</span></nowiki></code>
|-
|<code>*</code>
|<code>Sibling and value</code>
|<code>{xpath: "//h2[contains(text(),'Profit')]/following-sibling::progress[@value='100']"}</code>
|<code><nowiki><h2 class="gzl-Heading">Profit</h2></nowiki></code>
<code>  <progress class="ResultsGraph" value="100"></progress></code>
|-
|<code>*</code>
|<code>Element and value</code>
|<code>{xpath: "//h3[(@class='desserts') and (contains(text(),'Cookie'))]"}</code>
|<code><nowiki><h3 class="desserts">Cookie</h3></nowiki></code>
|-
|
|<code>iFrame containing text</code>
|<code>{xpath: "//iframe[contains(@src,'cardNumber')]"}</code>
|<code><nowiki><iframe src="https://js.stripe.com/card.html[color]=%23CFD7E0;componentName=cardNumber;"></iframe></nowiki></code>
|}
{| class="wikitable" style="width: 100%;"
|+
! colspan="4" |XPath Brittle Examples
|-
|'''Multi'''
|'''Description'''
|'''XPath'''
|'''HTML Sample'''
|-
|
|<code>The XPath will match any input on the page containing the word Save and is not precise enough.</code>
|<code>{xpath: "//input[@value='Save']"}</code>
|<code>Matches any input containing "Save"</code>
|-
|
|<code>This XPath provides no clues to what it actually references. The nesting of 3 div tags, anchor tags and a span make this extremely unintuitive and brittle.</code>
|<code>{xpath: ".//*[@id='main']/section/div[3]/a/span"}</code>
|<code>Brittle and unintuitive</code>
|-
|
|<code>Another overly nested XPath that provides no clue to what it actually references.</code>
|<code>{xpath: ".//*[@id='main']/section/div[2]/div[2]/a/span"}</code>
|<code>Brittle and unintuitive</code>
|-
|
|<code>Another overly nested XPath that provides no clue to what it actually references.</code>
|<code>{xpath: ".//*[@id='main_navigation']/ol[2]/li[2]/a"}</code>
|<code>Brittle and unintuitive</code>
|-
|
|<code>Another overly nested XPath that provides no clue to what it actually references.</code>
|<code>{xpath: "//table[@id=':if']//tbody[1]//tr[1]"}</code>
|<code>Brittle and unintuitive</code>
|-
|
|<code>The XPath must match this entire string to pass. Unless this exact string is required, this text should be trimmed down to a much smaller sample.</code>
|<code>{xpath: "//*[text()='Your email is already in use. Simply enter your existing password below.']"}</code>
|<code>Excessively long and brittle</code>
|-
|
|<code>This XPath should probably only contain the H2 tag and ID which would be queried to determine if "Firms" existed within it.</code>
|<code>{xpath: "//h2[@id='page_title'][contains(text(), "Firms")]"}</code>
|<code>Excessive locators</code>
|-
|
|<code>The iFrame should be referenced by name or ID if possible. This may be acceptable in certain scenarios. Talk to Dev about adding naming to make this better testable.</code>
|<code>{xpath: "//iframe[@tabindex='-1']"}</code>
|<code>Exclusively referenced by Index</code>
|}
{| class="wikitable"
|+
! colspan="4" |XPath Special Examples
|-
|'''Multi'''
|'''Description'''
|'''XPath'''
|'''HTML Sample'''
|-
|
|<code>Entire HTML Source Code</code>
|<code>{xpath: "/html"}</code>
|
|-
|
|<code>HTML Body Source Code</code>
|<code>{xpath: "/html/body"}</code>
|
|-
|
|<code>All Links</code>
|<code>{xpath: "//a"}</code>
|
|-
|
|<code>All Images</code>
|<code>{xpath: "//img"}</code>
|
|-
|
|<code>All JPG Images</code>
|<code>{xpath: "//img[contains(@src,'.jpg')]"}</code>
|
|-
|
|<code>All JPG Images (alt 1)</code>
|<code>{xpath: "//*[contains(@src,'.jpg')]"}</code>
|
|-
|
|<code>All GIF Images</code>
|<code>{xpath: "//img[contains(@src,'.gif')]"}</code>
|
|-
|
|<code>All PNG Images</code>
|<code>{xpath: "//img[contains(@src,'.png')]"}</code>
|
|-
|
|<code>All SVG Images</code>
|<code>{xpath: "//img[contains(@src,'.svg')]"}</code>
|<code><img src="https://cdn.paskalfamily.com/footer-logo.svg"></code>
|-
|
|<code>All JPG or PNG Images</code>
|<code>{xpath: "//img[contains(@src,'.jpg') or contains(@src,'.png')]"}</code>
|
|}
{| class="wikitable"
|+
! colspan="3" |Locator Naming Convention and Abbreviations
|-
|'''Description'''
|'''Abbreviation'''
|'''Example'''
|-
|<code>Button</code>
|<code>BUT</code>
|<code>LO_BUT_SEARCH = { xpath: "//input[@value='Search']" }.freeze</code>
|-
|<code>Checkbox</code>
|<code>CBX</code>
|<code>LO_CBX_TERMS_AND_CONDITIONS = { xpath: "//input[@id='termsAccepted']" }.freeze</code>
|-
|<code>Dialog Box</code>
|<code>DIA</code>
|<code>LO_DIA_ORDER_CONFIRMED</code>
|-
|<code>Dropdown List</code>
|<code>DPD</code>
|<code>LO_DPD_STATE = { xpath: "//select[@id='state']" }.freeze</code>
|-
|<code>Edit Box</code>
|<code>EDT</code>
|<code>LO_EDT_WEIGHT = { xpath: "//input[@name='weight']" }.freeze</code>
|-
|<code>Edit Textarea</code>
|<code>ETX</code>
|<code>LO_ETX_DETAILS</code>
|-
|<code>iFrame</code>
|<code>IFRAME</code>
|<code>LO_IFRAME_STRIPE = { xpath: "//iframe[contains(@data-src, 'stripe')]" }.freeze</code>
|-
|<code>Image</code>
|<code>IMG</code>
|<code>LO_IMG_GOOGLE = { xpath: "//img[@id='hplogo']" }.freeze</code>
|-
|<code>Hyperlink</code>
|<code>LNK</code>
|<code>LO_LNK_AMAZON = { xpath: "//a[@id='amazonOrder']" }.freeze</code>
|-
|<code>Menu</code>
|<code>MNU</code>
|<code>LO_MNU_MAIN</code>
|-
|<code>Menu Item</code>
|<code>MUI</code>
|<code>LO_MUI_PRIN</code>
|-
|<code>Radio Button</code>
|<code>RDO</code>
|<code>LO_RDO_SHIPPING = { xpath: "//label[@for='shipping_ups']" }.freeze</code>
|-
|<code>Text</code>
|<code>TXT</code>
|<code>LO_TXT_DESCRIPTION = { xpath: "//h2[contains(text(), 'This Texas BBQ is one of the best')]" }.freeze</code>
|-
|<code>Toolbar</code>
|<code>BAR</code>
|<code>LO_BAR_TOOLS</code>
|-
|<code>Window</code>
|<code>WIN</code>
|<code>LO_WIN_SETTINGS</code>
|}

== XPath Learning and References: ==
XPath Tutorial - https://www.w3schools.com/xml/xpath_intro.asp

XPath Syntax Details - https://www.w3schools.com/xml/xpath_syntax.asp

Online XPath Experimentation Tool - http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm

Another xPath Cheatsheet - https://devhints.io/xpath