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

We have used many different tools and methods to find XPath and CSS selectors for selenium webdriver. But SelectorsHub chrome extension is Next generation XPath and CSS selectors which is invented and created by Sanjay Kumar. selectorshub for chrome 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. selectorshub extension for chrome 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 chrome and different browsers and usage of it's different features.

How to Install SelectorsHub for Google Chrome for Selenium WebDriver

To download and install selectorshub for 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.

Once it is installed, SelectorsHub icon will display on top-right corner of google chrome browser. This way you can install selectorshub extension for 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.

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.

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

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

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.

Here, You can access advanced features SelectorsHub.

Advanced Features of SelectorsHub Chrome

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.

Write and Verify Your Own XPath using selectorshub chrome extension

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.

• Open http://only-testing-blog.blogspot.com/2015/03/chart.html
• Inspect Name textbox using mouse right click.
• Go to SelectorsHub tab in DevTools sidebar.
• Type // in Selectors editor textbox as shown in in below given image.

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

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

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

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

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.

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

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. 

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