C# Selenium: How to click on the button which is inside a shadow-root (open) and has a data-testid attribute

Question

I am working with C# and Selenium and am trying to press this button.

I tried a lot of ways to click on this butten. But Selenium seem not able to find the element. My latest try is

IWebElement clickableButton = webDriver.FindElement(By.XPath("//*[@id='uc - center - container']/div[2]/div/div/div/div/button[1]"));
clickableButton.Click();

However, all tries lead to the fault:

OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id='uc - center - container']/div[2]/div/div/div/div/button[1]"}

How can I press this button?

Let me know if more/further information is helpful to answer this question.

undetected Selenium · Accepted Answer · 2022-08-04 20:43:27Z

1

The <button> element is within a #shadow-root (open)

shadow-root

Solution

To click on the <button> element you have to use shadowRoot.querySelector() and you can use the following Locator Strategy:

new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable((IWebElement)((IJavaScriptExecutor)driver).ExecuteScript("return document.querySelector('div#usercentrics-root').shadowRoot.querySelector('button[data-testid=\"uc-customize-button\"]')"))).Click();

answered Aug 4, 2022 at 20:43

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Phill Over a year ago

It brought me one step further. But still it looks like the element does not get located. However I am still glad, that I now understand, that Selenium seems to have some issues to locate a shadow-root element. I get the error: Test method WithDotNet.UnitTest1.TestMethod1 threw exception: OpenQA.Selenium.WebDriverTimeoutException: Timed out after 20 seconds --> I think it is still not finding the element

undetected Selenium Over a year ago

Check in the Development Tools -> Console if executing the command

return document.querySelector('div#usercentrics-root').shadowRoot.querySelector('button[data-testid=\"uc-customize-button\"]')

identifies the element uniquely.

Phill Over a year ago

I get the message "Failed to load resource: the server responded with a status of 401 ()" However the website does load, I can see the butten, and I can also press is manually.

undetected Selenium Over a year ago

I can see the butten, and I can also press is manually: That wasn't my question either. Please reread my question again.

Phill Over a year ago

an update: the following works in the developer tools console: document.querySelector("#usercentrics-root").shadowRoot.querySelector("#uc-center-container > div.sc-bYoBSM.jvautU > div > div > div > div > button.sc-gsDKAQ.iVBeYE").click()

|

Twenty · Accepted Answer · 2023-04-01 17:14:57Z

1

First of all, I found a documentation in git saying this is a current known issue/bug/white-spot in Selenium for C# (Can't find the link anymore).

Anyhow, I was able to click the button with Java.

JavascriptExecutor jse =(JavascriptExecutor)driver;
WebElement element = (WebElement)jse.executeScript("return document.querySelector(\"#usercentrics-root\").shadowRoot.querySelector(\"#uc-center-container > div.sc-bYoBSM.jvautU > div > div > div > button.sc-gsDKAQ.iVBeYE\")");
element.click();

edited Apr 1, 2023 at 17:14

Twenty

6,2217 gold badges41 silver badges78 bronze badges

answered Aug 6, 2022 at 18:09

Phill

356 bronze badges

Comments

Twenty · Accepted Answer · 2023-04-01 17:15:51Z

0

This is code without JavaScript

IWebElement shadowHost = Driver.FindElement(By.Id("usercentrics-root"));
ISearchContext shadowRoot = shadowHost.GetShadowRoot();
IWebElement clickableButton = shadowRoot.FindElement(By.CssSelector("button[data-testid='uc-customize-button']"));
clickableButton.Click();

In shadow root you can find any element with CssSelector only.

edited Apr 1, 2023 at 17:15

Twenty

6,2217 gold badges41 silver badges78 bronze badges

answered Mar 28, 2023 at 7:11

Edgar Grigoryan

1

Collectives™ on Stack Overflow

C# Selenium: How to click on the button which is inside a shadow-root (open) and has a data-testid attribute

3 Answers 3

Solution

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related