Selenium Locators
Uploaded by
harishSelenium Locators
Uploaded by
harishhttps://www.linkedin.
com/in/anshulagarwal30
Different Locators present in Selenium and their Uses
In Selenium WebDriver locators are used to find and interact with elements on a web page.
Selecting the right locator is crucial for creating reliable and maintainable automation scripts.
1.By.id
● Usage:driver.findElement(By.id("elementId"));
● Description: Locates an element using the value ofits id attribute.
● Advantages:
o Uniqueness: The id attribute should be unique on anHTML page.
o P
erformance: Fastest locator because browsers areoptimized for finding
elements by id.
● Limitations:
o Availability: Not all elements have an id attribute.
o D
ynamic IDs: Some web applications generate dynamicIDs that change on
each page load.
● Best Use Case: When the element has a unique and stableid attribute.
2.By.name
● Usage:driver.findElement(By.name("elementName"));
● Description: Locates an element using the value ofits name attribute.
● Advantages:
o Simplicity: Easy to use when the name attribute isunique.
● Limitations:
o Non-Uniqueness: The name attribute is not requiredto be unique.
● Best Use Case: When id is unavailable but the name attribute is unique and stable.
3.By.className
● Usage:driver.findElement(By.className("className"));
https://www.linkedin.com/in/anshulagarwal30
● Description: Locates elements by the value of their class attribute.
● Advantages:
o Grouping: Useful for finding elements that share acommon style.
● Limitations:
o M
ultiple Classes: If an element has multiple classes,this locator may not work as
expected.
o Non-Uniqueness: Classes are often shared among multipleelements.
● Best Use Case: When you need to find elements thathave a unique class name.
4.By.tagName
● Usage:driver.findElement(By.tagName("tagName"));
● Description: Locates elements by their HTML tag (e.g.,div, input).
● Advantages:
o Broad Selection: Can find all elements of a specifictype.
● Limitations:
o O
verly Broad: Often returns multiple elements; notsuitable for
unique identification.
● B
est Use Case: When dealing with lists or tables whereyou need to interact
with multiple elements of the same type.
5.By.linkText
● Usage:driver.findElement(By.linkText("exact link text"));
● Description: Locates anchor (<a>) elements by theirexact visible text.
● Advantages:
o Readability: Easy to understand and maintain.
● Limitations:
o Exact Match Required: The link text must match exactly,including whitespace.
o Case Sensitivity: Usually case-sensitive.
https://www.linkedin.com/in/anshulagarwal30
● Best Use Case: When you know the exact text of a linkand it is unique on the page.
6.By.partialLinkText
● Usage:driver.findElement(By.partialLinkText("partial link text"));
● Description: Locates anchor elements that containthe specified text.
● Advantages:
o Flexibility: Useful when only part of the link textis known.
● Limitations:
o Non-Uniqueness: May match multiple links if the partialtext is common.
o Performance: Slightly slower due to partial matching.
● Best Use Case: When the exact link text is dynamicbut contains a consistent substring.
7.By.cssSelector
● Usage:driver.findElement(By.cssSelector("cssSelector"));
● D
escription: Locates elements using CSS selectors,which define patterns to
select elements.
● Advantages:
o P
owerful: Can locate elements based on a variety ofattributes and
their combinations.
o Performance: Generally faster than XPath.
● Limitations:
o Complexity: Syntax can become complex for advancedselectors.
o Cannot Traverse Upwards: CSS selectors can't selectparent elements.
● B
est Use Case: When you need a flexible and efficientway to locate elements, especially
when id and name are not available.
8.By.xpath
● Usage:driver.findElement(By.xpath("xpathExpression"));
https://www.linkedin.com/in/anshulagarwal30
● D
escription: Locates elements using XPath expressions,a language for navigating XML
documents.
● Advantages:
o Flexibility: Can navigate both up and down the DOMtree.
o Rich Functions: Supports a variety of functions andaxes for complex selections.
● Limitations:
o Performance: Generally slower than other locators.
o Complexity: XPath syntax can be difficult to readand maintain.
o Browser Variations: Some older browsers have inconsistentXPath support.
● B
est Use Case: When no other locator can uniquelyidentify an element, or when you
need to traverse the DOM in complex ways.
Which Locator is Preferable and Why?
Preferred Locators:
1. By.id
o Reason: Fastest and most reliable when id is uniqueand stable.
2. By.name
o Reason: Useful when id is not available but name isunique.
3. By.cssSelector
o Reason: Offers a good balance between performanceand flexibility.
4. By.xpath
o R
eason: Most flexible but should be used judiciouslydue to performance
and complexity.
When to Avoid Certain Locators:
● B
y.className: Avoid when classes are not unique orwhen elements have multiple
classes.
● By.tagName: Avoid for unique elements; useful forcollections.
● By.linkText and By.partialLinkText: Avoid when linktexts are dynamic or not unique.
https://www.linkedin.com/in/anshulagarwal30
Factors to Consider When Choosing a Locator:
1. Uniqueness: The locator should uniquely identify theelement to avoid ambiguity.
2. Stability: The locator should remain valid even ifthe page layout changes.
3. Performance: Prefer locators that are faster (e.g.,By.id, By.cssSelector).
4. Readability and Maintainability: Locators should beeasy to read and maintain.
Best Practices:
● Use IDs When Possible: Always check if the elementhas a unique id.
● Prefer CSS Selectors Over XPath: CSS selectors arefaster and more readable.
● A
void Hardcoding Text: Using By.linkText or By.partialLinkTextcan be brittle if the
text changes.
● H
andle Dynamic Elements: Be cautious with dynamicIDs or classes; consider
using stable attributes or relative locators.
● U
se Descriptive Locators: If possible, work with developersto add data-* attributes
specifically for testing.
● V
alidate Locators: Regularly verify that your locatorsare still valid as the application
evolves.
Examples:
● Using By.id:
WebElement usernameField = driver.findElement(By.id("username"));
● Using By.cssSelector:
// Locate an element with class 'btn' inside a div with id 'container'
WebElement button = driver.findElement(By.cssSelector("#container .btn"));
● Using By.xpath:
// Locate the third child div of an element with id 'main'
WebElement thirdDiv = driver.findElement(By.xpath("//div[@id='main']/div[3]"));
https://www.linkedin.com/in/anshulagarwal30
hoosing the right locator strategy is crucial for building robust and efficient UI automation
C
scripts. While By.id is generally the most preferable due to its uniqueness and speed,
real-world scenarios often require a mix of locator strategies. Understanding the pros and cons
of each helps in selecting the most appropriate one for each element.
Remember: Always aim for locators that are:
● Unique: They uniquely identify a single element.
● Stable: They do not change with UI updates.
● Efficient: They do not degrade the performance ofyour tests.
● Maintainable: They are easy to read and update.
y adhering to these principles, you'll enhance the reliability and longevity of your automation
B
suites.
T he two most commonly used locators in Selenium—XPathandCSS Selector—have their own
strengths and limitations. Here's a detailed comparison of their key differences:
1.Syntax Complexity
● X
Path: XPath syntax is more verbose and complex, especiallywhen working
with dynamic or nested elements.
o Example://div[@class='example']
● C
SS Selector: CSS Selector has a cleaner and morecompact syntax, making it easier to
read and write in many cases.
o Example: div.example
ifference: XPath can become more complex and harderto maintain, especially in complex
D
DOM hierarchies, while CSS selectors are generally simpler and easier to read.
2.Traversing the DOM
● X
Path: XPath can navigate bothupward(i.e., fromchild to parent) anddownward(i.e.,
from parent to child) in the DOM tree.
o Example (upward traversal)://div[@id='childElement']/../parentElement
https://www.linkedin.com/in/anshulagarwal30
● C
SS Selector: CSS Selector can only navigatedownwardin the DOM (i.e., from parent to
child), meaning it cannot select parent elements.
o Example (downward traversal):div #childElement
ifference: XPath allows you to select parent, sibling,or child elements, making it more flexible
D
for complex relationships. CSS Selector can only traverse downwards, so it is less flexible in
complex DOM hierarchies.
3.Performance
● X
Path: XPath is typicallyslowerthan CSS Selector,especially in browsers like Chrome
and Firefox, because it has to traverse the DOM in more complex ways.
● C
SS Selector: CSS Selector is generallyfasterbecausebrowsers are optimized for parsing
CSS, making it more efficient for locating elements.
Difference: CSS Selector is faster, while XPath isslower, especially in large DOMs.
4.Cross-Browser Compatibility
● X
Path: XPath isnot fully supported in Internet Explorer.It can cause issues or require
workarounds.
● C
SS Selector: CSS Selector worksconsistently acrossall modern browsers, including
Internet Explorer.
ifference: CSS Selectors have better cross-browsersupport compared to XPath, especially for
D
older browsers like IE.
5.Text Matching
● X
Path: XPath canfind elements by their text content,which is useful when you need to
locate elements based on visible text.
o Example://a[text()='Login']
● C
SS Selector: CSS Selectorcannot locate elementsby text content. You can only use
attribute selectors or class names.
o Example: Not available in CSS selectors.
ifference: XPath has the advantage of locating elementsbased on text content, which is
D
impossible in CSS Selectors.
https://www.linkedin.com/in/anshulagarwal30
6.Functions and Operators
● X
Path: XPath supports variousfunctions and operators,such as contains(), starts-with(),
and, or, which makes it more powerful for complex queries.
o Example://input[contains(@name,'username')]
● C
SS Selector: CSS Selector lacks advanced functionslike contains(), though you can use
attribute selectors for partial matches (^=, *=).
o Example:input[name*='username']
ifference: XPath is more feature-rich with functionslike contains() and starts-with(), making it
D
more powerful for specific matching scenarios.
7.Attribute Handling
● X
Path: XPath can select elements based onany attribute,even ones that
are dynamically generated or rarely used.
o Example://*[@data-test='testValue']
● C
SS Selector: CSS Selector can also target elementsbased onany attribute, though
certain complex attribute logic (like functions in XPath) may not be supported.
o Example:[data-test='testValue']
ifference: Both XPath and CSS Selectors handle attributeswell, but XPath offers more
D
flexibility with its ability to use functions like contains().
8.Selecting Siblings
● XPath: XPath allows you to selectpreceding and followingsiblingseasily.
o Example (following sibling)://h3[@id='heading']/following-sibling::p
● C
SS Selector: CSS Selector can only selectimmediatefollowing siblingsusing the +
selector or all following siblings using the ~ selector.
o Example (immediate sibling): h3 + p
o Example (all siblings): h3 ~ p
ifference: XPath is more flexible in selecting siblings,while CSS Selector is limited to selecting
D
the next sibling.
https://www.linkedin.com/in/anshulagarwal30
9.Positional Indexing
● X
Path: XPath allows you to find elements by theirexact positionin the DOM
using indices.
o Example://div[@class='example'][2](second div with class example)
● C
SS Selector: CSS Selector also supportsnth-childornth-of-typeto locate elements
based on their position in the DOM.
o Example:div.example:nth-child(2)
ifference: Both XPath and CSS Selector support positionalindexing, but XPath provides more
D
flexible options (e.g., last()).
10.Popularity in the Automation Community
● X
Path: Historically, XPath has been more widely useddue to its flexibility, especially
for complex scenarios.
● C
SS Selector: CSS Selectors are increasingly becomingthe preferred choice due to
their simplicity and performance advantages.
ifference: CSS Selector is becoming more popularfor web automation due to its simplicity and
D
efficiency, though XPath remains crucial for complex cases.
When to Use XPath vs. CSS Selector:
● Use XPathwhen:
o You need to traverseupwardin the DOM (e.g., selectparent elements).
o You need to locate an element based ontext content.
o Y ou are working withcomplex or dynamic attributesand need to use
functions like contains() or starts-with().
● Use CSS Selectorwhen:
o You need betterperformance.
o Y our script needs to work across multiplebrowsers,including older ones like
Internet Explorer.
https://www.linkedin.com/in/anshulagarwal30
o Y ou are looking for asimplersyntax, especially forstraightforward cases
like selecting elements by class or ID.
● X
Pathis more powerful and flexible, especially forcomplex DOM traversals, text-based
element location, and handling dynamic elements.
● C
SS Selectoris faster, simpler, and more readable,making it ideal for most basic
to moderately complex scenarios.
F or most use cases in UI automation,CSS Selectoris preferable due to its speed and simplicity,
butXPathis indispensable when dealing with complexDOM structures or selecting elements
based on text.
Functions present in Xpath :
Path in Selenium provides a set of powerful functions that allow for flexible element
X
identification and manipulation. These functions can be categorized based on their use cases,
such as locating elements based on text, attributes, or relationships with other elements. Here’s
a breakdown of the most common functions in XPath used in Selenium, along with their
explanations:
1.contains()
● Syntax://*[contains(@attribute, 'value')]
● D
escription: This function is used to locate elementswhose attribute value contains
a specified substring.
● U
se Case: Useful when you only know part of an attributevalue and it might
be dynamic.
o E xample://input[contains(@id, 'login')]will find any <input> elements where
the id contains the substring "login."
2.starts-with()
● Syntax://*[starts-with(@attribute, 'value')]
● D
escription: This function selects elements whoseattribute value begins with a
specified substring.
● U
se Case: Helpful when the start of an attribute isconsistent, but the rest of the
value might be dynamic.
o E xample://div[starts-with(@class, 'header')]will select all div elements where
the class starts with "header."
https://www.linkedin.com/in/anshulagarwal30
3.text()
● Syntax://*[text()='textValue']
● Description: Locates elements that match the exactvisible text.
● Use Case: Used when you need to find elements basedon their visible text.
o E xample://a[text()='Login']will find an anchor (<a>) element with the exact
text "Login."
4.normalize-space()
● Syntax://*[normalize-space(text())='textValue']
● D
escription: This function removes leading and trailingwhitespace from a string
and collapses multiple spaces into a single space.
● Use Case: Useful when the text contains extra or irregularspacing.
o E xample://span[normalize-space(text())='Submit']will find the element with the
exact text "Submit" even if it has extra spaces.
5.last()
● Syntax:(//element)[last()]
● Description: Selects the last element in a set ofmatching nodes.
● Use Case: When you need to select the last elementin a group.
o Example:(//div)[last()]will find the last <div> on the page.
6.position()
● Syntax:(//element)[position()=n]
● Description: This function returns elements at a specificposition in a node set.
● U
se Case: Useful for selecting elements based on theirposition in a set of
similar elements.
o E xample:(//input)[position()=3]will select the third <input> element in
the document.
7.count()
● Syntax:count(//element)
● Description: Counts the number of elements that matchthe given XPath expression.
● Use Case: Helpful for verifying the number of occurrencesof a certain type of element.
https://www.linkedin.com/in/anshulagarwal30
o Example:count(//div)will return the number of <div> elements on the page.
8.substring()
● Syntax:substring(string, start, length)
● Description: Extracts a substring from the input stringstarting at the given position.
● Use Case: Used for selecting part of a string froman element or attribute value.
o E xample://div[substring(@id, 1, 3)='log']will find any <div> element whose
id starts with "log."
9.substring-before()
● Syntax:substring-before(string1, string2)
● Description: Returns the part of the string beforea given substring.
● Use Case: Useful when you want to extract the textbefore a certain character or string.
o Example:substring-before('login-form', '-')will return "login."
10.substring-after()
● Syntax:substring-after(string1, string2)
● Description: Returns the part of the string aftera given substring.
● Use Case: Similar to substring-before(), but it extractsthe part after the specified string.
o Example:substring-after('login-form', '-')will return "form."
11.not()
● Syntax: //element[not(@attribute)]
● Description: Selects elements that do not have a specifiedattribute or value.
● Use Case: Useful when filtering out elements thathave a certain attribute.
o E xample: //input[not(@type='submit')] will find all<input> elements that are not
of type "submit."
12.and
● Syntax://element[@attribute1='value1' and @attribute2='value2']
● Description: Allows you to combine multiple conditions.
● U
se Case: Use this when you want to combine multiple attribute conditions in a
single XPath query.
https://www.linkedin.com/in/anshulagarwal30
o E xample: //input[@type='text' and
@name='username'] will find an
<input> element where type is
13.or "text" and name is "username."
● Syntax://element[@attribute1='value1' or @attribute2='value2']
● D
escription: Allows multiple conditions to be evaluated,returning elements that
match at least one condition.
● U
se Case: Used when you want to match elements thatmeet at least one of
the specified conditions.
o E xample: //input[@type='submit' or @type='button']will find all
<input> elements that are either of type "submit" or "button."
14.ancestor::
● Syntax://element/ancestor::ancestorElement
● Description: Selects all ancestor elements of a givenelement.
● Use Case: Useful for selecting parent or grandparentelements.
o E xample://span/ancestor::divwill select all the <div> ancestors of a <span>
element.
15.descendant::
● Syntax://element/descendant::descendantElement
● D
escription: Selects all descendants of a given element,including children
and grandchildren.
● Use Case: When you need to locate child elements atany depth.
o E xample://div[@id='main']/descendant::inputwill find all <input>
elements within the div with id="main".
16.following-sibling::
● Syntax://element/following-sibling::siblingElement
● Description: Selects all sibling elements that followthe current element.
● Use Case: Used to locate elements that come immediatelyafter a given element.
o E xample: //h1/following-sibling::p will select all<p> elements that are
siblings following an <h1> element.
17.preceding-sibling::
https://www.linkedin.com/in/anshulagarwal30
● Syntax://element/preceding-sibling::siblingElement
● Description: Selects all sibling elements that precedethe current element.
● Use Case: Used to locate elements that come beforea given element.
o E xample://h1/preceding-sibling::pwill select all <p> elements that are siblings
preceding an <h1> element.
18.self::
● Syntax://element/self::element
● Description: Refers to the current node itself.
● U
se Case: Useful when you need to confirm that thecurrent node matches certain
criteria.
o E xample://div/self::div[@class='highlight']will select <div> elements that are
self and have a class of "highlight."
19.parent::
● Syntax://element/parent::parentElement
● Description: Selects the parent of a given element.
● Use Case: When you need to traverse upward and selectthe parent node.
o E xample://span[@class='child']/parent::divwill select the parent <div> of a
<span> element with the class "child."
20.preceding::
● Syntax://element/preceding::precedingElement
● Description: Selects all nodes that precede the currentnode in the document.
● U
se Case: When you want to locate any nodes that comebefore a given node in
the document.
o E xample://div[@id='main']/preceding::inputwill find all <input> elements that
precede the <div> with id="main".
Path functions in Selenium provide a powerful and flexible way to locate elements, especially
X
in complex or dynamic DOM structures. Some key functions to remember are:
● Text Matching: contains(), starts-with(), text()
https://www.linkedin.com/in/anshulagarwal30
● Traversing the DOM: ancestor::, descendant::, parent::,following-sibling::
● Attribute Matching: contains(), starts-with(), not()
● Handling Positions: position(), last()
hoosing the right XPath function depends on the structure of the web page and how
C
dynamic the elements are. These functions allow you tohandleawidevarietyofscenarios,
from simple attribute matching to complex DOM traversals.
Traversal in Xpath:
Path traversal is the process of navigating through the Document Object Model (DOM)
X
structure of a web page to locate elements based on their relationships to other elements, such
as parents, children, siblings, or ancestors. In Selenium, XPath traversal helps in identifying
elements when they cannot be found using simpler locators like id, name, or className. XPath
traversal uses axes such as parent, child, ancestor, descendant, sibling, and more.
1.Traversing to a Parent Element (parent::)
● Usage: Traverse upward to find the parent of the currentelement.
● Example: Assume you want to find the parent <div>of an <input> element.
E xample:
// Find the parent of the input element with id "username"
WebElement parentElement =
driver.findElement(By.xpath("//input[@id='username']/parent::div"));
● E xplanation: This XPath expression selects the parent<div> of the <input> element
with id="username".
2.Traversing to Child Elements (child::)
● Usage: Traverse downward to find the child elementsof the current element.
● Example: Assume you want to find the child <span>elements inside a <div> element.
Example:
// Find all child span elements of a div with id "container"
https://www.linkedin.com/in/anshulagarwal30
L ist<WebElement> childSpans =
driver.findElements(By.xpath("//div[@id='container']/child::span"));
● E xplanation: This XPath expression selects all <span>elements that are children of the
<div> with id="container".
3.Traversing to Ancestor Elements (ancestor::)
● Usage: Traverse upward to find any ancestor element(e.g., parent, grandparent).
● E xample: Suppose you need to find a <form> elementthat is an ancestor of an
<input> element.
E xample:
// Find the form ancestor of the input element with name "email"
WebElement formElement =
driver.findElement(By.xpath("//input[@name='email']/ancestor::form"));
● E xplanation: This XPath expression selects the nearest<form> ancestor of the
<input> element with the name "email".
4.Traversing to Descendant Elements (descendant::)
● Usage: Traverse downward to find any descendant element(e.g., child, grandchild).
● Example: Assume you want to find all <a> tags thatare descendants of a <div> element.
E xample:
// Find all descendant anchor tags inside a div with id "main"
List<WebElement> descendantLinks =
driver.findElements(By.xpath("//div[@id='main']/descendant::a"));
● E xplanation: This XPath expression selects all <a>elements that are descendants
(children, grandchildren, etc.) of the <div> with id="main".
5.Traversing to Sibling Elements (following-sibling:: and preceding-sibling::)
● Usage:
o Following-sibling: Traverse to siblings that comeafter the current element.
https://www.linkedin.com/in/anshulagarwal30
o Preceding-sibling: Traverse to siblings that comebefore the current element.
Example 1 (Following Sibling):
// Find the first sibling <p> that follows an <h1> element
WebElement followingParagraph = driver.findElement(By.xpath("//h1/following-sibling::p[1]"));
● E xplanation: This XPath expression selects the first<p> element that comes after an
<h1> element.
Example 2 (Preceding Sibling):
// Find the first sibling <h3> that precedes an <h1> element
WebElement precedingHeading = driver.findElement(By.xpath("//h1/preceding-sibling::h3[1]"));
● E xplanation: This XPath expression selects the first<h3> element that comes before an
<h1> element.
6.Traversing to All Descendants (//)
● U
sage: The // syntax allows you to select all descendantsof a node, no matter how
deep they are.
● Example: Find all <input> elements inside a <div>.
Example:
// Find all input elements anywhere inside a div with class "form-group"
L ist<WebElement> allInputs = driver.findElements(By.xpath("//div[@class='form-
group']//input"));
● E xplanation: This XPath expression selects all <input>elements inside the <div>
with class "form-group", regardless of how deep they are nested.
7.Traversing to All Ancestors (ancestor::)
● Usage: Selects all ancestor nodes of the current element.
E xample:
// Find all ancestor div elements of an input element with id "email"
List<WebElement> allAncestorDivs =
driver.findElements(By.xpath("//input[@id='email']/ancestor::div"));
https://www.linkedin.com/in/anshulagarwal30
● E xplanation: This XPath expression selects all <div>elements that are ancestors of the
<input> element with id="email".
8.Traversing to Following Elements (following::)
● U
sage: Selects all elements that appear after thecurrent element in the document,
not necessarily siblings.
E xample:
// Find all elements that follow a <div> element with class "header"
List<WebElement> followingElements =
driver.findElements(By.xpath("//div[@class='header']/following::*"));
● E xplanation: This XPath expression selects all elementsthat appear after the <div>
with class "header" in the DOM, regardless of their structure or relation.
9.Traversing to Preceding Elements (preceding::)
● U
sage: Selects all elements that appear before thecurrent element in the document,
not necessarily siblings.
E xample:
// Find all elements that precede a div with class "content"
List<WebElement> precedingElements =
driver.findElements(By.xpath("//div[@class='content']/preceding::*"));
● E xplanation: This XPath expression selects all elementsthat appear before the <div>
with class "content" in the DOM.
10.Selecting Specific Positions ([position()])
● Usage: XPath allows you to select elements based ontheir position in a list of nodes.
Example:
// Find the third <li> element inside a <ul>
WebElement thirdListItem = driver.findElement(By.xpath("//ul/li[position()=3]"));
● Explanation: This XPath expression selects the third<li> element inside the <ul>.
https://www.linkedin.com/in/anshulagarwal30
11.Traversing to the Current Element (self::)
● Usage: The self:: axis refers to the current nodeitself.
E xample:
// Find an element where the current element is itself
WebElement currentElement =
driver.findElement(By.xpath("//input[@id='search']/self::input"));
● E xplanation: This XPath expression selects the current<input> element
with id="search".
12.Combining Multiple Traversals
You can combine different XPath axes in a single expression for complex DOM traversal.
E xample:
// Find a sibling of an input element, traverse to its parent, then find a descendant
WebElement complexElement =
driver.findElement(By.xpath("//input[@id='username']/following-
sibling::label/parent::div/descendant::button"));
● Explanation: This XPath expression does the following:
1. Selects the <label> sibling of the <input> with id="username".
2. Traverses up to the parent <div>.
3. Selects the <button> descendant of that <div>.
Key Takeaways:
● Parent (parent::): Selects the immediate parent ofan element.
● Child (child::): Selects the immediate children ofan element.
● Ancestor (ancestor::): Selects all ancestor elements(parent, grandparent, etc.).
● Descendant (descendant::): Selects all descendants(children, grandchildren, etc.).
● F ollowing-sibling (following-sibling::): Selects siblingsthat appear after the current
element.
https://www.linkedin.com/in/anshulagarwal30
● P
receding-sibling (preceding-sibling::): Selects siblingsthat appear before the current
element.
● Following (following::): Selects all elements thatcome after the current element.
● Preceding (preceding::): Selects all elements thatcome before the current element.
● Self (self::): Refers to the current node itself.
Xpath Traversal in a Detailed way:
Path traversal in Selenium is a powerful way to navigate through the DOM, allowing you to
X
select elements based on their hierarchical relationships. The flexibility of XPath traversal makes
it a valuable tool when simpler locators like id or name are insufficient. By mastering traversal
axes like ancestor::, descendant::, following-sibling::, and others, you can handle even the most
complex web structures in your automation scripts.
1.Parent Traversal (parent::)
Goal: Moveupwardsfrom the current element to itsparent.
● W
hat it does: If you have a child element (e.g., an<input> inside a <div>), this helps you
find the parent <div> of the <input> element.
Example:
HTML snippet:
<div class="form-group">
<input id="username" type="text" />
</div>
Step-by-step:
1. Identify the child element (<input id="username">).
2. Use the XPath to moveupto the parent <div>.
XPath Expression:
WebElement parentDiv = driver.findElement(By.xpath("//input[@id='username']/parent::div"));
Explanation:
● We are finding the <input> element by id="username".
https://www.linkedin.com/in/anshulagarwal30
● Then, we move up to its parent element (<div>).
2.Child Traversal (child::)
Goal: Movedownwardsfrom the current element to itsimmediate child elements.
● W
hat it does: If you have a parent element (e.g.,a <div>), you can find its direct children
(e.g., <span>, <input>).
Example:
HTML snippet:
<div id="container">
<span>Item 1</span>
<span>Item 2</span>
</div>
Step-by-step:
1. Identify the parent element (<div id="container">).
2. Use the XPath to movedownto its child <span> elements.
XPath Expression:
L ist<WebElement> childSpans =
driver.findElements(By.xpath("//div[@id='container']/child::span"));
Explanation:
● We are finding the <div> with id="container".
● Then, we move down to select all its child <span> elements.
3.Ancestor Traversal (ancestor::)
Goal: Moveupwardsto find any ancestor (e.g., parent,grandparent) of the current element.
● W
hat it does: This helps you find not just the parent,but any element higher up in
the DOM tree (like grandparents).
Example:
HTML snippet:
https://www.linkedin.com/in/anshulagarwal30
<form id="loginForm">
<div class="form-group">
<input id="email" type="text" />
</div>
</form>
Step-by-step:
1. Identify the child element (<input id="email">).
2. Use the XPath to moveupto its ancestor <form>.
XPath Expression:
ebElement formElement =
W
driver.findElement(By.xpath("//input[@id='email']/ancestor::form"));
Explanation:
● We are finding the <input> with id="email".
● Then, we move up to its ancestor <form> element.
4.Descendant Traversal (descendant::)
Goal: Movedownwardsto find any descendant (child,grandchild) of the current element.
● W
hat it does: It allows you to find all elements nestedinside a parent, no matter
how deeply they are nested.
Example:
HTML snippet:
<div id="main">
<div>
<a href="#">Link 1</a>
</div>
<div>
<a href="#">Link 2</a>
</div>
https://www.linkedin.com/in/anshulagarwal30
</div>
Step-by-step:
1. Identify the parent element (<div id="main">).
2. Use the XPath to movedownto all the <a> descendants.
XPath Expression:
L ist<WebElement> descendantLinks =
driver.findElements(By.xpath("//div[@id='main']/descendant::a"));
Explanation:
● We are finding the <div> with id="main".
● Then, we select all its descendant <a> elements, no matter how deeply they are nested.
5.Following-Sibling Traversal (following-sibling::)
Goal: Move tonext sibling elementsthat follow thecurrent element.
● W
hat it does: If you want to find a sibling elementthat comes after the current
element, you can use this.
Example:
HTML snippet:
<h1>Main Heading</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
Step-by-step:
1. Identify the first element (<h1>Main Heading</h1>).
2. Use the XPath to find thenextsibling <p> element.
XPath Expression:
WebElement followingParagraph = driver.findElement(By.xpath("//h1/following-sibling::p[1]"));
Explanation:
● We are finding the <h1> element.
● Then, we select the first <p> sibling that comes immediately after it.
https://www.linkedin.com/in/anshulagarwal30
6.Preceding-Sibling Traversal (preceding-sibling::)
Goal: Move toprevious sibling elementsthat comebefore the current element.
● W
hat it does: This is the opposite of following-sibling.It lets you find a sibling
element that comes before the current element.
Example:
HTML snippet:
<h3>Subheading</h3>
<h1>Main Heading</h1>
Step-by-step:
1. Identify the second element (<h1>Main Heading</h1>).
2. Use the XPath to find theprevioussibling <h3> element.
XPath Expression:
WebElement precedingHeading = driver.findElement(By.xpath("//h1/preceding-sibling::h3[1]"));
Explanation:
● We are finding the <h1> element.
● Then, we select the preceding <h3> sibling element.
7.Following Traversal (following::)
Goal: Move to all elements that appearafterthe currentelement in the document.
● W
hat it does: This finds any elements that come afterthe current element in the HTML
document, not just siblings.
Example:
HTML snippet:
<div class="header">Header</div>
<p>Paragraph after header.</p>
<div>Another div after header.</div>
Step-by-step:
https://www.linkedin.com/in/anshulagarwal30
1. Identify the element (<div class="header">).
2. Use the XPath to selectall elementsthat appear afterit.
XPath Expression:
L ist<WebElement> followingElements =
driver.findElements(By.xpath("//div[@class='header']/following::*"));
Explanation:
● We are finding the <div> with class "header".
● Then, we select all the elements that appear after this <div>.
8.Preceding Traversal (preceding::)
Goal: Move to all elements that appearbeforethecurrent element in the document.
● W
hat it does: This finds any elements that come beforethe current element in the
HTML document, not just siblings.
Example:
HTML snippet:
<div>First div</div>
<p>First paragraph</p>
<div class="content">Second div</div>
Step-by-step:
1. Identify the second element (<div class="content">).
2. Use the XPath to select all elements that appearbeforeit.
XPath Expression:
L ist<WebElement> precedingElements =
driver.findElements(By.xpath("//div[@class='content']/preceding::*"));
Explanation:
● We are finding the <div> with class "content".
● Then, we select all the elements that appear before it.
https://www.linkedin.com/in/anshulagarwal30
9.Self Traversal (self::)
Goal: Select the current element itself.
● What it does: This is used to reference the elementitself.
Example:
HTML snippet:
<input id="search" type="text" />
Step-by-step:
1. Identify the element (<input id="search">).
2. Use the XPath to refer to the element itself.
XPath Expression:
WebElement searchInput = driver.findElement(By.xpath("//input[@id='search']/self::input"));
Explanation:
● We are finding the <input> element with id="search".
● The self::input refers to the element itself, confirming that it’s an <input>.
10.Position Traversal (position())
Goal: Select an element based on itspositionin agroup of elements.
● W
hat it does: This lets you choose elements basedon their order, like "select the 3rd
element."
Example:
HTML snippet:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Step-by-step:
https://www.linkedin.com/in/anshulagarwal30
1. Identify the parent list (<ul>).
2. Use the XPath to select the3rd <li>element.
XPath Expression:
WebElement thirdListItem = driver.findElement(By.xpath("//ul/li[position()=3]"));
Explanation:
● We are selecting the 3rd <li> inside the <ul> by using position()=3.
Path traversal is about moving up, down, or sideways in the DOM to find elements based on
X
their relationships. Here's a quick summary:
● parent::– Moves to the parent element.
● child::– Moves to child elements.
● ancestor::– Moves to ancestors (parents, grandparents).
● descendant::– Moves to descendants (children, grandchildren).
● following-sibling::– Moves to next siblings.
● preceding-sibling::– Moves to previous siblings.
● following::– Selects all elements that follow thecurrent element in the document.
● p
receding::– Selects all elements that come beforethe current element in
the document.
● self::– Refers to the current element.
● position()– Selects elements based on their positionin a group.
y mastering these traversal techniques, we can handle even the most complex DOM structures
B
in Selenium testing!
You might also like
- Element Locators Strategies in SeleniumNo ratings yetElement Locators Strategies in Selenium12 pages
- Locators in Selenium WebDriver With Examples - LambdaTestNo ratings yetLocators in Selenium WebDriver With Examples - LambdaTest46 pages
- Selenium Questions Part2: Selenium Locators: About Me Contact UsNo ratings yetSelenium Questions Part2: Selenium Locators: About Me Contact Us14 pages
- How To Write Effective Xpath Selenium: Xpath //tag - Name (@attribute - Name 'Value')100% (1)How To Write Effective Xpath Selenium: Xpath //tag - Name (@attribute - Name 'Value')6 pages
- Day 1 - Selenium IDE - Session 2 - LocatorsNo ratings yetDay 1 - Selenium IDE - Session 2 - Locators20 pages
- Locators Webdriver When Do You Use? When You Cannot Use?No ratings yetLocators Webdriver When Do You Use? When You Cannot Use?1 page
- WDL2000 - Sn17869-Higher Mcfar Lane PDFNo ratings yetWDL2000 - Sn17869-Higher Mcfar Lane PDF60 pages
- Xpath Vs CSS - Everything You Need To Know About XPath and CSSNo ratings yetXpath Vs CSS - Everything You Need To Know About XPath and CSS11 pages
- Mobile Foam Unit: HD Fire Protect Pvt. Ltd. Technical DataNo ratings yetMobile Foam Unit: HD Fire Protect Pvt. Ltd. Technical Data2 pages
- Most Exhaustive XPath Locators Cheat Sheet - LambdaTestNo ratings yetMost Exhaustive XPath Locators Cheat Sheet - LambdaTest8 pages
- Currency Counting Machine: Intelligent, High Quality Counter With Enhanced Counterfeit DetectionNo ratings yetCurrency Counting Machine: Intelligent, High Quality Counter With Enhanced Counterfeit Detection2 pages
- Ranger Inspections and Testing Brochure 2018No ratings yetRanger Inspections and Testing Brochure 201828 pages
- RF Optimization: Network Analysis and TuningNo ratings yetRF Optimization: Network Analysis and Tuning10 pages
- Airspan ODU Configuration Steps (With TR069) For NTNo ratings yetAirspan ODU Configuration Steps (With TR069) For NT7 pages
- Model 483C05 Eight-Channel, ICP® Sensor Signal Conditioner Installation and Operating ManualNo ratings yetModel 483C05 Eight-Channel, ICP® Sensor Signal Conditioner Installation and Operating Manual14 pages
- The Ultimate Django Guide: From Beginner to Advanced Web DevelopmentFrom EverandThe Ultimate Django Guide: From Beginner to Advanced Web DevelopmentNo ratings yet
