1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html
2. Right click on the page as shown below and select 'View Page Source' option as shown below:
4. Lets locate the <html> tag in the above HTML Source using the Relative XPath by following the below steps.
5. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
6. Click on 'Firepath' tab from the 'FireBug' options as shown below:
7. Type Relative XPath path //html into the XPath field and click on 'Eval' button as shown below:
8. Observe that the <html> tag is high lighted and also the complete page body and page title are high lighted as shown below:
9. View the HTML Source code in the Step 3 and lets locate the <head> tag using Relative XPath path by following the below steps.
10. Type Relative XPath path //head into the XPath field and click on 'Eval' button as shown below:
11. Observe that the <head> tag is high lighted as shown below:
12. View the HTML Source code in the Step 3 and lets locate the <title> tag using Relative XPath path by following the below steps.
13. Type Relative XPath path //title into the XPath field and click on 'Eval' button as shown below:
14. Observe that the <title> tag is high lighted as shown below:
15. View the HTML Source code in the Step 3 and lets locate the <body> tag using Relative XPath path by following the below steps.
16. Type Relative XPath path //body into the XPath field and click on 'Eval' button as shown below:
17. Observe that the <body> tag is high lighted and also observe that the page body is high lighted as shown below:
18. View the HTML Source code in the Step 3 and lets locate all the <p> tags using Relative XPath path by following the below steps.
19. Type Relative XPath path //p into the XPath field and click on 'Eval' button as shown below:
20. Observe that all the <p> tag are high lighted and also observe that the all the paragraph texts on the page are high lighted as shown below:
21. View the HTML Source code in the Step 3 and lets locate the first <p> tag using Relative XPath path by following the below steps.
22. Type Relative XPath path //p[1] into the XPath field and click on 'Eval' button as shown below:
23. Observe that the first <p> tag is high lighted out of all the available <p> tags and also observe that the first paragraph text on the page is high lighted out of all the paragraph texts on the page as shown below:
24. View the HTML Source code in the Step 3 and lets locate the second <p> tag using Relative XPath path by following the below steps.
25. Type Relative XPath path //p[2] into the XPath field and click on 'Eval' button as shown below:
26. Observe that the second <p> tag is high lighted out of all the available <p> tags and also observe that the second paragraph text on the page is high lighted out of all the paragraph texts on the page as shown below:
27. View the HTML Source code in the Step 3 and lets locate the <p> tag containing 'id="para1" attribute using Relative XPath path by following the below steps.
28. Type Relative XPath path //p[@id='para1'] into the XPath field and click on 'Eval' button as shown below:
30. View the HTML Source code in the Step 3 and lets locate the <p> tag containing 'id="para2" attribute using Relative XPath path by following the below steps.
31. Type Relative XPath path //p[@id='para2'] into the XPath field and click on 'Eval' button as shown below:
32. Observe that the <p> tag containing id="para2" attribute is high lighted out of all the available <p> tags and also observe that the paragraph text on the page containing id="para2" attribute in the HTML source code is high lighted out of all the paragraph texts on the page as shown below:
33. View the HTML Source code in the Step 3 and lets locate the <p> tag containing class="main" attribute using Relative XPath path by following the below steps.
34. Type Relative XPath path //p[@class='main'] into the XPath field and click on 'Eval' button as shown below:
35. Observe that the <p> tag containing class="main" attribute is high lighted out of all the available <p> tags and also observe that the paragraph text on the page containing class="main" attribute in the HTML source code is high lighted out of all the paragraph texts on the page as shown below:
36. Suppose if we want to identify the paragraph text elements using either id='para1' or id='para2' attributes in the <p> tags of HTML Source code, we have to use the or boolean operator in XPath Statement. Lets implement this in the below steps.
37. Type Relative XPath path //p[@id='para' or @id='para2'] into the XPath field and click on 'Eval' button as shown below:
38. Observe that the <p> tag containing id="para1" attribute and also the <p> tag containing id='para2' attribute are high lighted out of all the available <p> tags and also the paragraph texts related to the identified <p> tags are high lighted on the page as shown below :
37. Type Relative XPath path //p[@id='para' or @id='para2'] into the XPath field and click on 'Eval' button as shown below:
38. Observe that the <p> tag containing id="para1" attribute and also the <p> tag containing id='para2' attribute are high lighted out of all the available <p> tags and also the paragraph texts related to the identified <p> tags are high lighted on the page as shown below :
Please comment below to feedback or ask questions.
XPath Functions will be explained in the next post.
XPath Functions will be explained in the next post.
