Locating Element by Xpath - Part 3

XPath Axes methods

Axes are used to identify elements by their relationship like parent, Child, ancestor, preceding, sibling, etc., and is used to locate nodes relative to that node on the tree.

Note: we are  https://www.facebook.com/  url for below examples.

Parent

The parent axis contains only a maximum of one node. The parent node may be either the root node or an element node. the parent axis contains one node.

Ex:

//a[text()='Sign Up']/parent::* 

Result : It will selects parent of the ‘Sign Up’ link node

Ex: //a[text()=’Sign Up’]//parent::*

There are 2 nodes matching by using "parent" axis

Note:

1)   If you give Parent::*  , it will select parent of the current node and it will not look on the tag name because we are using *(means any tag).

2)   If you give Parent::div, it selects only div parent node.

3)   if you give single forward slash(/) before the parent axis (Ex: /parent::) it will select only parent of the current node.

4)   if you give double forward slash(//) before the parent axis (Ex: //parent::) it will select parent as well as current node

ancestor

Selects all ancestors (parent, grandparent, etc.) of the current node.

We are finding the ancestor of the current node using below XPath axis expression

//a[text()='Sign Up']//ancestor::*

There are 10 elements are matching using above expression.

Few more formations”:

//a[text()='Sign Up']//ancestor::div

There are 5 elements are matching using above expression. if you want access the elements individually you can use the expression as below.

//a[text()='Sign Up']//ancestor::div[2]

//a[text()='Sign Up']//ancestor::div[@id='globalContainer']

ancestor-or-self

It locates the current node and its ancestors.

//a[text()='Sign Up']//ancestor-or-self::div

There are 5 elements are matching using above expression. if you want to access the elements individually you can use the expression as below.

//a[text()='Sign Up']//ancestor-or-self::div[3]

Following

Following axis locate all nodes that come after the current node.

We are finding the following nodes of the current node using below example.

//div[@aria-label='Facebook site links']//following::a

There are 29 elements are matching , if you want to access individually you can use below expression.

//div[@aria-label='Facebook site links']//following::a[text()='Messenger']

Or

//div[@aria-label='Facebook site links']//following::a[2]

Few more Examples 

//div[@aria-label='Facebook site links']//following::*

//div[@aria-label='Facebook site links']/following::a[last()]

Following Sibling 

It locating the following siblings of the context node. Siblings are at the same level as the current node and share it's parent.

Below is the example to locate the following-sibling nodes of the current node.

//div[@aria-label='Facebook site links']//following-sibling::li

Descendant

 It locates the descendants of the current node i.e. the node's children up to the leaf node (no more children).

Below example ,it locates all descendants of the current node.

//div[@aria-label='Facebook site links']//descendant::a

There are 30 elements are located for above expression. If you want to access individually elements you can use either one of the below expression.

//div[@aria-label='Facebook site links']//descendant::a[2]

Or

//div[@aria-label='Facebook site links']//descendant::a[text()='Log In']

descendant-or-self

It specifies the current node and it's descendants. 

Examples:

//div[@aria-label='Facebook site links']//descendant-or-self::li 

//div[@aria-label='Facebook site links']//descendant-or-self::li[3]

Preceding

It specifies all nodes that come before the current node (i.e. before it's opening tag).

Below example, it locates all preceding nodes of the current node.

//div[@aria-label='Facebook site links']//preceding::div

There are 110 elements are located for above expression. If you want to access individually elements you can use either one of the below expression. 

//div[@aria-label='Facebook site links']//preceding::div[@class='_3_s0 _1toe _3_s1 _3_s1 uiBoxGray noborder'] 

Or

//div[@aria-label='Facebook site links']//preceding::div[3] 

Few more examples 

//div[@aria-label='Facebook site links']//preceding::div[position()=110] 

It will locate 110^th div position from the top.

Preceding-Sibling 

The preceding-sibling axis selects those nodes which are siblings of the context node (that is, the context node and its sibling nodes share a parent node) and which occur earlier in document order than the context node.

//div[@aria-label='Facebook site links']//preceding-sibling::*

Attribute 

It select the attributes of the current node. 

Below is the example to locate the class attribute of the current node

//div[@aria-label='Facebook site links']//attribute::class

Note: which ever attribute you are specifying that attribute nodes only will select.

Child

Selects all nodes that are children of the current node. 

Below example, it locates all Child nodes of the current node.

//div[@aria-label='Facebook site links']//child::a

it will select all child nodes of current node specific to ‘a’ node only, other than ‘a’ is there It will not select 

There are 30 elements are located for above expression. If you want to access individually elements you can use either one of the below expression. 

//div[@aria-label='Facebook site links']//child::a[text()='Log In'] 

Child::Text()

Selects all text node children of the context node 

//div[@aria-label='Facebook site links']//child::text()

Self

It specifies the current node. 

Below is the example

//div[@aria-label='Facebook site links']/self::*