What is SelectorsHub?

SelectorsHub is a free browser extension to write own XPath and cssSelector in less than 5sec with the auto suggest feature.

SelectorsHub auto suggests all possible functions, attributes, text and everything along with their occurrences while typing to complete Selectors like xpath & cssSelector in just less than 5 seconds. Now we need not to copy and paste attribute values from DOM anymore to build XPath and cssSelector. It also supports axes like siblings, parents, childNodes, ancestors and descendants etc. It gives the proper error message for invalid syntax like what is missing in Selector. It also generates all possible selectors just in a single click. It supports shadowDOM, nested shadow DOM, iframe, nested iframes, SVG elements, dynamic dropdown, submenu and dynamic invisible elements too. It supports all the browsers.

It is the very first and the only innovation which auto suggests values, supports shadowDOM and gives proper error messages.

SelectorsHub Features:

  • Smart editor which auto suggest all possible XPath & selectors functions along with their occurrences while typing.
  • Generate all types of possible selectors for inspected element in single click.
  • Error handling. It gives the proper error message like what is wrong in your xpath and cssSelector. 
  • Supports iframe and nested iframes.
  • Supports shadow dom and nested shadow dom.
  • Support SVG elements.
  • Gives proper information about what kind of the inspected element it is like svg etc.
  • Debugger feature to inspect dynamic web element like dropdown menu options.
  • Feature to copy selectors value direct from right click context menu on the web element, no need to open SelectorsHub tab.
  • Feature to customise contextMenu. 
  • Generate case insensitive selectors.
  • Generate Multiple XPath & selectors in single go.
  • Gives complete script to handle shadow DOM elements.
  • Save the XPath & selector value in SelectorsHub.
  • Feature to disable and enable SelectorsHub in contextMenu. 
  • It generates robust unique relative cssSelector and XPath. 
  • Generate the index based xpath in auto suggest. 
  • Feature to generate selectors with the desired attribute. 
  • Feature to generate selectors with driver command. 
  • Option to Customise the UI as users need.
  • All the config will be saves in local so next time when user open it, it open with user’s configs. 
  • To copy the Selector’s value, just click on the Selector’s Header. For example to copy Rel XPath, click on Rel 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.

 

Features in detailed:

1. Auto Suggest- 
                    SelectorsHub automatically suggests tagName, all attributes with value and everything to complete Selectors quickly. Now you need not to copy and paste attribute values from DOM anymore. With SelectorsHub you can save huge amount of time and complete your xpath/cssSelector just in 2-3 seconds.

  • Just type // and it will suggest the right syntax.
    1. Here in the dropdown first numeric value is the occurrence of that suggestion in DOM,
    2. Value in the middle is the suggested function to complete selector.
    3. xpath/css text at the end of the row shows that whether this suggestion for xpath or css.

  • Just type square bracket [ and it will suggest all the possible attributes and text combinations with correct format both for xpath and cssSelector along with their occurrences.

  • Select any of the value from the dropdown and press enter, it will show the total matching node and will list them in SelectorsHub tab. It will also highlight all of them in the web page.

  • To get all possible following-sibling of the inspected element, just type “fo” and there you go 🙂

  • To get all possible descendant of the inspected element, just type “de” and there you go 🙂

  • To get all possible ancestor of the inspected element, just type “an” and there you go 🙂

  • To get all possible preceding-sibling of the inspected element, just type “pr” and there you go 🙂

 
  • To get the correct xpath syntax for SVG element, just type // and there you go 🙂

  • To write cssSelector with tag attribute combination, just start typing it will suggest all possible combinations.

  • To write cssSelector with id, just type # and it will suggest you correct cssSelector with the occurrence and in single click complete your cssSelector.

  • To write cssSelector using class, just type dot . and it will suggest you the correct cssSelector with class and you can complete it in single click.

2. Error message with the missing elements

  • Shows the invalid Selector type along with the proper error message like what is missing in selector.





3. ShadowDOM support

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


4. iframe support

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

5. 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.


Very simple steps to use the tool-

1. Open DevTools.
2. On right side, the last sidebar tab is SelectorsHub. Click on it. If not visible, expand the sidebar.

3. Here in the Selectors box start typing your selector xpath/cssSelector.

4. SelectorsHub will automatically suggest tagName, all attributes and everything to complete Selectors quickly. Now you need not to copy and paste attribute values from DOM anymore. With SelectorsHub you can save huge amount of time.

5. After completing Selector just press enter and it will show total number of matching elements.

6. It will high light all matching node and list down them in the SelectorsHub tab.

7. It will scroll the web element to viewable area if it is not in the viewable area.

8. To copy selectors value, just double click anywhere in the box or click on xpath/cssSelec.. title box.

                                                                                              ———-

My heartfelt gratitude and big thanks to whole community for your kind support and feedback to build this product. Special thanks to Raghunandan GuptaPraveen Prabhakar Rahul ShettyBrijesh Deb, Naveen KhuntetaRaghav PalArun MotooriHariprasad Srinivas,  Karthik K. KDeepika JunejaAbhijeet VaikerGiridhar RajkumarAbhishek Kumar RoyFaiz ModiSubrata SahooSachin SharmaAvishek BeheraMukul KumarVijay SinghSaumya Singh, Updesh Jain and my whole community  for the early feedback and support. Without your support this new reality was never possible. Looking forward your continuous love and support to help our community.su