Relative XPath Helper - Using this plugin in Selenium for generating relative XPath locators from Chrome browser

So far, we have used the below Firefox Add ons / Plug-ins for locating the GUI elements on the Web Pages:

• Firebug
• Firepath
• WebDriver Element locator
• Selenium IDE

Though we can use the Plug-ins for Firefox browser to locate the GUI elements on the web-pages, but if you are a Chrome lover and want to locate the GUI elements on the Web Pages from a Chrome browser, then Relative XPath Helper Plug-in is going to make your day. i.e. Relative XPath Helper Plug-in is the chrome browser plug-in for locating the GUI elements on the web pages.

XPath Helper Plug-in versus Relative XPath Helper Plug-in

Though both plug-ins help us in auto generating the XPath for locating the GUI elements on the Web Page, but they have the below difference:

• XPath Helper Plug-in locates the absolute XPath of the GUI elements
• Relative XPath Helper Plug-in locates the relative XPath of the GUI elements

Note: In Selenium Automation, we use relative XPath over the absolute XPath. Hence in Chrome browser, Relative XPath Helper plug-in is recommended for auto generating the relative XPath of the required GUI elements.

Using 'Relative XPath Helper' Chrome browser Plug-in, we can perform any of the below:

• Generate Relative XPath locators for GUI elements on the web pages
• Validating the manually written Relative XPath locator, to check whether it is locating the specific GUI elements on the web pages.
• Can generate the Relative XPath locator for two GUI elements at a time

Though this plug-in can do more, I am only explaining the functionality of this plug-in according to our usage / needs in Selenium Automation.

Note: Absolute XPath locator will be generated by 'XPath Helper' chrome plug-in for the selected GUI element on the web page. In order to generate relative XPath, we need to use 'Relative XPath Helper' plugin. XPath Helper plugin for chrome browser is explained in a different post.

Practical Usage of 'Relative XPath Helper' Chrome Browser Plug-in

Lets follow the below steps to practically find out how a 'Relative XPath Helper' Chrome browser Plug-in can do the above:

Installing 'Relative XPath Helper' Chrome Browser Plug-in

Lets follow the below steps for installing the 'Relative XPath Helper' Chrome Browser Plug-in:

1. Launch Chrome browser as shown below:

2. Google Search for "Relative XPath Helper Chrome Plug-in" from the chrome browser as shown below:

3. Click on the below market link from the displayed search results:

4. 'Relative Path Helper' details will be displayed in the chrome web store and click on 'ADD TO CHROME' button as shown below:

5. Click 'Add extension' on the displayed Pop-up dialog as shown below:

6. 'Relative XPath Helper' plug-in will be installed and added to the chrome browser as extension as shown below:

Generating Relative XPath locators for GUI elements on web pages using 'Relative XPath Helper' Plug-in

Lets follow the below steps for generating Relative XPath locators for GUI elements on the web pages

7. Navigate to the application under test for which you want to locate the GUI elements on the web page, (say navigate to sample application say www.omayo.blogspot.com ):

8. Lets generate the Relative XPath locator for the below shown 'Selenium143' GUI element link on the web page using 'Relative XPath Helper' Chrome browser plug-in:

9. Now, click on earlier installed and added 'Relative XPath Helper' Chrome extension on the Chrome browser as shown below:

10. Pane of 'Relative XPath Helper' will be displayed as shown below:

11. Right click on any GUI elements say first 'Selenium143' link and observe that relative XPath for first 'Selenium143' link will be displayed in the pane as shown below:

12. Similarly right click on any other GUI elements say second 'Selenium143' link and observe that relative XPath for second 'Selenium143' link will be displayed in the pane as shown below:

Hence, at a time Relative XPath locators for two elements can be generated by the 'Relative XPath Helper' chrome browser plug-in.

Validating the manually written Relative XPath locator, to check whether it is locating the specific GUI elements on the web pages.

Lets follow the below steps for validating the manually written Relative XPath locators for GUI elements on the web pages

13. Lets say, I have manually wrote Relative XPath locator for 'Selenium143' link on the Web Page as '//a[@id='link1']' and would like to validate whether this XPath locator is able to locate the required GUI element.

14. Manually write the Relative XPath locator say '//a[@id='link1']' into the pane of  'Relative XPath Helper' as shown below and press 'Enter' button on the keyboard:

15. Validate the Relative XPath locator manually written into the pane, by checking whether the required GUI element got highlighted on the page, as shown below:

Conclusion

Hence if you are a Chrome lover and want to locate the GUI elements on the Web Pages from a Chrome browser, then 'Relative XPath Helper' Chrome browser Plug-in is the best choice.

Relative XPath Helper Plug-in can be used to auto generate Relative XPath for the required GUI element and also can be used to validate the manually provided Relative XPath, to check whether the manually provided Relative XPath is locating the required GUI elements on the page.