Question 174986 in Visual Studio Code Question posted in
View the official documentation.

Do you want to rewrite this? Do you want to rewrite this?

Hey so I am trying to click a Button which is located in a Shadow-Root, I am new to this topic and this is my first time working with Shadow Roots.

The Website:
https://www.all4golf.de/?gclid=CjwKCAjw67ajBhAVEiwA2g_jEP_x3w6PJibWICIaE61LtLDJO_EEy85mgKRseNvZIAJpsA4Qw1yQMBoCOpkQAvD_BwE

Some Information: I am working in Visual Studio Code on a Mac, C# using Selenium and the Chromedriver. Opening Chrome and clicking and filling Textbooks out of the Shadow-Root works.

Thanks in Advance for your Help!!

I also tried to use the driver.executescript but I can’t manage to get it working, it says that something with the executescript is missing (beginner problem I guess).

Result should be that the Accept (Akzeptieren) Button will be clicked.

Tags:

2

Answers


  1. 0

    try this, If you are using selenium version > 4 , it has native shadow dom support

        IWebDriver driver = new ChromeDriver();
    driver.Navigate().GoToUrl("https://www.all4golf.de/?gclid=CjwKCAjw67ajBhAVEiwA2g_jEP_x3w6PJibWICIaE61LtLDJO_EEy85mgKRseNvZIAJpsA4Qw1yQMBoCOpkQAvD_BwE");
    IWebElement root = driver.FindElement(By.Id("usercentrics-root"));
    ISearchContext shadow = root.GetShadowRoot();
    IWebElement accept = shadow.FindElement(By.CssSelector(".sc-eDvSVe.eDuWYU")); 
    accept.Click();
    // Quit the driver
    driver.Quit();
    Login or Signup to reply.
  2. 0

    To interact with elements inside a Shadow DOM (Shadow Root) using Selenium and C#, you need to execute JavaScript code in the browser’s context to access the desired element. Here’s an example of how you can click the "Accept" (Akzeptieren) button on the website you provided:

    using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

// Create a ChromeDriver instance
IWebDriver driver = new ChromeDriver();

// Navigate to the website
driver.Navigate().GoToUrl("https://www.all4golf.de/?gclid=CjwKCAjw67ajBhAVEiwA2g_jEP_x3w6PJibWICIaE61LtLDJO_EEy85mgKRseNvZIAJpsA4Qw1yQMBoCOpkQAvD_BwE");

// Find the shadow host element
IWebElement shadowHost = driver.FindElement(By.CssSelector("#CybotCookiebotDialog"));

// Execute JavaScript to access the Shadow Root
IWebElement shadowRoot = (IWebElement)((IJavaScriptExecutor)driver).ExecuteScript("return arguments[0].shadowRoot", shadowHost);

// Find the Accept button inside the Shadow Root
IWebElement acceptButton = shadowRoot.FindElement(By.Id("CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll"));

// Click the Accept button
acceptButton.Click();

// Close the browser
driver.Quit();

    In this code, we first locate the shadow host element using its CSS selector. Then, we use JavaScript execution to access the shadow root by retrieving the shadowRoot property of the shadow host element. Finally, we find the Accept button within the shadow root using its ID and click it.

    Make sure you have the Selenium WebDriver and ChromeDriver packages installed in your project. You can install them via NuGet Package Manager or by running the following command in the Package Manager Console:

    Install-Package Selenium.WebDriver
Install-Package Selenium.WebDriver.ChromeDriver

    Remember to adjust the path to the ChromeDriver executable if necessary.

    I hope this helps you interact with the Accept button inside the Shadow DOM. Let me know if you have any further questions!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search