Chrome 66更新后Selenium无法操作插件选项，疑涉Shadow元素问题

我之前也踩过Chrome这个版本的坑！更新到66.0.3359.117后，插件选项页改用Shadow DOM构建，这直接导致Selenium常规的元素查找和操作方法全部失效——因为Shadow DOM会把内部元素从常规DOM树里隔离开，Selenium默认的API根本碰不到这些元素，所以你调用click()或submit()自然没反应。

下面给你两个可行的解决方案，根据你的Selenium版本选就行：

方案一：用Selenium 4.0+原生支持的Shadow DOM API #

如果你的Selenium版本是4.0及以上，官方已经原生支持Shadow DOM操作了，步骤很简单：

1. 先定位到Shadow DOM的宿主元素（就是包含shadow-root的那个父节点，你可以通过Chrome DevTools的元素面板找到它）
2. 通过宿主元素的shadow_root属性进入Shadow DOM上下文，再正常查找元素操作

示例代码（Python）：

from selenium.webdriver.common.by import By

# 找到Shadow DOM的宿主元素（替换成你实际的选择器）
shadow_host = driver.find_element(By.CSS_SELECTOR, "div.plugin-options-container")

# 进入Shadow Root
shadow_root = shadow_host.shadow_root

# 现在就可以像操作常规元素一样找到按钮并点击了
target_button = shadow_root.find_element(By.ID, "your-button-id")
target_button.click()

如果是多层嵌套的Shadow DOM，就逐层进入就行：

# 第一层Shadow DOM
root1 = driver.find_element(By.ID, "host1").shadow_root
# 第二层Shadow DOM
root2 = root1.find_element(By.ID, "host2").shadow_root
# 操作目标元素
root2.find_element(By.CSS_SELECTOR, ".submit-btn").click()

方案二：通过执行原生JavaScript操作（兼容旧版Selenium） #

如果你还在使用Selenium 3.x及以下版本，那就得借助execute_script方法，直接在浏览器上下文里编写JS来穿透Shadow DOM：

示例代码（Python）：

# 执行JS获取Shadow Root内的元素并点击
driver.execute_script("""
    // 先找到Shadow DOM宿主，再获取它的shadowRoot
    const shadowHost = document.querySelector('div.plugin-options-container');
    const shadowRoot = shadowHost.shadowRoot;
    // 查找目标按钮并点击
    const targetBtn = shadowRoot.querySelector('#your-button-id');
    if (targetBtn) {
        targetBtn.click();
    } else {
        console.error('目标按钮未找到');
    }
""")

这个方法的核心是利用浏览器原生的DOM API直接访问Shadow Root，绕过Selenium常规API的限制，不管Selenium版本新旧都能用。

关键提示 #

• 你需要先通过Chrome DevTools确认插件选项页里Shadow DOM的结构，找到正确的宿主元素选择器和目标元素选择器
• 如果点击后还是没反应，可以试试模拟原生的鼠标事件，比如用JS触发dispatchEvent(new MouseEvent('click', { bubbles: true }))替代直接调用click()

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