Can't interact with elements inside an iframe which itself is part of shadow DOM

[Орест Кавний]

Hi,

I am stuck on why I cannot click any element that is located inside the iframe element which lies inside the shadow root (open). Selenium throws WebDriverException saying "unknown error: no element reference returned by script". The whole page has several shadow root elements. And I am able to interact with any element inside them (like Click, SendKeys) using Selenium. But there is this one shadow root that contains the iframe and it drives me crazy why I cannot click anything anymore.

Switching to iframe is correct. First I read the shadowRoot property of the host element(using js). After that, I locate the iframe and switch to it. Then I can locate any element inside that iframe and after all, I have a valid reference to an element I am targeting. Moreover, I can simulate a click with SendKeys(Keys.Enter) invoked on an element, it really works. JS click with ExecuteScript() also works. That is how I am dealing with this situation right now. But I start facing this issue where I do need a real-user click, not js.

If you have any thoughts about what I might be doing wrong, please share them with me. Below is a piece of code I am using to access that iframe and then locate other web elements within it and perform some actions on them. Nothing special, trivial operations.

var shadowHost = driver.FindElement(By.XPath("//some xpath")); // element containing shadowRoot;

var iframe = GetShadowRoot(shadowHost).FindElement(By.CssSelector("iframe"));

var drv = driver.SwitchTo().Frame(iframe);

var buttonElement = drv.FindElement(By.CssSelector("button")); // has a valid reference to an element

buttonElement.Click(); // throws exception, see above in the description public 

public IWebElement GetShadowRoot(IWebElement element)
{
var js = driver as IJavaScriptExecutor;
var shadowRoot = (IWebElement)js.ExecuteScript("return arguments[0].shadowRoot", element);
return shadowRoot;
}

[thalesh bhardwaz]

try using below -

var shadowHost = driver.FindElement(By.XPath("//some xpath")); // element containing shadowRoot;

var iframe = GetShadowRoot(shadowHost).FindElement(By.CssSelector("iframe"));

var drv = driver.SwitchTo().Frame(iframe);

var buttonElement = drv.FindElement(By.CssSelector("button")); // has a valid reference to an element

var buttonElement = driver.FindElement(By.CssSelector("button")); 

buttonElement.Click(); 

Cheers,

Thalesh

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/669a13c3-3956-4693-9b04-86d8579eb98cn%40googlegroups.com.

[Орест Кавний]

In this case drv and driver are referencing to the same object.

Anyway, I did try it that way as well, - same thing(

Нд, 20 черв. 2021, 17:13 користувач thalesh bhardwaz <thales...@gmail.com> пише:

You received this message because you are subscribed to a topic in the Google Groups "Selenium Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/selenium-users/V3Su39OVrEI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAFPrHOCpDo2VsE%2Bqcw71yZWW9%2BJBkFtianOxLeE_4xo5rP_TLg%40mail.gmail.com.

[Орест Кавний]

I also created a ticket here where I was told that this was because Selenium had no support for ShadowRoot so far and was provided with a link where this whole ShadowRoot-support-issue is being discussed (still nothing achieved). Do you think that is directly related to what I am dealing with here? Because I still can locate elements within the iframe within shadow DOM. So, I assume some support exists, though.

неділя, 20 червня 2021 р. о 19:31:00 UTC+3 Орест Кавний пише:

[Serguei Kouzmine]

Can you kindly share the subject URL where you experiencing the issue interacting with elements inside iframe inside shadow dom ?

Thanks

[prave...@gmail.com]

Hey,

I can help you here but we need to work together to get it fixed. I'd require you to make some changes and retry.

We'll make sure elements we're switching to are actually being switched by the webdriver and whatever you claim actually happening. See below:

1. 'var iframe = GetShadowRoot(shadowHost).FindElement(By.CssSelector("iframe"));' Can you try locating the iframe with some specific locator, for example 'data-testid', src, name etc. This will make sure we're finding the intended iframe.

2. Once you've switched to the iframe ('var drv = driver.SwitchTo().Frame(iframe);'), can you try locating any other element in the iframe. For example, try getting text of an element and match that it is the correct element. This will make sure we're switched to the intended browsing context and not to some other embedded frame.

3. I don't like the way you're finding elements. This is sure to create confusions and flaky tests if you make frequent page changes (unless you've mentioned them that way for brevity). Well, in 'var buttonElement = drv.FindElement(By.CssSelector("button"));' you said this has valid element reference (it must have else how would you move to the next line). Can you try getting the value/text of the button to see you've found the desired button.

4. You said you can sendKeys to this button. Are you sure because sendKeys and click both use the same action api in webdriver (https://w3c.github.io/webdriver/#actions)? For the same element, if one throws the error you mentioned, other would throw that too. I am very much certain about it. I think if the intended button is found, it has > 0 height/width, there shouldn't be a cause of error.

Can you check these things first before we find our next course of actions to get it fixed for you?

PS: I am the founder of Zylitics, an end to end testing platform for web apps that makes it extremely easy to write, run and debug tests right from a web browser. It needs no configuration and installations. Everything you need is available out of the box, be it different OS`s, browsers, live preview, code management, test assets management and everything in between. It is based on selenium/webdriver but uses a new and extremely easy to use and learn language. https://zylitics.io

[Suriya Elamparithy]

Try this - https://suriyaparithy.blogspot.com/search/label/Shadow%20DOM

My QA Blog - https://suriyaparithy.blogspot.com/
Linkedin - https://www.linkedin.com/in/suriya-e-211681148/

Thanks,

Suriya E