In order to understand the XPath Expressions or CSS Selectors, we need to first understand the hierarchy of HTML Source code.
Let’s take a simple example for understanding the hierarchy of HTML Source code.
Hierarchy of HTML Source Code
The following example will give you a high-level idea on understanding the hierarchy of HTML Source code:
1) Navigate to http://compendiumdev.co.uk/selenium/basic_web_page.html as shown below:
2) Right-click on any blank section of the page and select ‘View Page Source’ option as shown below:
3) Observe that the HTML code for the navigated page will be displayed as shown below:
4) Now let’s categorize the hierarchy of above HTML Source code using the below diagram:
5) Using the above diagram and code (step 3 and step 4), understand the below:
<html> is the root tag (i.e. Parent of all the other tags in the HTML code).
<head> and <body> are the immediate child tags of <html> tag.
<head> and <body> are the sibling tags (They are at the same level as brothers).
<title> tag is the child tag of <head> tag and grand child of <html> tag.
<p> tags are the child tags of <body> tag and grand children of <html> tag.
Two <p> tags are the sibling tags (They are at the same level as brothers).
<html> tag is the grand parent tag of <title> and <p> tags
<head> tag is the parent tag of <title> tag.
<body> tag is the parent tag of <p> tags.
<title> tag and <p> tags are the grand children of <html> tag.
6) So inorder to reach <title> tag, we need to first start with <html> tag, then go to <head> tag and then go to <title> tag
7) And inorder to reach <p> tag, we need to first start with <html> tag, then go to a different route i.e. <body> tag and then go to the required <p> tag.
As you have now understood the hierarchy and diagrammatical representation of HTML code, I will explain the different types of XPath Expressions in the next article.
- > To learn more about Selenium, continue to the next post (Click on Next Post link below)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning 🙂
On a mission to contribute to the Software Testing Community in all possible ways.