In QA automation, the application of XPath can’t be undervalued, and you can inarguably say that it is a flagship locating strategy that is being used beside other strategies to locate elements on spectrum of testing frameworks. In all possibilities, it has potential in a way to be used in place of any other locating strategy with ease; however, the reverse always can’t be true.
Let’s explore in this post that as to how differently one could identify elements on a page only using XPath (and without axes), and to explain this further with an example, let’s take the header menu “My Network” on LinkedIn; HTML structure of this anchor tag with its parent is being shown below and can be referenced when required.
<li class="global-nav__primary-item">
<a class="app-aware-link global-nav__primary-link--active global-nav__primary-link" target="_self" href="https://www.linkedin.com/mynetwork/?doMynetworkRefresh=true" data-test-app-aware-link="" aria-current="page">
<div class="ivm-image-view-model global-nav__icon-ivm">
<div class="ivm-view-attr__img-wrapper ivm-view-attr__img-wrapper--use-img-tag display-flex">
<li-icon aria-hidden="true" type="people-active" active="true" size="large"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M12 6.5a4.5 4.5 0 114.5 4.5A4.49 4.49 0 0112 6.5zm6 6.5h-3a3 3 0 00-3 3v6h9v-6a3 3 0 00-3-3zM6.5 6A3.5 3.5 0 1010 9.5 3.5 3.5 0 006.5 6zm1 9h-2A2.5 2.5 0 003 17.5V22h7v-4.5A2.5 2.5 0 007.5 15z"></path>
</svg></li-icon>
</div>
</div>
<span class="t-12 break-words block t-black--light t-normal global-nav__primary-link-text" title="My Network">
My Network
</span>
</a>
</li>//a[contains(@href,’mynetwork/?’)]
– an anchor tag and its attribute ‘href’ must contain ‘mynetwork/?’
(//nav//a)[2]
– the second anchor tag within ‘nav’ tag, and the second anchor tag is our ‘My Network’ link
//a[.//span[normalize-space()=’My Network’]]
– the contextual anchor tag and it must have a child span tag that has a text ‘My Network’
//li[starts-with(@class,’global-nav’)]//a[contains(normalize-space(),’My Network’)]
– an anchor tag or any of its children contains the text ‘My Network’ and it needs to be within the list tag that a class starting with ‘global-nav’
//span[@title=’My Network’]/..
– this returns the parent of span tag that has title ‘My Network’
Knowing to build XPath skilfully will go a long way in building and maintaining stable automation test suites, as one could see often that XPath breaking due to the changes in UI layouts is a major cause of concern on test flakiness.
Hoping that you find this post interesting and useful. Thank you!
Veera.
