Are you new to web automation and struggling with crafting Xpaths for various scenarios? Look no further – this guide covers all possible ways to write Xpaths to suit every situation. Whether the web element’s text is dynamic, attributes are unique, or you’re dealing with complex structures, we’ve got you covered.
1. Xpath Based on Text:
When you’re automating web interactions, you often want to locate elements based on the visible text they contain. This can be useful when you’re looking for specific labels, headings, or other textual information displayed on a web page.
|
1 |
//tag[text()='Text Present in HTML Element'] |
Example:
HTML:
|
1 |
<h3 class="Sample">Text1</h3> |
Xpath:
|
1 |
//h3[text()='Text1'] |
2. Xpath Based on Attributes:
When you’re automating interactions with web elements, one effective way to locate elements is by using their unique attributes. These attributes might include
|
1 |
id |
,
|
1 |
class |
, or other custom attributes that are specific to certain elements on the page.
|
1 |
//tag[@attribute='value'] |
Example:
HTML:
|
1 |
<div class="Class1" id="Id1">Text1</div> |
Xpath by class attribute:
|
1 |
//div[@class='Class1'] |
Xpath by id attribute:
|
1 |
//div[@id='Id1'] |
3. Xpath Using ‘contains’ Method:
Let’s explore the concept of using the
|
1 |
contains |
method in XPath to target elements when attributes or text are partially dynamic, and understand how to construct XPaths using this technique:
Using the
|
1 |
contains |
Method in XPath:
In web automation, you often encounter scenarios where attributes or text content are partially dynamic. For instance, an attribute might have a changing suffix or prefix, or the text might include dynamic values. The
|
1 |
contains |
method in XPath allows you to locate elements based on partial matches, making your automation more adaptable to dynamic content
Syntax 1:
|
1 |
//tag[contains(@attribute,'value')] |
Syntax 2:
|
1 |
//tag[contains(text(),'Text of the element')] |
Example:
HTML:
|
1 |
<div class="Class1" id="ConstantIdDynamicId">ConstantTextDynamicText</div> |
Xpath using id attribute:
|
1 |
//div[contains(@id,'ConstantId')] |
Xpath using text:
|
1 |
//div[contains(text(),'ConstantText')] |
4. Xpath Using Logical Operators:
Let’s dive into the concept of using logical operators in XPath to combine conditions and understand how to construct XPaths using this technique:
Using Logical Operators in XPath:
XPath allows you to use logical operators such as
|
1 |
or |
and
|
1 |
and |
to create more complex conditions for targeting elements. These operators help you combine multiple conditions to find elements that satisfy specific criteria.
a. Using OR:
|
1 |
//tag[@attribute='value' or @attribute='value'] |
b. Using AND:
|
1 |
//tag[@attribute='value' and @attribute='value'] |
Example:
HTML:
|
1 |
<div class="Class1" id="Id1">Text1</div> |
Using OR:
|
1 |
//button[@class='Class1' or @id='Id1'] |
Using AND:
|
1 |
//button[@class='Class1' and @id='Id1'] |
5. Xpath Using Relational Expressions:
Let’s explore the concept of using relational expressions in XPath to navigate the relationships between elements and understand how to construct XPaths using this technique:
Using Relational Expressions in XPath:
XPath allows you to navigate the relationships between elements in the HTML structure using various relational expressions. These expressions help you target elements that are related in terms of hierarchy or position within the DOM tree.
a. Ancestor:
|
1 |
//tagname/ancestor::ancestortag |
b. Following:
|
1 |
//tagname/following::followingtag |
c. Child:
|
1 |
//parenttag/child::childtag |
d. Preceding:
|
1 |
//tagname/preceding::precedingtag |
e. Following-sibling:
|
1 |
//tagname/following-sibling::siblingtag |
f. Descendant:
|
1 |
//parenttag/descendant::descendanttag |
g. Parent:
|
1 |
//childtag/parent::parenttag |
6. Dependent and Independent Xpath:
When you’re dealing with a situation where an independent XPath isn’t feasible or reliable, you can use the dependent approach to navigate to your target by starting from a known element and finding a common parent with your target element.
Here’s how it works:
-
Identify an Independent Element: Start by identifying an element that is stable and relatively easy to locate using an independent XPath. This element will serve as your starting point.
-
Determine the Common Parent: From the independent element, navigate upwards through the DOM tree to find a common parent element that encapsulates both the independent element and the target element you want to locate.
-
Navigate to the Target Element: Once you’ve reached the common parent element, navigate downwards in the DOM tree to locate the specific target element you’re interested in.
Example:
HTML:
|
1 2 3 4 5 6 7 8 9 |
<tr class="Class1"> <td id="Id1" class="Class2"> <a href="#" class="Class3">Text1</a> </td> <td id="Id2" class="Class4"> <div class="Class5" id="Id3" title=""> <span class="Class6">Text2 </span> </td> </tr> |
Xpath:
|
1 |
//span[text()='Text2']/../../..//a[@class='Class3'] |
7. Group Index Xpath:
Certainly, let’s discuss the concept of using group indexing in XPath when dealing with multiple matching elements, and understand how to construct XPaths using this technique:
Using Group Indexing in XPath:
When there are multiple elements with the same characteristics on a web page and you need to interact with a specific instance, you can use group indexing in XPath. Group indexing allows you to target a particular element within a group of matching elements.
Example:
HTML:
|
1 2 3 4 5 6 |
<tr class="Class1"> <td class="Class2"></td> <td class="Class2"></td> <td class="Class2"></td> <td class="Class2"></td> </tr> |
Xpath for 3rd element:
|
1 |
(//td[@class='Class2'])[3] |
Xpath for 2nd element:
|
1 |
(//td[@class='Class2'])[2] |
By following these techniques, you’ll become proficient at crafting Xpaths for web automation in various scenarios. Whether you’re a beginner or an experienced developer, these methods will help you navigate the complexities of automating web applications effectively.
