The content of the article includes:
- The Xpath concept
- Classification of Xpath
- The structure of Xpath
- Detailed explanations of the elements in the structure and examples
- Some technology in Xpath
1. The Xpath concept
XPath is an XML path. It is a syntax for finding any element on a web page using the XML path expression. XPath is used to find the locator of any element on a web page using the HTML DOM structure.
2. Classification of Xpath
2.1. Relative xpath
- The element can be searched anywhere on the Web
- Can start from any position of HTML
- Keep it short and very flexible
- Start with the character: “//”
2.2. Absolute Xpath
- Searching directly from an element
- Start with “/”
- The writing structure is long and not flexible
3. The structure of Xpath
//tagname[@attribute=value]
3.1. Symbol “//”
//: is the instance starting from the current node
3.2. Element => tagname
Textbox => input
Textarea => textarea
Dropdown List (default) => select> option
Dropdown list (Custom) => ul> li div> span
Button => button input
Checkbox => input
Radio button => input
Image => img
Link => a
Table => table
header (table) => th
Column (table) => td
Row (table) => tr
Text => div span label
Header => h1 – h5
Slider => input
Upload file => input
Tooltip => div
Menu => a
Icon => span
3.3. Attribute
- Attribute is the name of the Attribute
Example: In the FirstName field of the registered function in the page: http://live.demoguru99.com/index.php/customer/account/create/
Attribute name = id
3.4. Value
- Value is the value of the attribute
Example: In the FirstName field of the registered function in the page: http://live.demoguru99.com/index.php/customer/account/create/
Attribute value = firstname
=> Xpath: //tagname[@attribute=value]
In this example, this will convert to the following:
// input [@ id = ‘firstname’]
4. Some technology in Xpath
4.1. When the Attribute value is unique
- Use the format: Tagname & Attribute & Value
//tagname[@attribute=value]
- // input [@ id = ’email’]
- // input [ @title = ‘title = “Email Address”]
- // input [ @name = ‘login [username]’]
4.2. When an element cannot be identified by its tag and attribute
4.2.1. Parent node.
- Using the structure:
1 2 | //parent-tagname[@attribute='value']//child-tagname[@attribute='value'] |
For example:
Using the Tagname and attribute we cannot find the uniqueness of the element:
At this point we need to get more conditions from the father’s life downwards
4.2.2. Taken from father’s life upwards
4.3. Get absolute
4.3.1. Text ()
1 2 | text()=: Chứa giá trị tuyệt đối trong chuỗi |
For example: 
4.3.2. @attribute ()
1 2 | @attribute()=: chứa giá trị tuyệt đối trong attribute |
4.4. Get relative
1 2 | contains(text()),attribute (value) |
1 2 | contains(@attribute,value) |
CONCLUDE
The article content helps you to capture the element in many different ways in specific cases, next article I will write four more ways to catch the element with Xpath and introduce CSS in selenium to you.
Thank you for reading this article!