如何使用Selenium定位Shadow Root中的MetaMask钱包连接按钮？

核心逻辑 #

Shadow DOM中的元素无法通过普通Selenium定位方法直接捕获，必须先获取Shadow Root对象，再在其内部定位目标元素。Lit框架生成的<!--?lit$xxxx$-->注释属于框架内部标记，不影响元素选择，无需额外处理。

具体步骤与代码示例 #

1. 定位Shadow Root的宿主元素
   先找到包含目标Shadow Root的外层宿主元素（比如带特定class/id的容器），确保元素已加载完成：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

# 替换成实际宿主元素的定位器（比如class、id、属性）
host_element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CSS_SELECTOR, "div.wallet-bridge-container"))
)

2. 获取Shadow Root并定位目标按钮
   通过execute_script获取Shadow Root，然后用按钮的稳定特征（比如aria-label、按钮文本、固定class）定位，别用右键复制的nth-child这类依赖DOM顺序的易变选择器：

# 获取Shadow Root并查找目标按钮（替换成按钮的实际特征）
target_button = driver.execute_script("""
    const shadowRoot = arguments[0].shadowRoot;
    // 示例：优先用语义化属性定位，比如aria-label或按钮文本
    return shadowRoot.querySelector('button[aria-label="连接MetaMask钱包"]') || 
           shadowRoot.querySelector('button:contains("连接Polygon桥")');
""", host_element)

# 确认按钮可点击后执行操作
if target_button:
    WebDriverWait(driver, 10).until(EC.element_to_be_clickable(target_button)).click()

额外注意事项 #

• 若页面存在多层嵌套Shadow DOM，需逐层获取Shadow Root（先找外层宿主→拿Shadow Root→找内层宿主→再拿内层Shadow Root）。
• 显式等待必须覆盖Shadow DOM的渲染周期，避免因元素未完全加载触发超时错误。
• 绝对避免依赖DOM结构顺序的选择器（比如button:nth-child(1)），这类选择器会随页面更新失效，优先用元素的语义化属性或固定标识。

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