Generate and Validate Selectors using SelectorsHub

     SelectorsHub is the next generation XPath tool to generate, write and validate the XPath and CSS selectors. SelectorsHub auto suggests all attributes, text and everything to complete Selectors like XPath and CSS selectors in less than 5 seconds. Now we need not to copy and paste attribute values from DOM anymore to build XPath and CSS selector. It also suggests siblings, parents, child nodes, ancestors and descendants etc. It gives the proper error message for invalid syntax like what is missing in selector. It also supports shadow DOM, iframe and SVG elements. Generate all possible selectors and much more. Also, it provides the feature of quick copy paste the relative XPath view context menu.  In this article, we will discuss features of SelectorsHub, SelectorsHub extensions and how to use SelectorsHub.

 Features of SelectorsHub

• Generate all types of possible selectors in single click.
• Copy XPath, CSS selector and JS path from the context menu itself. No need to open DevTools and SelectorsHub tab anymore.
• Feature to disable and enable SelectorsHub in contextMenu.
• It gives robust unique relative CSS selector and XPath.
• It suggests all possible XPath and CSS selector functions while typing like smart editor along with their occurrences to complete Selectors quickly. Now you need not to copy and paste attribute values from DOM anymore to build XPath and CSS selector.
• It also supports ShadowDOM, iframe, frame and SVG elements.
• It gives the proper error message like what is wrong in your XPath and CSS selector.
• SelectorsHub automatically suggests tagName, all attributes with value and everything to complete Selectors quickly. Just type // and it will suggest the right syntax. It also gives the index based XPath in auto suggest.
• It has the feature to generate selector with the desired attribute.
• You can also generate selectors with driver command.
• You can customize the UI as you want.
• All the configuration will be saves in local so next time when you open it, it open with your configurations.
• To copy the Selector’s value, just click on the Selector’s Header. For example to copy Relative XPath, click on Relative XPath.
• To edit Selector’s value, just click on selector’s value, it will put the value in box where you can edit it and verify.

SelectorsHub extensions for different browsers

• Google Chrome: https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh/
• Firefox: https://addons.mozilla.org/en-US/firefox/addon/selectorshub/
• Edge: https://microsoftedge.microsoft.com/addons/detail/selectorshub/iklfpdeiaeeookjohbiblmkffnhdippe
• Opera: https://addons.opera.com/en/extensions/details/selectorshub/

How to use SelectorsHub?

1. Open DevTools on your browser.
2. On the right side, the last sidebar tab is SelectorsHub. Click on it.
3. Here it show all possible selectors for inspected element. For whichever element you want to generate selector, just inspect that and it will generate all possible selectors for that element.
4. To build your own XPath or CSS selector, start typing in the selector input box.
5. SelectorsHub will automatically suggest all attributes and everything to complete Selectors quickly. Now you need not to copy and paste attribute values anymore. With this you can save a huge amount of time.
6. After typing just press enter.
7. It will highlight all matching nodes and list down them in the SelectorsHub tab.
8. It will also scroll the web element to the viewable area.
9. To copy the selectors value, click on the copy icon.
10. To edit selector value, click on that selector value.

SelectorsHub dealing iFrame, SVG elements, ShadowDOM

      We will see how the SelectorsHub dealing with iFrame or frame, SVG elements and ShadowDOM.

iFrame support

• Just inspect the element if it will be inside iframe, it will show in frame in the SelectorsHub tab.
• To write the XPath/CSS selector for any element which is inside an iframe, just inspect that element and start typing.
• To verify any selector (XPath or CSS selector) inside an iframe, first inspect any element inside that iframe in which you want to verify your selector then verify your selector.

SVG element support

      As we all know that SVG elements doesn’t support the standard XPath pattern. So most of the times we struggle while writing the XPath for SVG elements. But now SelectorsHub has solved this problem. You just type // and it will suggest the correct syntax and you can build XPath without wasting anytime.

ShadowDOM support

• ShadowDOM supports only the CSS selector and it doesn’t support XPath.
• Just inspect the element if it will be inside shadowDOM, it will show in ShadowDOM in the SelectorsHub tab.
• To write the CSS selector for any element which is inside shadowDOM, just inspect that element and start typing.
• To verify any CSS selector inside a shadowDOM, first inspect any element inside that shadowDOM in which you want to verify your CSS selector.

      I hope you really enjoyed to read this article. Also, learned the concept and use of SelectorsHub free CSS selector, XPath and timesaver tool. You can install this tool in your desired browser as an extension and start inspect strong element locators for your selenium automation script.

Reference: SelectorsHub

make it perfect!