How can I access and manipulate an element from shadow DOM by using Selenium WebDriver?

 In the context of selenium, you can access and even manipulate elements within a shadow DOM by using the WebDriver of selenium by using these instructions:-

Locate the shadow host element

Firstly, you would need to find the element that can host the shadow DOM. You can use the command “findElement” for this objective.

Implementation of JavaScript to access shadow root

You can implement JavaScript coding for Accessing the shadow root from the shadow host element. This would involve using the “executeScript” method of WebDriver.

Finding elements within the shadow root

Once you have access to the shadow root, you can find the element inside it by using the standard WebDriver methods.

Interact with the elements

Now you can interact with the elements as you need such as clicking, typing text, or extracting information.

Here is the coding structure given in Java programming language for the above steps:-

Import org.openqa.selenium.By;

Import org.openqa.selenium.JavascriptExecutor;

Import org.openqa.selenium.WebDriver;

Import org.openqa.selenium.WebElement;

Import org.openqa.selenium.chrome.ChromeDriver;

Public class ShadowDOMExample {

    Public static void main(String[] args) {

        // Set the path to the ChromeDriver executable

        System.setProperty(“webdriver.chrome.driver”, “path/to/chromedriver”);

        // Initialize WebDriver

        WebDriver driver = new ChromeDriver();

        // Navigate to the webpage containing the shadow DOM

        Driver.get(https://example.com);

        // Find the shadow host element

        WebElement shadowHost = driver.findElement(By.cssSelector(“your-shadow-host-selector”));

        // Execute JavaScript to access the shadow root

        WebElement shadowRoot = (WebElement) ((JavascriptExecutor) driver)

                .executeScript(“return arguments[0].shadowRoot”, shadowHost);

        // Find elements within the shadow root

        WebElement elementInShadowRoot = shadowRoot.findElement(By.cssSelector(“your-element-selector”));

        // Interact with the element within the shadow DOM

        elementInShadowRoot.click();

        elementInShadowRoot.sendKeys(“Text to input”);

        String textFromElement = elementInShadowRoot.getText();

        // Print the text obtained from the element within the shadow DOM

        System.out.println(“Text from an element within shadow DOM: “ + textFromElement);

        // Close the WebDriver

        Driver.quit();

    }

}

Here is the coding given in Python programming language:-

From selenium import webdriver

From selenium.webdriver.common.by import By

From selenium.webdriver.chrome.service import Service

# Set the path to the ChromeDriver executable

Chrome_driver_path = “/path/to/chromedriver”

# Initialize ChromeDriver with the specified path

Service = Service(chrome_driver_path)

Driver = webdriver.Chrome(service=service)

# Navigate to the webpage containing the shadow DOM

Driver.get(https://example.com)

# Find the shadow host element

Shadow_host = driver.find_element(By.CSS_SELECTOR, “your-shadow-host-selector”)

# Execute JavaScript to access the shadow root

Shadow_root = driver.execute_script(“return arguments[0].shadowRoot”, shadow_host)

# Find elements within the shadow root

Element_in_shadow_root = shadow_root.find_element(By.CSS_SELECTOR, “your-element-selector”)

# Interact with the element within the shadow DOM

Element_in_shadow_root.click()

Element_in_shadow_root.send_keys(“Text to input”)

Text_from_element = element_in_shadow_root.text

# Print the text obtained from the element within the shadow DOM

Print(“Text from element within shadow DOM:”, text_from_element)

# Close the WebDriver

Driver.quit()

Here is the example given in HTML:-







    

    

    Shadow DOM Example





    

        

            

                .shadow-element {

                    Background-color: lightblue;

                    Padding: 10px;

                }

This is an element inside the shadow DOM.

                Click Me