Advanced Xpaths

Here I am going to discuss advanced usage of XPaths.
I will provide examples how to use XPath Axes.

Descendants

A node's children, children's children, etc.

In the following example; descendants of the form element are the div, title, author, year, and price elements

<form>
<div>
  <title>Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</div>
</form>

Here is Example:

If you want to find descendants of Div tag you need to use below syntax

//div[@id='browse-category']/descendant::*

If you want a specific element from descendants then use below syntax

Here I want to identify Payment link using descendant.
//div[@id='browse-category']/descendant::a[@data-category='Payment']

In the above example, the descendant will search for child elements and child's child elements as well.

UL is the child element for DIV and LI is the child element for UL and A is child element for LI. As we used descendant it will check for the matching element.



Following:
Selects everything in the document after the closing tag of the current node.


selects all elements after closing tag of P

//p[@class='fk-font-14']/following::*

if you want a specific element using following below is the example

//p[@class='fk-font-14']/following::div[@id='fk-mainfooter-id']

Following-sibling:

Selects all siblings after the current node.
//div[@id='browse-category']/ul/li/following-sibling::*
if you want a specific element then

//form[@class='faqsearchform']/following-sibling::div

Preceding :

Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes, and namespace nodes

preceding-sibling
Selects all siblings before the current node

Here is the example:

//div[@id='browse-category']/preceding-sibling::form

Now Let us see a real time example how to use the above-mentioned XPath Axes:

Below is scenario:

1. Navigate to Flipkart
2. add two products to cart
3. I want to remove one product based on its name.

Simple xpath without using product name --- //a[@class='cart-remove-item fk-inline-block fk-uppercase'] but it always identifies first Remove button.

First Step: I will identify xpath for product Name

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']

From there onward using XPath Axes I need to identify Remove link.

By looking at DOM we can understand that there are two TR tags 

in one TR --we have product details and in another TR, we have remove link.

so I have to traverse to the second TR.

Second Step: Inorder to do that I need to traverse to parent element of span

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]

Third Step: from there traverse to sibling of TR

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]/following-sibling::tr

Fourth Step: From there traverse to tag A which has link text of Remove..here is the final xpath

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]/following-sibling::tr

/descendant::a[text()='Remove']

Hope this is useful in writing advanced xpaths.