<<Previous Post << Complete Tutorial>> Next Post>>
In the previous articles, I have explained what are locators? , Different types of locators and Demonstrated different Locators.
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.
Next Steps:
- > 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.
<<Previous Post << Complete Tutorial>> Next Post>>