Easy And Free xpath and css selectors in selenium Webdriver- SelectorsHub

We have used many different tools and methods to find XPath and CSS selectors for selenium webdriver. But SelectorsHub is Next generation XPath and CSS selectors which is invented and created by Sanjay Kumar. It is very smart and intelligent IDE using which you can build XPath and CSSSelectors within 5 seconds without loosing your XPath and CSS selector writing skill for selenium WebDriver. It is supported in almost all popular browsers like Chrome, Safari, Firefox, Edge and Opera. It has so many features which we haven't seen in any other XPath and CSS Selectors IDE. It is free tool and save lot of your time. Earlier we had learnt ChroPath to find XPath or CSS Selectors of element.

In this post, We will learn how to install SelectorsHub in different browsers and usage of it's different features.

How to Install SelectorsHub In Google Chrome for Selenium WebDriver

To install it in Google Chrome browser, 
  • Open Google Chrome browser
  • Open Chrome Webstore and search for SelectorsHub extension. 
  • You will get SelectorsHub extension in search result.
  • Open it and click on Add to Chrome button.
  • It will ask confirmation to add extension in browser. Click on Add Extension button.
  • It will install SelectorsHub extension in google chrome browser.
How to Install SelectorsHub In Google Chrome
Once it is installed, SelectorsHub icon will display on top-right corner of google chrome browser.

SelectorsHub iconin google chrome

How to check if SelectorsHub is installed or not in Google Chrome
  • Open https://www.google.com/ in new tab.
  • Right click on Google Search button.
  • You will find SelectorsHub in context menu.
How to check if SelectorsHub is installed or not in Google Chrome
Note : Refresh your tab or Restart your browser if you can not find SelectorsHub in context menu.

How to Install SelectorsHub In Firefox

To install SelectosHub in Firefox
  • Open Firefox browser.
  • Open Firefox Browser Add-Ons page and search for SelectorsHub add on. 
  • You will get SelectorsHub add-on in search result.
  • Open it and click on Add to Firefox button.
  • It will ask confirmation to add addon in firefox. Click on Add button.
  • It will install SelectorsHub add-on in google chrome browser.
How to Install SelectorsHub In Firefox

On successful installation, It will show SelectorsHub icon on top-right corner of Firefox browser.

Install SelectorsHub In Firefox

How to Install SelectorsHub In Edge Browser

  • Open Microsoft Edge browser.
  • Open Microsoft Edge Add-Ons and search for SelectorsHub Add-On. 
  • You will get SelectorsHub add-on in search result.
  • Open it and click on Get button.
  • It will ask confirmation to add extension in browser. Click on Add Extension button.
  • It will install SelectorsHub extension in Microsoft Edge browser.
SelectorsHub icon will display on top-right corner of Microsoft Edge browser on successful installation and you are ready to use it for selenium webdriver test scripts.


This way you can install it in Opera and Safari browsers as well.

Copy XPath or CSS Selector in just 2 clicks

Now, /you can copy XPath or CSS Selector only in 2 clicks using SelectorsHub extension. Simply Right Click on web element and mouse over on SelectorsHub option in context menu. It will show you options to Copy Relative XPath, Copy Rel cssSelector, Copy JS path and Copy abs XPath.

copy xpath and css selector in just 2 clicks


Using SelectorsHub From DevTools

To use advanced features of SelectorsHub, You have to use Developers tool in chrome browser. In Firefox you can use Firefox Developer tool and in Edge browser you can use Microsoft Edge Developer tool. All the browsers have built in developers tool and you can open it by pressing F12 key from your keyboard.

To access SelectorsHub in developers tool,
  • Press F12 key from your keyboard. It will open Developers tool.
  • Click on Elements tab inside developers tool.
  • On sidebar, You will see SelectorsHub menu as shown in below image.
Using Advanced Features of SelectorsHub

Here, You can access advanced features SelectorsHub.

Advanced Features of SelectorsHub

Using SelectorsHub in DevTools, You can get many different advanced features to get Relative and Absolute XPath and CSS Selectors

Get Relative and Absolute XPath and CSS Selector All Together

  • Open Google.com
  • Right click on Google Search button.
  • Select Inspect option from context menu. DevTools will open with Elements tab selected.
  • Go to SelectorsHub sub menu in side bar of DevTools.
  • Here you can see all possible selectors like Rel cssSelector, Rel XPath, Abs XPath, JS Path and different attributes of Google Search button. You can copy and use any of these as per our requirement.
Get Relative and Absolute XPath and CSS Selector All Together

Write and Verify Your Own XPath

Using SelectorsHub, You can write or verify your own XPath as well. It will help you to learn and improve your own XPath building skill. Let's see how we can do it.
Write your own XPath
  • Once you type // in textbox, It will show you //input node selection suggestion.
  • Select suggested node //input.
  • Now apply square bracket behind //input (i.e. //input[). It will show you all possible combinations of xpath using different parameters like id, title, etc. as shown in below given image.
Build your own XPath
  • You can select any of the suggested XPath.
This way you can learn how to build your own XPath using different parameters. It will improve your XPath building skill as well.

Also you can verify your XPath if it is right or wrong using SelectorsHub. To Verify XPath validity, Simply copy paste your XPath in selectors editor textbox. Let's see with example.
  • Open http://only-testing-blog.blogspot.com/2015/03/chart.html
  • Press F12 key and go to SelectorsHub text box.
  • Type XPath //input[@id='mytextbox-1'] in selectors editor textbox which is not exist on page and then press Enter button.
  • It will show you 0 element matching message. It means no matching element found on page for your xpath.
Verify your own XPath
  • Now type XPath in selectors editor textbox which is exist on page i.e. //input[@title='Enter You name'] and press Enter button.
  • It will show message 1 element matching message. It means matching element is found on page for your XPath.
Verify XPath validity

  • Also you can use selectors editor textbox to check if any compilation error and suggestion for that as well.
  • Type XPath with missing single quote i.e. //input[@title='Enter You name] and press enter button.
  • It will show you error Invalid xpath with suggestion message single quote 'missing.
Verify xpath error in selectorshub
It has very nice feature to provide or select your preferred attribute to build XPath using it.
  • If you want to build XPath using title attribute then type title in attribute preference textbox and press enter button. It will build XPath using title attribute if it is available in element.
Build XPath using preferred attribute

  • If you want to build XPath using id attribute then select only id in preferred attribute selection. It will always build XPath using id attribute.
Build XPath using id attribute

Set Selenium driver Command to append on selector

It has feature to append selenium webdriver command with selectors.
  • To use this feature, click on Set driver command to append on selectors. You will get textbox to set selenium webdriver command to append it with selectors.
  • Write selenium webdriver command statement driver.findElement(By.xpath("xpathvalue")) in textbox and press Enter button.
  • Your predefined statement will apply on selector. 
Set Selenium driver Command to append on selector

We will see few more advanced features of SelectorsHub in our Next Post.

1 comment:

  1. Thanks for this, Very useful blog! Its great to know about xpath and css selectors in Selenium webdriver. Each and every steps given in this article to install Selectorshub in different browsers is very understandable. I learned Selenium Testing course from Gayatri Mishra. She provides online courses on selenium and other programming fields. Her way of teaching
    is very good for beginners.

    ReplyDelete