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

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.

CodePudding user response：

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();

CodePudding user response：

I found a solution!

First of all, I found a documentation in git saying this is a current known issue/bug/white-spot in Selenium for C#. However, I tried to find the document again and link it here. I am not finding it anymore :-(

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();