SelectorsHub Intermediate Tutorial - Selectorshub XPath | How to use SelectorsHub | CSS SelectorsHub

This is the second SelectorsHub tutorial in my SelectorsHub free full course. SelectorsHub is a powerful tool that allows automation testing engineers and web developers to find the correct and unique locators for web elements in iframes, shadow DOM, XPath for SVG and XPath Axes. Learn how to use SelectorsHub to find such typical locators by viewing my SelectorsHub intermediate tutorial below or read on...

Firstly, to install SelectorsHub extension, users can go to the Chrome web store or the SelectorsHub website, where it provides SelectorsHub links for different browsers. SelectorsHub practice page is a helpful resource that allows test automation engineers to practice finding the locators for web elements in iframes or shadow DOM, SVG and other types of web elements.

Iframes are used to make a website layout, and content can be from the same domain or from another domain, which is called a cross-origin iframe. SelectorsHub can help us find locators for web elements inside iframes. If we inspect a web element using SelectorsHub, it identifies if that web element is inside an iframe. Then, SelectorsHub gives the iframe locator as well as the web element locator. Please view the above SelectorsHub tutorial to see examples of SelectorsHub finding the locators for web element in iframe from the same domain and web element in a cross-origin iframe.

Shadow DOM is a structure that hides or encapsulates web elements. SelectorsHub can find locators for elements in shadow DOM also. Web elements in shadow DOM cannot be accessed using XPath. SelectorsHub identifies if the inspected web element is inside shadow DOM. SelectorsHub gives the CSS selector of such a web element. We can then use CSS selector in Selenium WebDriver or other tools.

SVG stands for Scalable Vector Graphics. SVG is a format for two-dimensional images. SVG stores the image in XML format internally. The benefit of using SVG element in web pages is that it can be scaled to become bigger or smaller with the same quality. SelectorsHub can find the locators for SVG elements. But, SVG doesn't support standard XPath format so, SelectorsHub gives the XPath in a special format for the inspected SVG element.

XPath Axes are useful when we are unable to find a suitable XPath for a web element. XPath Axis is XPath with respect to another web element (with an easier XPath). SelectorsHub supports XPath Axes. On using the Axes button in SelectorsHub, we can inspect the other web element (called Parent in SelectorsHub) and then the difficult web element (called Child in SelectorsHub). SelectorsHub gives the XPath axis for the child element.

In conclusion, SelectorsHub is a useful tool for automation testing engineers and web developers to enhance their productivity and efficiency in finding the correct and unique locators for web elements, especially when working with complicated web pages. Thank you 🙏