Parent and Child XPath is an important XPath concept used in Selenium to locate web elements based on their hierarchical relationship in the HTML DOM. When an element does not have a unique ID, name, class, or other reliable attribute, understanding the relationship between parent and child elements can help create accurate XPath expressions.
In HTML, elements are arranged in a hierarchical structure. An element can contain one or more child elements, while the element directly containing another element is called its parent. Selenium XPath allows testers to move between these related elements using axes such as parent, child, and descendant-related expressions.
XPath and locator strategies are part of Selenium WebDriver automation training, alongside web element handling, browser automation, TestNG, dynamic elements, and automation frameworks. JustAcademy Selenium Training covers these Selenium automation concepts through practical learning. You can also explore the JustAcademy Course Demo Registration page.
XPath stands for XML Path Language. It is a language used to navigate and identify nodes in XML and HTML documents.
In Selenium, XPath is widely used as a locator strategy for finding web elements on a web page.
//tagname[@attribute='value']Example:
//input[@id='username']This XPath identifies an input element whose ID is username.
DOM stands for Document Object Model. A browser converts an HTML document into a tree-like structure called the DOM.
For example:
html
├── body
│ ├── div
│ │ ├── label
│ │ └── input
│ └── button
The DOM structure allows XPath to navigate between elements according to their relationships.
A parent element is an HTML element that directly contains another element.
<div class="login-form">
<input type="text" id="username">
</div>
Here:
div is the parent of the input.input is the child of the div.The relationship can be represented as:
div
└── input
A child element is an element that is directly contained inside another element.
<div>
<button>Login</button>
</div>
Here:
Consider the following HTML:
<div class="login">
<label>Username</label>
<input type="text">
<button>Login</button>
</div>
The DOM structure is:
div.login
├── label
├── input
└── button
The div is the parent of the label, input, and button.
The child axis is used to select direct child elements of the current element.
//parent/child::childElementExample:
//div/child::inputThis selects input elements that are direct children of the div.
The child:: axis is often omitted because a simple slash represents direct child navigation.
For example:
//div/child::inputcan be written as:
//div/inputBoth expressions represent direct child navigation in this context.
Attributes can be used to make the child XPath more specific.
//div/child::input[@type='text']Short form:
//div/input[@type='text']This identifies a text input that is a direct child of a div.
Suppose the HTML contains:
<div class="form">
<input type="text" id="username">
<input type="password" id="password">
<button>Login</button>
</div>
Possible XPath expressions include:
//div[@class='form']/input[@id='username']//div[@class='form']/input[@id='password']//div[@class='form']/button[text()='Login']The parent axis is used to move from the current element to its direct parent.
//childElement/parent::parentElementExample:
//input[@id='username']/parent::divThis starts from the username input and moves to its parent div.
The parent relationship can also be represented using ...
//input[@id='username']/..This moves from the username input to its direct parent.
The explicit parent axis can be written as:
//input[@id='username']/parent::divThe explicit axis is often easier to understand because it clearly describes the relationship.
The parent element can be filtered using its attributes.
//input[@id='username']/parent::div[@class='login-form']This identifies the parent div only when it has the specified class.
Parent and child relationships can be combined to navigate through the DOM.
//div[@class='login-form']/child::inputThis starts from the login form div and selects its direct input children.
Reverse navigation can be performed using:
//input[@id='username']/parent::divThis starts from the input and moves upward to the parent div.
<div class="user-form">
<input id="username">
</div>
//input[@id='username']/parent::divResult: the div containing the username input.
<div class="user-form">
<input id="username">
</div>
//div[@class='user-form']/child::inputResult: the username input element.
| Feature | Parent XPath | Child XPath |
|---|---|---|
| Direction | Moves upward | Moves downward |
| Relationship | Child to parent | Parent to child |
| Axis | parent:: | child:: |
| Short form | .. | /child element |
| Example | //input/parent::div | //div/child::input |
A parent is the immediate element containing the current element. An ancestor can be the parent, grandparent, or any higher-level element.
<div class="page">
<form>
<div class="field">
<input id="email">
</div>
</form>
</div>
The direct parent of the input is:
//input[@id='email']/parent::divAn ancestor form can be located using:
//input[@id='email']/ancestor::form| Parent | Ancestor |
|---|---|
| Selects the immediate parent | Can select parent, grandparent, or higher-level elements |
| Moves one level upward | Can move multiple levels upward |
parent:: | ancestor:: |
A child is a direct child of the current element. A descendant can be located at any depth below the current element.
<div>
<section>
<button>Login</button>
</section>
</div>
The button is not a direct child of the div because the section is between them.
Direct child:
//div/child::sectionDescendant:
//div/descendant::button| Child | Descendant |
|---|---|
| Only direct children | Elements at any level below the current node |
child:: | descendant:: |
Example: //div/child::input | Example: //div/descendant::input |
Text-based XPath can be combined with the parent axis.
<div class="field">
<label>Username</label>
<input type="text">
</div>
Locate the parent div using the label:
//label[text()='Username']/parent::divThis identifies the div that directly contains the Username label.
Text conditions can also be used when selecting child elements.
//div[@class='menu']/child::button[text()='Login']This searches for a Login button that is a direct child of the menu div.
The contains() function can be combined with parent navigation.
//span[contains(text(),'Username')]/parent::divThis finds the parent div of a span containing Username.
//div[@class='menu']/child::button[contains(text(),'Login')]This locates a direct child button containing Login in its text.
Login forms often contain labels, input fields, and buttons grouped inside parent containers.
<div class="login-field">
<label>Username</label>
<input type="text" id="username">
</div>
Locate the parent:
//input[@id='username']/parent::divLocate the parent using the label:
//label[text()='Username']/parent::divSuppose the login form has several direct child controls.
<div class="login-form">
<input id="username">
<input id="password">
<button>Login</button>
</div>
Username:
//div[@class='login-form']/child::input[@id='username']Password:
//div[@class='login-form']/child::input[@id='password']Login button:
//div[@class='login-form']/child::button[text()='Login']Product cards commonly use parent containers to group product names, prices, images, and action buttons.
<div class="product-card">
<h3>Laptop</h3>
<span>₹50000</span>
<button>Add to Cart</button>
</div>
Locate the parent product card using the product name:
//h3[text()='Laptop']/parent::divAfter identifying the product card, child XPath can locate specific controls inside it.
//div[@class='product-card']/child::button[text()='Add to Cart']Price:
//div[@class='product-card']/child::spanProduct name:
//div[@class='product-card']/child::h3A more specific expression can identify a product card and then locate its button.
//div[h3[text()='Laptop']]/child::button[text()='Add to Cart']This searches for a div containing an h3 with the text Laptop and then selects its direct Add to Cart button.
Tables contain rows and cells with clear parent-child relationships.
<table>
<tr>
<td>John</td>
<td>Active</td>
</tr>
</table>
Locate the row containing John:
//td[text()='John']/parent::trThis moves from the John cell to its parent row.
Once the row is identified, child navigation can locate its cells.
//tr[td[text()='John']]/child::tdThis selects the direct td children of the row containing John.
To locate the Active cell:
//tr[td[text()='John']]/child::td[text()='Active']Parent navigation is useful when the target information is inside a table cell but the required interaction is associated with the entire row.
//td[text()='John']/parent::trThe result is the table row containing John.
Consider a table row containing an Edit button:
<tr>
<td>John</td>
<td>Active</td>
<td><button>Edit</button></td>
</tr>
Locate the Edit button from the row:
//tr[td[text()='John']]/child::td/child::button[text()='Edit']Sometimes the immediate parent is not the required container. Multiple parent navigation steps can be used.
//input[@id='email']/parent::div/parent::formThis moves from:
input
→ parent div
→ parent form
However, when the exact ancestor is known, the ancestor axis can often make the expression simpler.
Child navigation can also be chained.
//form/child::div/child::inputThis navigates:
form
→ direct child div
→ direct child input
The double-dot notation .. represents the parent node.
//input[@id='username']/..This selects the immediate parent of the username input.
Multiple levels can be navigated:
//input[@id='username']/../..This moves up two levels.
| Method | Example | Description |
|---|---|---|
| Parent axis | //input/parent::div | Explicitly identifies the parent relationship |
| Parent shorthand | //input/.. | Moves to the immediate parent |
The explicit parent axis can be easier to read and maintain in complex XPath expressions.
The slash can represent direct child navigation.
//div/inputEquivalent explicit axis:
//div/child::inputBoth expressions target an input that is a direct child of the div in this structure.
Attributes can be combined with parent-child relationships to create more precise locators.
//input[@name='email']/parent::div[@class='form-group']Child navigation:
//div[@class='form-group']/child::input[@name='email']Text and attributes can be combined with parent-child relationships.
//label[text()='Email']/parent::div/child::inputThis can locate an input that is a direct child of the parent div containing the Email label.
When label text contains extra whitespace, normalize-space() can be used.
//label[normalize-space()='Username']/parent::div/child::inputThis is useful when formatting or whitespace in the HTML affects exact text matching.
When only part of the text is stable, contains() can be used.
//label[contains(text(),'Email')]/parent::div/child::inputThis searches for an Email-related label, moves to its parent div, and selects a direct child input.
Parent-child navigation can be combined with following-axis navigation.
//label[text()='Username']/parent::div/following::div[1]This identifies the parent div of the Username label and then searches for the next matching div in document order.
Similarly, preceding can be used after moving to a parent.
//input[@id='password']/parent::div/preceding::div[1]This moves to the password input's parent div and then searches backward for a preceding div.
<form>
<div class="field">
<label>First Name</label>
<input type="text">
</div>
<div class="field">
<label>Email</label>
<input type="email">
</div>
</form>
Locate the Email field container:
//label[text()='Email']/parent::divLocate the Email input:
//label[text()='Email']/parent::div/child::input<nav class="menu">
<a>Home</a>
<a>Products</a>
<a>Services</a>
</nav>
Locate the navigation container:
//a[text()='Products']/parent::navIf the links are direct children of the nav:
//nav[@class='menu']/child::a[text()='Products']Consider:
<div class="outer">
<div class="middle">
<div class="inner">
<button>Submit</button>
</div>
</div>
</div>
Direct parent of the button:
//button[text()='Submit']/parent::divParent of the parent:
//button[text()='Submit']/parent::div/parent::divOuter ancestor:
//button[text()='Submit']/ancestor::div[@class='outer']Cards are common components in modern web applications.
<div class="card">
<h3>Selenium</h3>
<p>Automation Testing</p>
<button>Learn More</button>
</div>
Parent card:
//h3[text()='Selenium']/parent::divChild button:
//div[@class='card']/child::button[text()='Learn More']Modern web applications can contain dynamic IDs and class names. In such cases, a stable text element can sometimes be used as an anchor for parent-child navigation.
//label[normalize-space()='Email']/parent::div/child::inputThis avoids relying directly on a potentially dynamic input ID.
The locator should still be verified against the actual DOM and application behavior because dynamic applications can change their structure.
Selenium Java uses By.xpath() to locate elements using XPath.
WebElement parent = driver.findElement(
By.xpath("//input[@id='username']/parent::div")
);
Child example:
WebElement input = driver.findElement(
By.xpath("//div[@class='login-form']/child::input[@id='username']")
);
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class ParentChildXPathExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://example.com");
WebElement parent = driver.findElement(
By.xpath("//input[@id='username']/parent::div")
);
WebElement username = driver.findElement(
By.xpath("//div[@class='login-form']/child::input[@id='username']")
);
username.sendKeys("testuser");
driver.quit();
}
}
Dynamic web applications may require synchronization before interacting with elements.
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement username = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.xpath("//label[text()='Username']/parent::div/child::input")
)
);
username.sendKeys("testuser");
Explicit waits can help ensure that the required element is available before Selenium interacts with it.
Sometimes a child element is easier to identify than its parent container.
Example:
//span[text()='Order #12345']/parent::divThis can locate the parent container associated with the order information.
After locating a container, child navigation can identify controls inside it.
//div[@class='order-card']/child::button[text()='View Details']This locates a direct View Details button inside the order card.
Multiple conditions can be used with parent-child relationships.
//div[@class='form-group' and label[text()='Email']]/child::input[@type='email']This searches for a form-group div containing an Email label and then selects its email input.
The or operator can be used when more than one text value is acceptable.
//div[label[text()='Username'] or label[text()='User Name']]/child::inputThis can handle two possible label variations.
Indexes can be used when multiple child elements match the same condition.
//div[@class='form']/child::input[1]This selects the first direct input child of the form div.
Another example:
//div[@class='form']/child::input[2]This selects the second matching direct input child.
The last() function can select the last matching element.
//div[@class='form']/child::input[last()]This selects the last matching direct input child of the form div.
Consider a shopping cart item:
<div class="cart-item">
<span>Laptop</span>
<span>₹50000</span>
<button>Remove</button>
</div>
Locate the cart item using the product name:
//span[text()='Laptop']/parent::divLocate the Remove button inside the cart item:
//div[@class='cart-item']/child::button[text()='Remove']Checkout forms often contain groups of labels and controls.
<div class="checkout-field">
<label>Card Number</label>
<input type="text">
</div>
Locate the field container:
//label[text()='Card Number']/parent::divLocate the input:
//label[text()='Card Number']/parent::div/child::inputTables are another common use case for parent-child XPath.
<tr>
<td>John</td>
<td>[email protected]</td>
<td>
<button>Edit</button>
</td>
</tr>
Locate the row:
//td[text()='John']/parent::trLocate the Edit button from that row:
//tr[td[text()='John']]/child::td/child::button[text()='Edit']Parent-child relationships can be combined with sibling navigation.
//label[text()='Username']/parent::div/following-sibling::div[1]This finds the next sibling div of the label's parent container.
//label[text()='Password']/parent::div/preceding-sibling::div[1]This finds the previous sibling div of the Password label's parent container.
| Relationship | XPath Axis | Direction |
|---|---|---|
| Parent | parent:: | Up one level |
| Child | child:: | Down one level |
| Ancestor | ancestor:: | Up multiple levels |
| Descendant | descendant:: | Down multiple levels |
| Following-sibling | following-sibling:: | Forward among siblings |
| Preceding-sibling | preceding-sibling:: | Backward among siblings |
| Following | following:: | Forward through document |
| Preceding | preceding:: | Backward through document |
../../.. without checking the structure.parent:: when moving to the immediate parent.child:: when selecting direct children.ancestor:: for higher-level containers.descendant:: when the target may be at any depth.XPath expressions can be tested in the Chrome Developer Tools console using the $x() function.
$x("//input[@id='username']/parent::div")$x("//div[@class='login-form']/child::input")$x("//label[text()='Username']/parent::div")| Requirement | XPath |
|---|---|
| Direct parent | //input/parent::div |
| Parent using .. | //input/.. |
| Direct child | //div/child::input |
| Short child syntax | //div/input |
| Parent with text | //label[text()='Email']/parent::div |
| Child with text | //div/child::button[text()='Login'] |
| Parent with attribute | //input[@id='email']/parent::div[@class='field'] |
| Child with attribute | //div[@class='field']/child::input[@id='email'] |
| Parent and child together | //label[text()='Email']/parent::div/child::input |
| Parent and descendant | //label[text()='Email']/parent::div/descendant::input |
| Parent with contains() | //label[contains(text(),'Email')]/parent::div |
| Child with contains() | //div/child::button[contains(text(),'Login')] |
| First child | //div/child::input[1] |
| Last child | //div/child::input[last()] |
.. mean in XPath?child:: and a normal slash?Parent XPath is used to navigate from a child element to its immediate parent element using the parent:: axis or the .. shorthand.
Child XPath is used to navigate from a parent element to its direct child elements using the child:: axis or normal child path syntax.
Parent identifies only the immediate parent, while ancestor can identify the parent, grandparent, or other higher-level elements.
Child selects direct children, while descendant can select elements located at any level below the current element.
The .. expression represents the parent node of the current context node.
//input[@id='username']/parent::div//div[@class='login-form']/child::inputparent:: for the immediate parent.child:: for direct children.ancestor:: for higher-level elements.descendant:: for elements at any lower level.By.xpath().Parent and Child XPath provides a structured way to navigate the HTML DOM in Selenium. The parent:: axis moves from an element to its immediate parent, while the child:: axis selects direct child elements.
Parent-child XPath becomes especially useful when elements have dynamic attributes or when a stable relationship between elements provides a better locator. By combining parent and child axes with text(), contains(), normalize-space(), attributes, indexes, ancestor, descendant, following, and sibling axes, testers can create flexible XPath expressions for real-world web applications.
For Selenium WebDriver, XPath, CSS selectors, dynamic elements, TestNG, automation frameworks, and practical automation testing learning, visit JustAcademy Selenium Training.
To explore the course demonstration registration option, visit JustAcademy Course Demo Registration.
