What is SelectorsHub?
SelectorsHub is a 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 just in less than 5 seconds. Now we need not to copy and paste attribute values from DOM anymore to build XPath and cssSelector. It also suggest siblings, parents, childNodes, ancestors and descendants etc. It gives the proper error message for invalid syntax like what is missing in Selector. It supports shadowDOM, nested shadow DOM, iframe, nested iframes and SVG elements.
It is the very first and the only innovation which auto suggests values, supports shadowDOM and gives proper error message.
New Features in 3.0
1- Debugger option to inspect dynamic element.
2- Nested Shadow DOM support.
3- Nested iframe support.
4- Generate case insensitive selectors
5- Generate Multi selectors
6- Generate complete script to handle shadow DOM elements.
7- Save the XPath & selector value in SelectorsHub.
1) Generate all types of possible selectors in single click. 2) Copy XPath, cssSelector and JS path from the context menu itself. No need to open DevTools and SelectorsHub tab anymore. 3) Feature to customise contextMenu. 4) Feature to disable and enable SelectorsHub in contextMenu. 5) It gives robust unique relative cssSelector and XPath. 6) It suggests all possible XPath and cssSelector 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 cssSelector. 7) It also supports shadowDOM, iframe, frame and SVG elements. 8) It gives the proper error message like what is wrong in your xpath and cssSelector. 9) It also gives the index based xpath in auto suggest. 10) It has the feature to generate selector with the desired attribute. 11) You can also generate selectors with driver command. 12) You can customise the UI as you want. 13) All the config will be saves in local so next time when you open it, it open with your configs. 14) To copy the Selector's value, just click on the Selector's Header. For example to copy Rel XPath, click on Rel XPath. 15) 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.
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 Gupta, Praveen Prabhakar, Rahul Shetty, Brijesh Deb, Naveen Khunteta, Raghav Pal, Arun Motoori, Hariprasad Srinivas, Karthik K. K, Deepika Juneja, Abhijeet Vaiker, Giridhar Rajkumar, Abhishek Kumar Roy, Faiz Modi, Subrata Sahoo, Sachin Sharma, Avishek Behera, Mukul Kumar, Vijay Singh, Saumya 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.