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