_edited_edited.png)
How to find elements by XPath in Html page with Example
What is xpath?
XPath, an essential and powerful locator technique used to navigate through the HTML structure of a web page. It allows you to precisely locate elements within both HTML and XML documents using the HTML DOM structure.
XPath stands for XML Path Language
XPath uses "path like" syntax to identify and navigate nodes in an XML document
XPath contains over 200 built-in functions
XPath is a major element in the XSLT standard
XPath is a W3C recommendation
XPath uses path expressions to select nodes or node-sets in an XML document.
Xpath standard functions
XPath includes over 200 built-in functions.
There are functions for string values, numeric values, booleans, date and time comparison, node manipulation, sequence manipulation, and much more.
Today XPath expressions can also be used in JavaScript, Java, XML Schema, PHP, Python, C and C++, and lots of other languages.
Xpath is used in XSLT
XPath is a major element in the XSLT standard.
With XPath knowledge you will be able to take great advantage of your XSLT knowledge.
Xpath is used in testing frameworks?
Xpath is heavily used in testing frameworks like Selenium, cucumber etc.
These path expressions look very much like the path expressions you use with traditional computer file explorer.
Let's have a look at a generic XPath syntax and then we will go through some options that Xpath provides, followed by some common examples. Hope this tutorial will help anyone who is new to XPath or needs more understanding about how XPath works. Happy learinng.
XPath Syntax:
Below is the syntax for Xpath:
Xpath =//tagname[@Attribute=’value’] or //*[@attribute='value']
Here,
//: denotes the current node
tagname: denotes the tagname of the current node
@: is the Select attribute
Attribute: denotes the attribute of the node
Value: denotes the value of the chosen attribute
XPath options:
Following options can be used while evaluating the xpath expression
· or -- //div[@id=‘container’ or @id=‘other-container’]
· and -- //div[@id=‘container’ and @name=‘container-name’]
· contains() -- //div[contains(@class,‘sample-class’)]
· starts-with()
· text()
· chained xpath
To find the element on a web page accurately there are different types of locators that can be used along with xpath:
XPath Locators | Find different elements on web page |
ID | To find the element by ID of the element |
Classname | To find the element by Classname of the element |
Name | To find the element by name of the element |
Link text | To find the element by text of the link |
XPath | XPath required for finding the dynamic element and traverse between various elements of the web page |
CSS path | CSS path also locates elements having no name, class or ID. |
| |
Types of XPath
There are two types of XPath:
· Absolute XPath
· Relative XPath
Absolute XPath
Absolute Xpath is the simplest form of XPath in Selenium. It is the direct way to find the element, but the disadvantage of the absolute XPath is that if there are any changes made in the path of the element then that XPath gets failed.
The key characteristic of XPath is that it begins with the single forward slash (/), which means you can select the element from the root node.
Syntax of Absolute XPath
/html/body/div[1]/div/a
Relative XPath
Relative Xpath starts from the middle of HTML structure. It starts with double forward slash (//). It can search elements anywhere on the webpage, means no need to write a long xpath and you can start from the middle of HTML structure. Relative Xpath is always preferred as it is not a complete path from the root element.
Syntax of Relative XPath
//tagname[@attribute=”value”]
Example : //input[@name=”txtUsername] or //*[@name=”txtUsername”]
Some examples to find xpath from a web page
How To find Xpath from Dsportal Website for a Button
Follow the steps below to find the XPath in DSAlgoportal
1. Launch DS algo Website.
2. Let’s try to get the xpath of the below highlighted button:
3. Right click on “Get Started” button under “Data Structures-Introduction” section and click on Inspect
4. Enter Ctrl+F to bring up the find window and enter the xpath expression. The resulting screen will look like below:
5. Let’s write XPath in the elements tab.
Note: Use Ctrl+F to write XPath in the elements tab, as shown below. If there is only a unique element found in the webpage, it will show as 1/1 like below:
As seen above, a simple XPath is used to locate the Get Started button. Based on the XPath syntax, first use // which means anywhere in the document. Here a is the tag name that has an href attribute with the value “data-structures-introduction”.
On writing the XPath, it has highlighted the element, which implies that this particular element was located using XPath.
Xpath expression: //a[@href="data-structures-introduction"]
How To find Xpath from Dsportal Website for a dropdown
How To find Radio Button Xpath
We can find a radio button element by value with Selenium webdriver. A radio button in an html document has a tagname input and it has a type attribute set to radio. We can select a radio button by using the click() method after identifying it.
Let us see the html code of a radio button. To identify it with a value attribute we have to use the xpath or css locator.
How to find Check box Xpath
First of all we need to uniquely identify the checkbox with the help of any of the locators like css, xpath, id, class and so on.
Next we have to use findElement() method to locate the element and finally perform the clicking action. The exception will be thrown if there is no matching element found on the page.
Syntax
driver.find_element_by_xpath("//input[@name='check-box']")
Conclusion
Finding an element using xpath expression in a webpage is great technique to perform many functions including testing, automation, development etc. It can also help users for issue tracking and debugging. Hope this little tutorial about xpath will be helpful.
XPath is a powerful selector type for locating elements on a web page.
Additionally, XPath provides various syntax to locate the web elements on a web page.
Moreover, predicates in XPath locates specific nodes using the index of the web elements.
Finally, significant categories of the XPaths are Absolute and Relative XPath, and majorly relative Xpath is the recommended locator strategy.
Comments