Do It Yourself – Website Tutorials



Agenda
What is SelectorsHub
How to install SelectorsHub extension
Where to find SelectorsHub tab
SelectorsHub features demo
Auto suggest
Invalid Xpath error message
Shadow DOM support
Iframe support
SVG element xpath support
#SelectorsHub #selenium #automation

Timeline:
0:18 Agenda
1:30 What is SelectorsHub
2:48 How to install SelectorsHub extension
3:37 Where to find SelectorsHub tab
4:48 SelectorsHub feature – Auto suggest demo
7:36 SelectorsHub feature – Invalid Xpath error message demo
8:30 SelectorsHub feature – Shadow DOM supportdemo
9:50 SelectorsHub feature – Iframe support demo
12:42 SelectorsHub feature – SVG element xpath support demo

What is SelectorsHub?
Xpath and CSSSelector building tool
Free Chrome extension
Created by Sanjay kumar
It helps you to learn Xpath syntax
Most secured

SelectorsHub is a time saver tool if you are trying to write your own xpath or css selector.
You don’t have to copy and paste the values from the DOM to build xpath. It gives you quick auto suggestions on text, attributes, siblings, parents, childNodes, ancestors and descendants. If you have written a wrong xpath, the tool will inform you about the errors and suggests you the way to correct.

SelectorsHub is a free tool no license in required. Right now it is available, very soon this extension will be available in firefox, edge, safari browsers also.

This tool is created by Sanjay kumar who has also created ChroPath which is a popular tool among automation engineers.

Chrome webstore link for selectorshub:
https://chrome.google.com/webstore/search/selectorshub

Where to find the selectorshub tool in the browser?

SelectorsHub features demo
Auto suggest
Invalid Xpath error message
Shadow DOM support
Iframe support
SVG element xpath support
Auto suggest and error message
Show for xpath and css selector(# . Tag name)

Best cssSelector editor

https://books-pwakit.appspot.com/
shadow root Open
Shadow root Close
Change in the color

Just inspect the element if it will be inside iframe, SelectorsHub will show “in iframe” in the SelectorsHub tab.
To write the xpath/cssSelector for any element which is inside an iframe, just inspect that element and start typing.
Context switching
http://uitestpractice.com/
Limitation of Iframe is, it will not support the iframe from different source. Iframe source must be of same origin

Contact

SVG elements doesn’t support the standard XPath pattern. So most of the times we struggle while writing the XPath for SVG elements. You just type // and it will suggest the correct syntax and you can build XPath without wasting anytime.
https://www.w3schools.com/html/html5_svg.asp

selectorshub does not stores any user data, The tool runs in local environment. Injection of script happens only when you open this tool in the elements tab sidebar.

source