XPath for Selenium, Playwright & Cypress Web Automation Testing

What is XPath?

XPath is a query language that we use to locate or find an element present on the webpage.

Absolute XPath

The Absolute XPath starts from the beginning or from the root node of the HTML DOM structure.

Relative XPath

 Relative XPath starts from where the element is present.

Syntax:  Xpath =  //tagname[starts-wtih(@attribute,’value’)]

Starts-with() Function

Starts-with() Function is used to find the element in which the attribute value starts with some particular character or text.

Contains() Function

Syntax:  Xpath = //tagname[contains(@attribute,’value’)]

Contains() Function is used when if a part of the value of an attribute changes dynamically the function can navigate to the web element with the partial text present.

Syntax:  Xpath =  //tagname[text()=’Actual text present’]

Text() Function

The text() function is used to locate web elements with exact text matches.

Syntax:  Xpath =  //tagname[@attribute=’Value’ or @attribute=’Value’] & Xpath = //tagname[@attribute=’Value’ and @attribute=’Value’]

AND & OR XPaths

AND & OR XPaths is useful if you want to use more than two attributes to find elements on a webpage.

Syntax:  Xpath = //tagname[@attribute=’value’]//parent::parent_tagname

Parent Axis XPath

The Parent Axis XPath node can be either a root node or an element node.

Syntax:  Xpath = //tagname[@attribute=’value’]//child::child_tagname

Child Axis XPath

The Child Axis selects all the child elements present under the current node.

Syntax: Xpath = //tagname[@attribute=’value’]//self::self_tagname

Self Axis XPath

Self Axis XPath  uses its own current node and selects the web element belonging to that current node.

Syntax:  Xpath = //tagname[@attribute=’value’]//descendant::child or grandchild_tagname

Descendant Axis XPath

Descendant Axis XPath  selects all the descendants i.e. child and grandchild of the current node.

Syntax: Xpath = //tagname[@attribute=’value’]//descendant-or-self::tagname

Descendant-or-self Axis XPath

Descendant-or-self Axis XPath is  using this axis we can select the current node and all its descendants the tag name for descendants and self are the same.

Syntax:  Xpath = //tagname[@attribute=’value’]//ancestor::ancestor_tagname

Ancestor Axis

Ancestor Axis will select or locate all ancestors elements i.e. parent, grandparent, etc. of the current node.

Syntax:  Xpath = //tagname[@attribute=’value’]//ancestor-or-self::tagname

Ancestor-or-self Axis XPath

The Ancestor-or-self axis XPath will locate a web element having the same starting and ending tag name.

Syntax:  Xpath = //tagname[@attribute=’value’]//following::following_tagname

Following Axis Path

The following axis XPath selects all the web element that comes after the current node.

Syntax Xpath = //tagname[@attribute=’value’]//following-sibling::following_tagname

Following-sibling Axis XPath

Following-sibling Axis XPath can select all the nodes that have the same parent as that of the current node and that appear after the current node.

Syntax:  Xpath = //tagname[@attribute=’value’]//preceding::tagname

Preceding Axis XPath

Preceding Axis XPath can locate a web element that has the node that appears before the current node.

Syntax:  Xpath = //tagname[@attribute=’value’]//preceding::tagname

Preceding-sibling Axis XPath

Preceding-sibling Axis XPath can select all the nodes that have the same parent as that of the current node and that appear before the current node.

Conclusion

XPath is an essential tool for web automation testing when using Selenium, Playwright, and Cypress. Understanding the different types of XPath expressions and how to use them can greatly improve the efficiency and effectiveness of the automation testing process.