Advanced SelectorsHub For Chrome Tutorial For XPath and cssSelector

SelectorsHub for chrome extension is XPath, JSPath, cssSelector tool and it is very easy to understand and use. Earlier we learned how to install SelectorsHub for Chrome and in different browsers and basic features like how to get XPath or cssSelector of any web element to use it in selenium webdriver test script, using advanced featured from chrome devtool. I hope it has helped you lot to kick start learning selectorshub extension for chrome. Now we will look at few more features of SelectorsHub.

Get XPath of iFrame and iFrame element Together

Earlier it was time taking process to get XPath of iFrame and then element of iFrame. Also it was hard to find that element is inside iFrame or on page if iFrame is rendered inside page. Now you can get XPath of iFrame and XPath or cssSelector of iframe element at the same time using selectorshub chrome extension. Also it will be easy to identify if element is inside iFrame using selectorshub chrome. Lets see how we can do it.

• Open http://only-testing-blog.blogspot.com/2015/01/iframe1.html. There is iFrame present on page.
• Right click on checkbox inside iFrame and inspect it. It will open devtool.
• Go to SelectorsHub subtab in sidebar.

• Element identifier text says that element you are inspecting is inside iFrame.
• It will provide xPath of iFrame, XPath and cssSelector of web element at same time.

Also you can locate nested iFrame element and get xPath of both iframes using SelectorsHub. 

You can copy it and use in selenium webdriver automation test script.

Identify and Locate Shadow Dom Elements for Selenium Webdriver

XPath is not supported for Shadow Dom elements. It is very hard to locate such elements using other selectors as well. Also it is very hard to understand if it is normal web element or Shadow Dom web element and waste lots of time to locate it. selectorshub extension for chrome identifies and tell you if it is Shadow Dom element. Also it is providing ready to use script for such elements. Let's see how it works.

• Inspect Shadow Dom element using devtool and open SelectosHub sub tab from side bar.

• Here, Element identifier says it is Shadow Dom element.
• Also for xPath, It will show alert message that xPath is not supported for this element.
• It will provide you ready to use script for selenium webdriver. So you not need to find xPath of that element. You can copy and use it in your test script.

Also you can locate element which is located inside nested Shadow Dom using SelectorsHub.

Get JS Path of Element using selectorshub chrome extension

Also you can get JS Path of any web element.

Generate xPath or cssSelectors for SVG Element using selectorshub for chrome

Most of time you will struggle tp generate xPath or cssSelector of SVG elements on page. But SelectorsHub has made it easy to identify SVG element and generate it's xPath or cssSelectors. When you inspect such SVG elements, element identifier will tell you that it is SVG element.

Writing Case Insensitive xPath and cssSelector

You need to write case sensitive attributes in xPath and cssSelectors. If you write case insensitive attributes, It will fail to locate element on page. SelectorsHub chrome has facility to convert xPath and cssSelectors from case sensitive to case Insensitive.

To convert it

• Inspect element using SelectorsHub.
• Click to make selectors Case Insensitive icon.

• cssSelector is converted from input[title='Search'] to input[title='Search' i]. So now you can locate element by input[title='SEARCH' i], or input[title='SEArch' i] with cssSelector.
• xPath converted from //input[@title='Search'] to //input[translate(@title, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz')='search']. So now you not need to wrote attribute in capital letter. It will work with small letters.

Generate and Copy xPath and cssSelectors of all elements of page Together

It is very time taking process to inspect one element and copy it's xPath and then inspect second element and copy it's xPath and use it in your selenium webdriver test script. Using SelectorsHub chrome extension, You can inspect all elements of page one by one and then copy all xPath or cssSelectors at the same time. Let's see how to do it.

• Open your page.
• Press F12 button and go to SelectorsHub tab in side bar.
• Click on Click to generate automation code/multiple xpaths icon.

• Inspect all your page elements one by one.
• xPath and cssSelectors of all inspected elements will be recorded.

• Also you can append driver.FindElement or FindElement syntax on all xpath by clicking on Set Attribute icon.
• To set it, Click on Set Attribute icon and set syntax FindElement(By.xpath("xpathvalue")) in textbox.

• Also you can append selector name with xPath by writing attribute attribute text like selectorname.FindElement(By.xpath("xpathvalue")).

• You can copy all generated xPaths and cssSelectors by clicking on copy icon.
• Also you can export all xPaths in xls file.

So all these are very useful features of selectorshub extension for chrome which can help you to generate xPath and cssSelecotrs for you selenium webdriver test script.