Selenium中访问Shadow Root元素的问题求助

问题原因 #

1. 用innerHTML拿不到内容是因为Web Component的结构在Shadow DOM里，innerHTML只能获取元素的Light DOM内容，Shadow DOM里的内容不会被返回。
2. 之前代码报错是因为通过execute_script返回的shadow_root不是Selenium原生的WebElement对象，无法直接调用find_element方法。

两种可行解决方案 #

方案一：直接通过JavaScript完成查找与点击（兼容所有Selenium版本）

from selenium.webdriver.common.by import By

# 定位host元素<klyme-widget>
host_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/klyme-widget')

# 执行JS脚本，在Shadow DOM内找到按钮并点击
driver.execute_script("""
    const shadowRoot = arguments[0].shadowRoot;
    // 用XPath定位按钮
    const button = shadowRoot.evaluate(
        '//button[normalize-space(text())="Select Your Bank"]',
        shadowRoot,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
    if (button) button.click();
""", host_element)

方案二：使用Selenium 4.5+原生支持的Shadow Root属性

如果你的Selenium版本在4.5及以上，可以直接通过WebElement的shadow_root属性访问，然后正常查找元素：

from selenium.webdriver.common.by import By

# 定位host元素
host_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/klyme-widget')
# 获取Shadow Root
shadow_root = host_element.shadow_root
# 在Shadow Root内查找按钮并点击
button = shadow_root.find_element(By.XPATH, '//button[normalize-space(text())="Select Your Bank"]')
button.click()

内容的提问来源于stack exchange，提问作者EsPats