In this chapter, we are going to discuss the XPath and various XPath expressions that are capable of locating complex and dynamic web elements on the web page.

Dynamic web elements are elements on the web page whose attributes get changed dynamically when refreshed or on dynamic operations. As we know that in Selenium WebDriver, if we cannot find the web elements with the help of usual locators such as id, class, name, etc. then we use XPath to find such a complex Web Element using WebDriver API.

Definition of XPath:

XPath is nothing but the XML Path. It helps in locating any element on a web page that uses traditional XML path expression. XPath uses HTML DOM structure that looks like XML path expression. Following is the syntax of XPath.

The syntax for XPath:

XPath defines the path of the element present on a web page. Following is the standard syntax for creating XPath.

Xpath=//Tag_name[@attribute_name=’value’]

• // : It is used to select the current node.
• Tag_name: It is the name of the tag of a particular node.
• @: It is used to select to select attribute.
• Attribute_name: It is the name of the attribute of the node.
• Value: It is the value of the attribute.

Following are the different types of locators to locate a web element on a web page.

Various types of X-path:

Xpath are of two types as follows.

• Absolute Xpath: It is the most straight forward way of locating a web element but the demerit for the absolute Xpath is that it gets failed when there are any changes made in the Xpath of the web element on the HTML document. It has a characteristic that it begins with a single forward slash character (‘/’) i.e. selecting an element starting from the root node. Following is the syntax cum example for an absolute XPath expression of the element

html/body/div[1]/section/div[1]/div/ div/div[3]/div/div/div/div/div[2]/div[1]/div/h3[2]/b

• Relative Xpath: For this type of Xpath, the path begins from the middle of the HTML DOM (Document Object model) structure. It has a characteristic that it begins with a double forward slash character (‘//’) i.e. selecting a web element from anywhere of the web page. It has a benefit to begin from the middle of the HTML DOM structure and abstain from writing long XPath starting from the root node. Following is the syntax cum example for a relative XPath expression of the element

Relative xpath: //*[@class=’class-test-box’]//*

Xpath axes:

Xpath axes are used to search various nodes in XML document from the current node context. These are the methods which are used to locate those web elements which cannot be located by the normal Xpath method that does not have ID, Class name, name, link text, CSS path, etc. Therefore, axes have the use to locate the web elements that changes dynamically on refresh or on dynamic operations.

Examples of axes are ancestor, parent, child, sibling, preceding, self, etc.

Handling complex & dynamic web elements by using XPath:

1) Basic Xpath: This kind of Xpath expression selects nodes or list of nodes on the basis of attributes such as name, class name, id, etc. Following are the examples of basic xpath expressions.

• Xpath=//input [@type=’password’]
• Xpath=//label [@id=’label1′]
• Xpath=//input [@value=’RUN’]
• Xpath=//*[@class=’test-tuts’]
• Xpath=//a [@href=’http: //softwaretestingclass.com/’]

2) Contains(): It is a method that is used in an XPath expression. When the value of any attribute changes dynamically e.g. login information, this method come into use. It can locate a web element with the available partial text. Following are the examples of contains () method.

• Xpath=//*[contains (@type, ‘sub-type’)]
• Xpath=.//* [contains (@name, ‘button’)]
• Xpath=//*[contains(@id, ‘login’)]
• Xpath=//*[contains(text (),’testing’)]
• Xpath=//*[contains (@href,’softwaretestingclass.com’)]      

3) Using OR & AND: In the case of the OR expression, we use two conditions. Here either 1st condition OR 2nd condition should be true. It is applied towhen one condition is true or both. It means that at least one condition should be true to find a web element. Following is the examples of OR expression.

• Xpath=//*[@type=’submit’ OR @name=’buttonSubmit’]

In the case of the AND expression, we use two conditions. Here both conditions should be true to locate a web element. It will fail to locate an element if any of the conditions are false. Following are the examples of AND expression.

• Xpath=//input[@type=’submit’ AND @name=’buttonEnter’]

4) Start-with function: This function is used to find a web element whose value of attribute changes on the refresh or on any dynamic operation on the web page. In this expression, we match the starting text of the attribute that is used to locate an element whose attribute has changed dynamically. E.g.On the web page ID of a particular element changes dynamically such as ‘id1’, ‘id2’, ‘id3’, etc. but the text remains the same. Following are the examples of starts-with expression.

• Xpath=//label[starts-with(@id, ‘message’)]

5) Text(): This expression is used with the text function to locate an element with exact text. Following are the examples of text expression.

• Xpath=//td

6) XPath axes methods: We use XPath axes methods are used to locate the complex or dynamic web elements on the web page. Following are the Xpath axes methods.

a)Following: This method selects all the elements in the HTML document from the current node. Below is an example.

• Xpath=//*[@type=’password’]//following::input
• Xpath=//*[@type=’password’]//following::input[2]

b) Ancestor: This method selects all the ancestors’ element such as grandparent, parent, etc. from the current node. Below is an example.

• Xpath=//*//ancestor::p
• Xpath=//*//ancestor::div [2]

c) Child: This method selects all the children elements from the current node. Below is an example.

• Xpath=//*[@id=’navigation-list’]/child::li
• Xpath=//*[@id=’navigation-list’]/child::li[2]

d) Preceding: This method selects all the nodes that come before the current node. Below is an example.

• Xpath=//*[@type=’text’]//preceding::input
• Xpath=//*[@type=’text’]//preceding::input[3]

e) Following-sibling: This method Select the following siblings from the context node. Siblings are located at the same level of the current. Below is an example.

•  xpath=//*[@type=’text’]//following-sibling::input

f) Parent: This method selects the parent of the current node. Below is an example.

• Xpath=//*[@id=’soft-test-class’]//parent::div
• Xpath=//*[@id=’soft-test-class’]//parent::div[1]

g) Self: This method selects the current node. Below is an example.

• Xpath =//*[@type=’text’]//self::input

h) Descendant: This method selects the descendants of the current. Below is an example.

• Xpath=//*[@id=’soft-test-class’]//descendant::a
• Xpath=//*[@id=’soft-test-class’]//descendant::a[1]

Conclusion

In this chapter, we have learned all the possible Xpath and the expression to locate any web element on the web page for testing automation.

 
If you are not regular reader of this website then highly recommends you to Sign up for our free email newsletter!! Sign up just providing your email address below:

 
Happy Testing!!!