Home → Documentation → DOM Navigation

D - DOM Navigation

Navigate the DOM tree intuitively with parent, child, sibling, and ancestor relationships.

XPathy provides intuitive methods for navigating the DOM tree. All navigation methods start with $ for easy identification.

1. $tag(tag)

Targets a nested tag under the current element.

Example 
XPathy locator = div.byAttribute(class_).equals("container")
                .$tag(button)
                .byText().equals("Submit");
Result 
//div[@class='container']//button[text()='Submit']

2. $child()

Restricts traversal to immediate child elements.

Any Child 
XPathy locator = ul.byAttribute(id).equals("menu")
                .$child()
                .byText().contains("Home");
Result 
//ul[@id='menu']/child::*[contains(text(), 'Home')]
Specific Child Tag 
XPathy locator = ul.byAttribute(id).equals("menu")
                .$child(li)
                .byText().contains("Contact");
Result 
//ul[@id='menu']/child::li[contains(text(), 'Contact')]

3. $ancestor()

Moves upward in the DOM to match ancestor elements.

Any Ancestor 
XPathy locator = a.byAttribute(href).contains("profile")
                .$ancestor()
                .byAttribute(id).equals("navbar");
Result 
//a[contains(@href, 'profile')]/ancestor::*[@id='navbar']
Specific Ancestor Tag 
XPathy locator = span.byText().equals("Settings")
                .$ancestor(div)
                .byAttribute(class_).equals("dropdown");
Result 
//span[text()='Settings']/ancestor::div[@class='dropdown']

4. $descendant()

Matches descendant elements nested anywhere below the current node.

Specific Descendant 
XPathy locator = section.byAttribute(id).equals("content")
                .$descendant(p)
                .byText().contains("Welcome");
Result 
//section[@id='content']/descendant::p[contains(text(), 'Welcome')]
Any Descendant 
XPathy locator = div.byAttribute(class_).equals("card")
                .$descendant()
                .byAttribute(class_).equals("price");
Result 
//div[@class='card']/descendant::*[@class='price']

5. $parent() and $up()

Navigate one or more levels up the DOM.

Parent 
XPathy locator = span.byText().equals("$19.99")
                .$parent(div)
                .byAttribute(class_).equals("product");
Result 
//span[text()='$19.99']/parent::div[@class='product']
Move Up Multiple Levels 
XPathy locator = input.byAttribute(name).equals("email")
                .$up(2)
                .byAttribute(id).equals("form-container");
Result 
//input[@name='email']/../..[@id='form-container']

6. Sibling Navigation

$followingSibling()

Matches siblings that appear after the current element.

Example 
XPathy locator = label.byText().equals("Username")
                .$followingSibling(input)
                .byAttribute(type).equals("text");
Result 
//label[text()='Username']/following-sibling::input[@type='text']

$precedingSibling()

Matches siblings that appear before the current element.

Example 
XPathy locator = li.byText().equals("Contact")
                .$precedingSibling()
                .byText().equals("About");
Result 
//li[text()='Contact']/preceding-sibling::*[text()='About']