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:
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
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.