XPath is a powerful tool for locating elements within the DOM, but what if you need to find a parent or ancestor node? In this blog post, we will explore how to use XPath to navigate up the tree and efficiently locate the desired parent or ancestor node. Whether you want to validate a specific parent-child relationship or extract information from higher-level elements, understanding how to wrangle XPath to find the right node will greatly enhance your testing skills.
Table of Contents
Introducing the Ancestor Or Self Method
To locate the parent or ancestors of a particular element using XPath, you can use the “ancestor-or-self” axis method. This method allows you to select the specified element itself and all of its ancestors in the document tree. By using the ancestor-or-self:: syntax followed by the element’s name, you can specify the element you want to locate along with its ancestors. This way, you can navigate up the tree and access higher-level elements easily. It’s important to note that this method returns a collection of elements, so additional steps may be required to extract the specific elements you need from the collection.
Examples
Get buttons that contain an icon
//svg[contains(@class, “icon”)]/ancestor-or-self::button
Get article sections containing an external image
//img[starts-with(@href, “http”)]/ancestor-or-self::section
Get the radio button that has specific text
//*[text()=”Hamburger”]/ancestor-or-self::label//*[@type=”radio”]
