Need of XPath and Examples

Generally, the GUI objects will be identify by the locators id, name, class etc., however it is very difficult to identify the dynamic object on the DOM. Dynamic Object Model (DOM) is an application programming interface (API) for HTML and XML documents, it defines the logical architecture as shown above.

There are few techniques available in XPath where in you can easily identify the GUI dynamic objects without any waste of time. Refer the above snapshot to under the below example

Syntax = //tagname[@attribute=’Value‘]

Example = //input[@id=’user-message‘]

There are two type of Xpaths:

1.  Absolute Xpath – Refers to complete path of an object on the page, denotes by single slash i.e., /       Example: /html/body/div[2]/div/div[2]/div[1]/div[2]/form/div/input
2.  Relative Xpath – Refers to a path of an object on the page from a landmark, denotes by double slash i.e., //  Example: //form/div/input

Few Xpath Keywords

1. Contains - //tagname[contains(@attribute, ‘value‘)] – Checks for the value given in the code on your web page
2. Starts-with - //tagname[starts-with(@attribute, ‘value‘)] – Checks for the value given in the code that starts with on your web page
3. Multiple Xpaths - //tagname[@attribute=’Value‘]//tagname[@attribute=’Value‘] – Checks for the values given in both the xpaths code on your web page
4. Operator “or” - //tagname[@attribute=’Value‘ or @attribute=’Value‘] – Checks for the values given in the code that is there on your web page at least one value from both of them
5. Operator “and” - //tagname[@attribute=’Value‘ and @attribute=’Value‘] - Checks for the values given in the code that is there both the values on your web page
6. Text - //tagname [text()=’text value‘] - Checks for the value given in the code that is present on your web page
7. Ancestor - //*[@class=’ClassName’’]//ancestor::div - First, it finds the class which class is “ClassName” and then, starts finding div elements in the page.
8. Following - //tagname[@id=’idName’]//following::input - First, it finds the form which id is “’idName” and then starts to find all input elements after that node.
9. Child - //*[@class=’ClassName’]//ul[@id=’idName’]/child::li - Selects all children elements of the current node.
10. Preceding - //img[contains(@src,’srcName’)]//preceding::li - First, will locate the bottom element, then use preceding with “li” to find all “li” elements
11. Following-sibling - //*[@class=’className’]/child::div[2]//*[@class=’className’]//following-sibling::li - First, will locate child div elements, and then li elements of following li siblings
12. Descendant - //*[@class=’className’]//*[@id=’idName’]//descendant::li - First, will locate className, and then descendant li elements
13. Parent - //*[@id=’idName’]/button//parent::form   - Finds the parent name of the button
14. Locate an Element inside Array of Elements –

• //span[contains(text(),’tableValue’)]
• (//span[contains(text(),’tableValue’)])[1]
• (//span[contains(text(),’tableValue’)])[1]/following-sibling::strong[@class=’className’]