Selenium: cannot use click() on shadow root WebElement

Question

driver.get("https://colp.maps.arcgis.com/apps/dashboards/0334150e430449cf8ac917e347897d46")
driver.implicitly_wait(15)

cyber_button_outer = driver.find_element(By.XPATH, "//span[@title='Fraud or Cyber Crimes']/ancestor::div[contains(@class, 'category-selector-widget h-full')]").find_elements(By.CLASS_NAME, "group-btn")     

for button in cyber_button_outer:
    shadow_root = driver.execute_script("return arguments[0].shadowRoot", button)
    try:
        check_button = shadow_root.find_element(By.CSS_SELECTOR, "button")
        print(check_button.text)
        if check_button.text == "Cyber Crime":
            print("1")
            check_button.click()
            
    except:
        print("false")

I would like to click on the button that was hidden inside the shadow root in this website (https://colp.maps.arcgis.com/apps/dashboards/0334150e430449cf8ac917e347897d46). I think I successfully called out the web element but I just wasn't able to click on it with click().

Thanks for any help in advance :)

screenshot for the button

Answer 1

To interact with Shadow DOM elements using Selenium in Python, you can use JavaScript to access the shadow root and perform the desired actions.

from selenium import webdriver
from selenium.webdriver.common.by import By

# Start a new browser session
driver = webdriver.Chrome()

# Navigate to the webpage
driver.get("https://colp.maps.arcgis.com/apps/dashboards/0334150e430449cf8ac917e347897d46")
driver.implicitly_wait(15)

# Find the outer element of the shadow root
cyber_button_outer = driver.find_element(By.XPATH, "//span[@title='Fraud or Cyber Crimes']/ancestor::div[contains(@class, 'category-selector-widget h-full')]").find_element(By.CLASS_NAME, "group-btn")

# Access the shadow root using JavaScript
shadow_root = driver.execute_script("return arguments[0].shadowRoot", cyber_button_outer)

try:
    # Find the desired button within the shadow root
    check_button = shadow_root.find_element(By.CSS_SELECTOR, "button")
    print(check_button.text)
    if check_button.text == "Cyber Crime":
        print("1")
        # Perform the click action using JavaScript
        driver.execute_script("arguments[0].click()", check_button)
except:
    print("false")

# Close the browser
driver.quit()

Interacting with Shadow DOM elements can be tricky, and it depends on the specific page structure. If possible, consider asking the developers to make elements accessible in the regular DOM to simplify automation.