SelectorsHub Expert Tutorial - Shadow DOM | iFrame | SVG XPath CSS - SelectorsHub

This is the fourth SelectorsHub tutorial in my SelectorsHub free full course. In this SelectorsHub training, I explain how you can save time by using the features of the SelectorsHub tool, find locators in Selenium etc. for web elements in shadow DOM or iFrame or both shadow DOM and iFrame etc. Learn how to use SelectorsHub to find the correct and unique locators for shadow DOM, iFrame, static SVG images and dynamic SVG images and SelectorsHub user interface customization by viewing SelectorsHub expert tutorial below or read on...

I show how to install SelectorsHub in my previous tutorial so you can install SelectorsHub software testing tool, if you have not already done that.

SelectorsHub Shadow DOM: As I mentioned in the second tutorial, a shadow DOM is outside the main DOM. Basically, a shadow DOM keeps some web elements inside it and the shadow DOM is attached to a web element in the DOM. Only CSS selectors work for shadow DOM and not XPath. You can try it on the SelectorsHub practice page. On it, if you scroll down a little, there is the UserName. Right click it and click on Inspect, which should open developer tools and SelectorsHub pane. In SelectorsHub, it should say that this is inside Shadow DOM, which can't be accessed through XPath so use CSS selector. You can copy the CSS selector to the SelectorsHub smart editor and press the Enter key to find the web element. SelectorsHub should say that one element is matching. SelectorsHub also shows some sample code, that you can copy and modify for use in your test automation script written using Selenium WebDriver etc. 

iFrames: As I mentioned in the second tutorial, iframes are used to make a web page layout. The iframe can be from the same domain or it can be a cross origin iframe. Cross origin iframe means that the iframe is from another domain. If the web element that you inspect is within an iframe, SelectorsHub should say that this web element is inside iframe and you should switch inside iframe to access it through automation. SelectorsHub should give the correct locator of both the web element and the iframe that it is located in.

You can try the cross-origin iframe on this blog, Software Testing Space's Followers widget in the right-side pane. Followers is basically a cross origin iframe. If you right click on one of the followers and click on Inspect, SelectorsHub should recognize that this web element is inside cross origin iframe. How to find XPath of such a web element? For a web element inside cross origin iframe, you can copy selectors by right click on the element, hover to SelectorsHub, copy the XPath and paste XPath in Selenium WebDriver script or your test automation tool. 

SelectorsHub SVG XPath: SVG stands for Scalable Vector Graphics. It is a format for two-dimensional images and it is commonly used in the web pages. Now, SVG elements have a special XPath syntax. SelectorsHub should support both static SVG as well as dynamic SVG. You can try it on the SelectorsHub practice page on the image below "Can you enter name here through automation". On inspecting an SVG, SelectorsHub should say that it's an SVG element and it doesn't support standard XPath format. So, you can copy the XPath generated in a special format by SelectorsHub and use that locator in your test automation script. SelectorsHub also supports dynamic SVG. I have shown dynamic SVG inspection by SelectorsHub tool in my SelectorsHub expert tutorial above. 

SelectorsHub SH selector: SelectorsHub can convert your XPath into CSS selector. SH selector means the SelectorsHub selector that is a CSS selector generated from your XPath by SelectorsHub.

Conclusion: SelectorsHub is a useful tool in web testing for automation testing engineers to enhance their productivity and efficiency, by finding the correct and unique locators for web elements in shadow DOM or iframes or both shadow DOM and iframes and SVG web elements too. Thank you 🙏

Labels: selectorshub, selectors, selenium, locators, tutorial, xpath, locators in selenium, css, selectorshub training, selectorshub tool, xpath selectorshub, xpath in selenium, xpath in selenium webdriver, how to find xpath,in selenium webdriver, how to, selectorshub free full course, tutorial selectorshub, selectorshub shadow dom, iframes, svg, expert