Selenium Webdriver Tutorials

XPath Methods to identify Dynamic Web elements in Selenium

In our earlier post ‘Introduction To XPath | Selenium XPath Examples’ we learnt that XPath is one of the most popular element locator technique in Selenium along with CSS selector, i.e. mastering XPath methods or CSS is essential for the Selenium test automation. We learnt what is XPath, its syntax and types. In this article we will explore some powerful capabilities of XPath methods which open up many new methods for locating complex and even dynamic elements which in the end, make your scripts easier to maintain.

Many a times in automation, we either don’t have unique attributes of the elements or the elements are dynamically generated with the attribute’s value not known beforehand. For cases like these, XPath provide different methods of locating elements like – using the text written over the elements; using element’s index; using partially matching attribute value; by moving to sibling, child or parent of an element which can be uniquely identified etc.

Selenium XPath Methods and XPath Examples

Basic XPath | Locating Elements with Attributes

Basic XPath methods use other unique attributes like ID, Name, Class name, etc. to identify the element.

//Tag-name[@Attribute-name=’Value’]

For example, if you inspect email text box at Gmail login page,

<input id=”Email” type=”email” value=”” spellcheck=”false” name=”Email” placeholder=”Enter your email” autofocus=””>

We can find unique id or name attributes’ value. Using any of these attributes we can generate a corresponding XPath.

//input[@id=’Email’]

//input[@name=’Email’]

Text() | Locating Elements with Known Visible Text

Say you want to identify element with the text displayed on screen. For this we can use the XPath text() method to find the element with exact text match. Please note that the text is case sensitive.

//Tag-name[text()=’Exact text’]

For example, if you inspect Sign in button at Google.co.in page,

<a class=”gb_3e gb_Ia gb_xb” id=”gb_70″ href=”https://accounts.google.com/ServiceLogin?hl=en&amp;passive=true&amp;continue=https://www.google.co.in/” target=”_top”>Sign in</a>

Using visible text ‘Sign in’ on the button, we can generate a corresponding XPath method.

driver.findElement(By.xpath(“//a[text()=’Sign in’]”));

Locating by the visible text is not advisable if you are testing a multilingual application OR same text is appearing in more than one location.

Contains() | Locating Element using part of the visible text

Say you are generating an XPath method using visible text, but the text is dynamic. Dynamic in the sense it changes with every page refresh. But some part of the text (partial text) remains fixed. In that case we can use the contains() XPath method to find the element with partial text match. Please note that the text is case sensitive.

//Tag-name[contains(text(),’Partial text’)]

//Tag-name[contains(@Attribute-name,’Partial text’)]

For example, if you inspect Sign in button at Google.co.in page,

<a class=”gb_3e gb_Ia gb_xb” id=”gb_70″ href=”https://accounts.google.com/ServiceLogin?hl=en&amp;passive=true&amp;continue=https://www.google.co.in/” target=”_top”>Sign in</a>

Using partial text ‘Sign’ on the button, we can generate a corresponding XPath.

driver.findElement(By.xpath(“//a[contains(text(),’Sign’)]”));

OR

driver.findElement(By.xpath(“//a[contains(@id,’gb’)]”));

This Xpath method is particularly helpful for locating dynamic values whose some part remains constant.

Using OR & AND | Locating Elements with Multiple Attributes

Sometimes it may not be possible to locate an element with a single attribute. Why do you think we have First name + Last name to recognize a person without any confusion 🙂

//Tag-name[Attribute1=’value1’][Attribute2=’value2’]…[AttributeN=’valueN’]

Taking above example of email text box at Gmail login page, we can use id and name attributes’ value. Using any of these attributes we can generate a corresponding XPath using AND / OR.

<input id=”Email” type=”email” value=”” spellcheck=”false” name=”Email” placeholder=”Enter your email” autofocus=””>

  • AND: All conditions need to be true.
  • OR: Statement is true even if any one of the condition is true

AND: //input[@id=’Email’][@name=’Email’]

OR: //input[@id=’Email’ OR @name=’Email’]

Start-with | Locating elements when starting text is known

Say the ID of a particular element changes dynamically like message12, message 576, message 1938 and so on…but if you notice, it starts with a particular text. Start-with XPath method matches the starting text of the attribute to find the element whose attribute changes dynamically.

//Tag-name[starts-with(text(),’Starting text’)]

//Tag-name[starts-with(@Attribute-name,’Starting text’)]

Taking same example of ‘Sign In’ button at Google page,

driver.findElement(By.xpath(“//a[starts-with(text(),’Sign’)]”));

driver.findElement(By.xpath(“//a[starts-with(@id,’gb’)]”));

XPath methods using axes

These XPath methods using axes are used to find the complex or dynamic elements. An XPath axis tells the XPath processor which “direction” to head in as it navigates around the hierarchical tree of nodes. XPath has a total of 13 different axes, here we will look at some popular ones.

  • Ancestor: contains the ancestors of the context node – //Tag-name[text()=’Value’]//ancestor::node()
  • Child: contains the children of the context node – //Tag-name[@Attribute-name=’Value’]/child::table
  • Descendant: contains the children of the context node – //Tag-name[@Attribute-name=’Value’]//descendant::node()
  • Following: contains all nodes which occur after the context node, in document order – //Tag-name[@Attribute-value=’Value’]//following::node
  • Namespace: contains all the namespace nodes, if any, of the context node
  • Parent: Contains the parent of the context node if it has one – //Tag-name[@Attribute-name=’Value’]//parent::node()
  • Preceding: contains all nodes which occur before the context node – //Tag-name[@Attribute-name=’Value’]//preceding::node()

Using element’s index

By providing the index position in the square brackets, we can move to the nth element satisfying the condition e.g. //div[@Attribute-name=’Value’]/input[4] will fetch the fourth input element inside the div element.

Hope this article helped you in understanding different XPath methods to identify elements, especially dynamic elements!

Leave a Reply

Your email address will not be published. Required fields are marked *