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.

copy XPath of iframe and element at the same time
  • 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. 

locate nested iframe element

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.
Get JS Path of Element using SelectorsHub

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.

Generate xPath or cssSelectors for 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.
convert xPath and cssSelectors case insensitive.
  • 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.
Click to generate automation code/multiple xpaths
  • Inspect all your page elements one by one.
  • xPath and cssSelectors of all inspected elements will be recorded.
Generate and Copy xPath and cssSelectors of all elements of page Together
  • 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.
append FindElement syntax on all xpath
  • Also you can append selector name with xPath by writing attribute attribute text like selectorname.FindElement(By.xpath("xpathvalue")).
append selector name with xpath
  • 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.

No comments:

Post a Comment