Introducing SeletorsHub – the new generation of XPath & Selectors tools

Tram Ho

1 / Introduction:

Locators play a very important role in automation scripts. It helps the script to define elements on the GUI of Web applications to interact. If you do not define the elements correctly your automation scripts will not be able to interact with them, so defining the elements correctly on the GUI is a very important step in development. Project Automation.

CSS Selector and Xpath in Selenium are two of the most powerful ways to locate Web elements. However, handling this get CSS Selector and Xpath will take a lot of your time. Today I will introduce to you a tool to assist you in handling these CSS Selectors and Xpath in just 5s. First of all, talking about tools, there are many existing tools (Chrome Dev Tools, ChroPath, Xpath Helper …) which assist in getting CSS Selector and Xpath values. However, I see some problems that the other tools cannot do?

  • Is there support ShadowDOM or not?
  • Is there iFrame support?
  • Is there support SVG Element or not?
  • Does your Xpath point out wrong when you write it incorrectly?
  • Is the auto-suggest system of the tool good or not?

With countless questions above, today I will share with you a very useful tool, which is SeletorsHub tool, developed by Sanjay Kumar. This is a free extension on many browsers (Chrome, Firefox, …). It not only helps you to solve the above problems, but also is a very useful tool to help you improve your Xpath writing ability by an auto-suggest system for combining attributes (attributes, text, siblings, etc.), helps you build a quick set of selectors. So, basically, now you will have to write your XPath and CSS yourself instead of going to copy and parse like the tools before, so you won’t lose your skills and write XPath. Too interesting, isn’t it?

Because it is a free extension on many browsers, the installation is extremely simple, you can find it on the Chrome web store:

2 / Features:

  • Excellent auto-suggest system: With this feature, SeletorsHub will suggest properties that make it easy for users to create CSS Selector and Xpath. As you can see, for the UserName field, when you type //input it will auto-suggest you attributes like id , placeholder , type so you can finish Xpath quickly.

Xpath Axes are also supported

  • SVG Element Support:
    We probably don’t know that the SVG elements <svg> don’t support the standard XPath format. SVG elements support different XPath patterns. SelectorsHub will support us to make this much easier by telling us the correct format. It also helps us learn how to write selectors for the SVG elements more precisely. Most of the rest of the tools do not support SVG elements.

  • iFrame Support:
    SelectorsHub also provides support for iFrame. It will tell us if the tested element is inside the iFrame or not. Now you can quickly write and verify selectors for elements inside iFrame without spending too much time.

  • ShadowDOM Support:
    It was previously impossible to write and verify selectors in CSS for ShadowDOM elements, but now a great innovation called SelectorsHub has made it possible. With the help of SelectorsHub, you can quickly test and verify selectors using CSS for ShadowDOM elements.

  • Showing error information of selectors: Previously, when you wrote a wrong selectors (syntax, pattern …) there were no tools that could tell us what was wrong in our selectors. DevTools only suggests 0 matching nodes for the wrong selector. But now you have SelectorsHub, which will help you by displaying the exact error message and what’s inaccurate or missing in your selectors. Too great, right?


Error definitions will be defined here:

  • Displays error information of selectors: In addition to the strengths above, SelectorsHub still has the same features as other tools.

1 / If there are multiple elements on the page found with XPath / CSS value entered, SelectorsHub will automatically scroll the window to the first element corresponding to the found XPath / CSS.

2 / If there are many elements on the page found, corresponding to the imported XPath / CSS. SelectorsHub will display all of these elements and in the order they appear. On the web page, for each corresponding element, there will be a dashed blue border around to highlight this element.

3 / If you hover your mouse on any of the corresponding elements in the SelectorsHub tab, the blue dashed border will turn into an orange dot border to highlight the corresponding element in the web page.

4 / In case the found element is not in the display area of ​​the web page, when hovering the mouse on the element in the SelectorsHub tab, the page will automatically scrool to the visible area of ​​that element and be highlighted. enabled by the orange dot border.

3 / What are some advantages of using SelectorsHub over other XPath Tools & Selectors tools?

  • Easy to install because it is a free – browser extension
  • Supports many browsers CHROME, SAFARI, FIREFOX, EDGE, OPERA
  • Great auto-suggest feature
  • Supports ShadowDOM, iFrame, SVG Element
  • Displays detailed error selector information
  • Improve your ability to write XPath and CSS Selectors
  • Especially with support for Dark theme
  • SelectorsHub will injects script when you open the SelectorsHub tab to use it while other plugins will injects script into your website as soon as the website is opened in browser. This is the biggest reason that many companies do not allow browser plugins but now SelectorsHub solves this problem and takes care of security issues, so it is a secure browser plugin.
  • SelectorsHub does not save any user data.
  • SelectorsHub only runs on your local basis.

4 / Conclusion:

In short, this is a tool that you are doing automation, as well as you are learning and improving your ability to write Xpath and CSS Selector should try and learn. However, these tools are still being developed and improved, so there are still some bugs that inevitably remain.

You can learn more about SelectorsHub here:

Also you can also learn by yourself how to use Xpath in Selenium here:

Share the news now

Source : Viblo