Day 23: XPath Sibling Navigation - following-sibling & preceding-sibling
Master XPath sibling navigation techniques to locate related elements in the same parent container
Today's Learning Objectives
Sibling Navigation
- • Understanding sibling relationships in DOM
- • following-sibling axis navigation
- • preceding-sibling axis navigation
- • Complex sibling combinations
Practical Applications
- • Table data extraction techniques
- • Form element relationships
- • Radio button and checkbox groups
- • Dynamic content navigation
Complete Relative XPath Techniques
All 17 Relative XPath Methods
Basic Methods (1-7)
- 1) using single attribute
- 2) using AND operator
- 3) using OR operator
- 4) using text() method
- 5) using contains() with text() method
- 6) using starts-with() with text() method
- 7) using normalize-space() with text() method
Attribute Methods (8-9)
- 8) using contains() with attribute
- 9) using starts-with() with attribute
↓ XPATH AXES ↓
XPath Axes (10-17)
- 10) using child keyword
- 11) using descendant keyword
- 12) using parent keyword
- 13) using ancestor keyword
- 14) using following-sibling keyword
- 15) using preceding-sibling keyword
- 16) using following keyword
- 17) using preceding keyword
Today's Focus: Methods 14 & 15 - Sibling Navigation Techniques
XPath Axes - Sibling Navigation
Complete XPath Axes List
XPath provides 17 different axes for navigating the DOM tree. Today we focus on sibling navigation.
Navigation Axes
- 10. child:: Direct child elements
- 11. descendant:: All descendant elements
- 12. parent:: Direct parent element
- 13. ancestor:: All ancestor elements
- 14. following-sibling:: Next siblings
- 15. preceding-sibling:: Previous siblings
Advanced Axes
- 16. following:: All following elements
- 17. preceding:: All preceding elements
- Plus 9 other axes for complete DOM navigation
14. following-sibling Keyword
Concept & Purpose
Using following-sibling keyword we can locate "next element in same parent tags"
If we have same parent tags present and within the DOM structure we have to locate next element, then we use following-sibling keyword.
Basic Syntax
Advanced Syntax with Conditions
HTML Structure Example
<head></head>
<body>
<div class="a1">
<input type="checkbox" name="selenium">
<input type="checkbox" name="selenium">
</div>
<div class="a1">
Male <input type="radio" name="gender">
Female <input type="radio" name="gender">
</div>
</body>
</html>
Locate Female Radio Button
Problem: //input[@name='gender'] locates 2 elements
Solution: //input[@name='gender']/following-sibling::input
This will locate the female radio button (next sibling)
15. preceding-sibling Keyword
Concept & Purpose
Using preceding-sibling keyword we can locate "previous element in same parent tags"
If we have same parent tags present and within the DOM structure we have to locate previous element, then we use preceding-sibling keyword.
Basic Syntax
Advanced Syntax with Conditions
Locate Male Radio Button
Using preceding-sibling
Problem: //input[@name='gender'] locates 2 elements
Solution: //input[@name='gender']/preceding-sibling::input
This will locate the male radio button (previous sibling)
Complex Sibling Navigation
Chaining Sibling Navigation
Navigate to Other Radio Button
Double following-sibling:
//input[@name='gender']/following-sibling::input/following-sibling::inputDouble preceding-sibling:
//input[@name='gender']/preceding-sibling::input/preceding-sibling::inputConditional Sibling Navigation
Female radio button with condition:
//input[@name='gender']/preceding-sibling::input[preceding-sibling::input]Male radio button with condition:
//input[@name='gender']/following-sibling::input[following-sibling::input]Real-World Examples
Rahul Shetty Academy Practice
Website: https://rahulshettyacademy.com/AutomationPractice/
Course Price Extraction
Selenium course prices (starts with):
//td[starts-with(text(),'Selenium')]/following-sibling::tdSelenium course prices (contains):
//td[contains(text(),'Selenium')]/following-sibling::tdEmployee Data Extraction
Engineer position salary:
//td[text()='Engineer']/following-sibling::td/following-sibling::tdChennai city employee names:
//td[text()='Chennai']/preceding-sibling::td/preceding-sibling::tdEngineer position cities:
//td[text()='Engineer']/following-sibling::td[following-sibling::td]Google Search & Registration Forms
Google Search Navigation
Navigate between search buttons:
//div[@class='FPdoLc lJ9FBc']/descendant::input/following-sibling::inputNavigate to previous button:
//div[@class='FPdoLc lJ9FBc']/descendant::input/preceding-sibling::inputRegistration Form Example
Website: https://copyright.gov.in/UserRegistration/frmNewUser.aspx
Society User radio button:
//label[text()='Society User']/preceding-sibling::inputAdvanced Sibling Combinations
Complex Navigation Patterns
Multi-Level Navigation
Employee ID field navigation:
//label[text()='Employee Id']/parent::div/following-sibling::div/child::inputGender field complex navigation:
//label[text()='Gender']/parent::div/following-sibling::div/child::div/
preceding-sibling::div/descendant::labelButton Navigation
Required field button:
//p[text()=' * Required']/following-sibling::buttonKnowledge Check
What does the following-sibling:: axis locate in XPath?
Key Points Summary
Sibling Navigation
- • following-sibling:: locates next elements in same parent
- • preceding-sibling:: locates previous elements in same parent
- • Chain multiple sibling navigations for complex scenarios
- • Use conditions with sibling axes for precise targeting
Practical Applications
- • Table data extraction (course prices, employee data)
- • Form element relationships (radio buttons, checkboxes)
- • Dynamic content navigation
- • Complex DOM structure traversal