61. Locate the Element Nodes using Relative XPath


Please follow the below steps to locate different elements using Relative XPath:

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:

3. Ensure that HTML Source code of the page is displayed 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:


29. Observe that the <p> tag containing id="para1" attribute is high lighted out of all the available <p> tags and also observe that the paragraph text on the page containing id="para1" attribute in the HTML source code is high lighted out of all the paragraph texts on the page 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 :



Please comment below to feedback or ask questions.

XPath Functions will be explained in the next post.


No comments:

Post a Comment

Followers

Labels