SelectorsHub - an awesome XPath and CSS Plugin
I am an enthusiastic developer since my childhood. I have started with Plus 4 and C 16 machines programming in Basic. I still remember when we were jumping on the bed with my brother, and accidentally saw the Commodore 64 computer on the top of the wardrobe, which was planned to be a Christmas gift for us. I don't have to tell you that we couldn't wait till then. :) I will never forget this memory. Of course in the beginning we only played on the computer, but later I became interested in how can I make my own programs. I have to tell when I first faced the binary number system I did not understand it, but I was still able to draw some sprites on the screen. :)
I continued learning software development during grammar school. I got my Masters degree at the Budapest University of Economics and Technology where I learnt many languages and also learnt a lot about general software development theory and practice.
I have started my professional career as a C++/C# developer, but I switched to Java after a few years. I've visited many meetups and Code Retreats during this time and I've learnt and introduced Agile methodologies in our company. During the years I lead the development team in close cooperation with the product management and testing department.
In 2020 I felt I need something new and I turned towards test automation both API and UI. I did not regret my decision. Since then I tried many frameworks like RestArrured, Selenium, Protractor, Appium, Selenide and Karate.
At the moment I am working as a Senior Software Developer in Test using Selenium and Selenide for UI testing and Karate for API testing.
I believe knowledge sharing is very important, so apart from helping my colleagues work I started my technical blog recently: https://mszeles.com Sharing your knowledge provides many ways for your own development. Whenever I write an article many questions come into my mind which might be interesting for the readers, so I try to answer all of them in my posts. Doing this I learn a lot about the subject. In additionally sharing your knowledge gives a good opportunity for feedback based on which you can further improve.
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
- Axes Based XPath, relative XPath, index-based XPath & absolute XPath.
- Unique relative CSS Selector
- All possible selectors for inspected element
- JS Path and jQuery.
It supports
- XPath and CSS selector error handling
- Shadow dom and nested shadow dom
- iframe and nested iframe
- SVG elements
- Dynamic elements,
- Verify multiple XPaths and complete locators page.
- 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:
- Click the element
- Select the most stable selector from the console
- 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! ✌
