It's chrome extension to find the web elements on the page

1. SELECTOR HUB
The Next Gen Xpath and Selectors IDE

2. AGENDA
• What is Selector Hub
• How To install Selector Hub
• Selector Hub UI
• Different Way of generating locators
• Dev tool vs Selector Hub
• Functionality of Selector Hub
• Different Tools of selector Hub

3. WHAT IS SELECTOR HUB
• Selector Hub is a Browser Extension tool, It has both paid and open source features.
• XPath and Selectors plugin. It can be used as smart editor to write and verify xpath,
css Selector, jQuery and JS Path. Selector Hub can also be used to auto generate the
unique Xpath and all possible locators.
• simplifies the process of identifying and selecting HTML elements on a webpage. It
provides a user-friendly interface where you can interactively click on the elements
you want to extract, and it generates CSS or XPath selectors that can be used to
target those elements.
• It is a Free productivity booster tools for testers to save their time and make their
life better.

4. INSTALLATION PROCESS
• Open your web browser and go to the Selector Hub website:
https://selectorshub.com/
• On the website, click on the "Download" button in the top navigation menu. This will
take you to the download page.
• On the download page, you will find options to install Selector Hub as a Chrome
extension or a Firefox add-on. Choose the appropriate option for your browser.
• Click on the "Add to Chrome" button if you are using Google Chrome, or the "Add to
Firefox" button if you are using Mozilla Firefox. This will initiate the installation
process.

5. • A pop-up window will appear asking for confirmation to add the extension or add-on. Click on the
"Add extension" or "Add" button to proceed.
• The installation process will start, and you will see a progress indicator. Once the installation is
complete, you will receive a notification or see a confirmation message.
• After the installation, you should see the Selector Hub icon added to your browser's toolbar.
• That's it! You have successfully installed Selector Hub in your browser. To start using it, navigate to
a web page you want to scrape or extract data from, and click on the Selector Hub icon in your
browser's toolbar. The tool's interface will appear, allowing you to interactively select elements and
generate selectors.

6. UI OF SELECTOR HUB

7. DIFFERENT WAY OF GENERATING LOCATORS
• Normally do right click on the element, open dev tool and there is option there
Selector Hub… We get so many options are there for locating the element with Xpth,
css selector, name Id …etc.
• Ref. Screenshot----

8. • From the dev tool, there is a option of Inspect ( Small arrow symbol) ,
• We can click on the arrow symbol and select the desired element
• It can generate automatic the locators like relative xpath, absolute xpath ,
cssselector
• If you click on that particular locator , it shows how many matches are there ,
• Another way if you right click on element , it show some options, in which you can
see selector hub options also
• If we want to write our own locator manually in selector hub, we have to turn off the
locators

9. • If we want to search nearby element by put the previous element locator ,
• By using following sibling or parent child method,,, we also can do that easily, it give the auto
suggestions for this
• It also auto suggesting all the locator you write manually
•

10. DEV TOOL VS SELECTOR HUB
• Dev tool basically searching for the text not exactly the tags ….
• We see it in practically…
• Searching of element is not always accurate while using dev tool, but selector hub
provide pre-suggestions
• If you do any mistake while write own locator it show error in red color instantly
and suggest what to do to wrote it Right…
• But in dev tool this feature is not there …
• When we try to find the locator of Shadow Dom element, dev tool can not locate ,
• But with the help of Selector Hub, we can easily locate the element by help of CSS
selector
• ( We see it by practically )

11. FUNCTIONALITY OF SELECTOR HUB
• ----We can set attribute by ourselves, by selecting or unselecting the options and use
different attributes
• Just type the attribute name on the search box and press enter it automatically
show the related locators
• ------Set driver command to append on selector
• If you click on that option it will show you driver command along with the locator
with various format like selenium with java, python, cypress,

12. • -----Click on generate locator page & multiple selector ..
• After clicking inspect one by one element and it capture all the related details
• You can also select the driver command for the locator
•
• It can also generate locator for page factory approach.
• This will reduce lots of time of test engineer while locating individual elements and
it also support like every format.
• -----Turn on debugger option…
• Some times the elements are dynamic and sometimes elements are not visible these
type of element we can easily identify.. ( options in dropdown)
• Click on debugger option and immediate click on the dropdown option and wait for
5 sec. .. After that you can easily inspect the elements

13. • -----Xpath healing
• If there is more no. of elements are there and latter if there is any changes made with the
element it is very difficult to identify to locate the changed element..
• In this case Selector Hub helps us a lot by this feature. We can validate which locator got
changed or something wrong with this
• Click on the Xpath healing option,,, click on the edit option
• Write the format in which your locators are written
• Copy all the locators in the box and click on submit…
• You can see whether the elements are matched with the locator or not

14. • We can handle SVG element and Iframe concept by the help of selector Hub.
• SVG element---Scalable vector graphics , some times in the project we found a 2d type of
graphics ….we can not directly locate the element by using the dev tool ..so selector hub help us
to find the element
• So let’s see by practically how it works ….
• Iframe---if you don’t know whether the element is a Iframe or not, you have to verify in the dev
tool,, You should navigate to little bit upper then see the Iframe tag, after that You know that
this is a iframe or not….so you first capture the iframe locator, then Switch to it then pass the
inner element locator….
• But by the help of selector hub , if you inspect the element it auto suggest that it is a iframe

15. • In the situation where there is iframe inside a iframe are there , we have to capture the locator
two times after that we find the web element, but in selector hub if we try to find the element by
inspecting, It will create a selenium code automatically. you can use it in your own script directly.
• Let’s see practically how all the things work…
• For shadow DOM elements , selector hub also generate automatic code …

16. PLUGINS OF SELECTOR HUB
• AUTO TEST DATA--- A single page web application to generate the Fake Test Data
just in 3 simple steps.
• TESTING DAILY--- The tester’s home page which list down all the latest testing
related blogs, tutorials, news and trends in the new tab.
• TEST CASE STUDIO --- The best recorder plugin to record the manual test cases
and screenshots automatically. It capture the steps exactly we have done in the
application in simple English language …

17. • For reference--- https://www.youtube.com/@SelectorsHub
•
https://www.youtube.com/playlist?list=PLUDwpEzHYYLv8wElK5Pmtuowv-
j4AKxQF