SelectorsHub by @SanjayKumaarr got its first release at the end of July 2020, and looks to be an incredible tool for helping people build good Xpath and CSS selectors straight from their browser of choice.
I grabbed the Chrome extension and started working with it. It’s easy to see how great the tool is, and the potential it has for helping testers write better XPath selectors, which I believe to be unfairly maligned.
I’ve got some initial suggestions based on around an hour of playing around in SelectorsHub that may be able to make the tool even better:
Don’t suggest CSS when the query is Xpath
In order to start a query in the current version of SelectorsHub you need to start typing. If I know I want to use an XPath query, that means I’ll type something like:
//span[The suggestions then include a mix of CSS selectors and XPath predicates. Clicking on a CSS selector results in an XPath selector that matches no elements:
It would make sense to not suggest CSS selectors when the query is an XPath one, and vice versa.
Indicate the Type of Query Being Suggested
For people who are not super confident in how to use XPath and CSS selectors, it might be a good usability enhancement to show them what type of query is being suggested, or built.
Here’s a mockup of what I mean:
With clearer identification of each type of query, I think it’ll be more new user friendly.
Suggestions Can Break the Query
One of the best things about SelectorsHub are the auto-suggestions that are given when a query is being written. They’re quick and handy ways of locating the element you’ve currently got selected.
Currently it can get a little messy if you select one suggestion, then try to alter it to another. The suggestions come back up the moment you edit the query, but if you pick a new one it fills it into the middle of the currently written query:
Nested Element Suggestions
Often while writing XPath queries it’s beneficial to go through a parent element before locating a child. For example, if there are 2 carousels of images, and I’m only interested in dealing with images in the 2nd carousel, I would first locate that specific carousel, and then images within it
//div[@id='carousel-1']//img[@class='main-image']There doesn’t seem to be a way to do this in SelectorsHub. It may be that it’s not a desired feature, but I think there’s potential for it to prove useful. I find this way of locating things to be quite beneficial. It may be impossible to implement, but a way to say “I’m interested in locating this child through this parent” and having the suggestions work would be great.
Thanks to Sanjay for making such a great tool and releasing it to the community for free. I hope to see SelectorsHub evolve over time into something even greater than it is today.
QA Goose 
Thank you so much Will for the insightful feedback.
First 2 points has been implemented in SelectorsHub version 1.0.1 and its live now.
Please update and check it out.
Suggestions Can Break the Query- Suggestions are mostly supposed to be added wherever they are being written. Like you can check in Sublime or any other editor. Now here in case of XPath, suppose you are writing AND OR condition then you might have to write attribute in between. So here we will have to adjust where we want to add suggestion in xpath.
Nested Element Suggestions- Yes it gives the parent, siblings etc. If you want to write an xpath with respect to parent then 1st write xpath for child then inspect that parent it will suggest the attribute for that parent.
I will create a separate video tutorial for these points to explain better because there might be a chance that in comment I won’t be that clear.
Really appreciate and thank you for support and feedback. Keep supporting and feel free to if there is any improvement and fix we can do in SelectorsHub.
LikeLike