SelectorsHub - an awesome XPath and CSS Plugin

I had to create my own Chrome Extension Selenideium Element Inspector, just to realize there is already a very similar product on the market.

Not long after I posted about the plugin in the Test Automation LinkedIn group I got a comment on my post letting me know there is an extension called SelectorsHub developed by Sanjay Kumar which already covers the functionality I have implemented.

SelectorsHub

I immediately head into the Chrome Web Store to check the plugin. I was amazed. SelectorsHub has more than 80000 users and it has a 5 stars review from 12k people.

SelectorsHub has all the bells and whistles that you need

• A great feature set
• A nice GUI
• Crossbrowser support

Let's look at the features of SelectorsHub

It can autogenerate

1. Axes Based XPath, relative XPath, index-based XPath & absolute XPath.
2. Unique relative CSS Selector
3. All possible selectors for inspected element
4. JS Path and jQuery.

It supports

1. XPath and CSS selector error handling
2. Shadow dom and nested shadow dom
3. iframe and nested iframe
4. SVG elements
5. Dynamic elements,
6. Verify multiple XPaths and complete locators page.
7. It suggests what exception automation will give for the respective element.

Sanjay Kumar even made an online training about the tool and XPath and CSS selectors.

The supported browsers are Chrome, Safari, Firefox, Edge, Opera, Brave, Chromium. That is what I call full support of different browsers.

I highly recommend checking the plugin in case you would like to learn the ins and outs of CSS and XPath selectors.

Is there any reason for the existence of Selenideium Element Inspector?

Of course. However, both tools are working with CSS and XPath, Selenideium Element Inspector is highly tailored towards productivity.

First of all, I love simplicity. Selenideium Element Inspector is so simple it does not even have a GUI, but it is not needed at all as it uses Chrome DevTools's Console.

Selenideium Element Inspector helps you to become as productive as possible. You only need 3 steps while working with a web element in the DOM:

1. Click the element
2. Select the most stable selector from the console
3. Copy-paste the full line of code into your favourite IDE

That's it. Very simple, don't you think?

In addition to being very effective, Selenideium Element Inspector is a knowledge-sharing project.

By following my series you can get in-depth knowledge of how to create your very own Chrome extension and how to navigate the Document Object Model (DOM) via Javascript.

And finally, Selenideium Element Inspector is an open-source project with all the advantages of being an open-source project. Check it out on GitHub.

And now please go, download the plugins, and share your feedback! 😊

Download SelectorsHub

Download Selenideium Element Inspector

P.S.: Support us by sharing this article in case you found SelectorsHub or Selenideium Element Inspector useful.

📚 Join the Selenide community on LinkedIn! ✌