如何使用Selenium编写多层嵌套Shadow Dom元素定位路径？

针对8层以上的嵌套Shadow DOM，手动逐层编写定位逻辑会非常繁琐，推荐用封装通用函数或一次性执行JavaScript脚本的方式简化操作，以下是具体实现：

方法1：基于Selenium 4+的封装函数（推荐） #

Selenium 4及以上版本原生支持shadow_root属性，无需编写复杂JS，直接封装迭代函数处理多层嵌套：

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

def locate_shadow_element(driver, selector_sequence):
    """
    :param driver: Selenium WebDriver实例
    :param selector_sequence: 选择器数组，顺序为：每层Shadow宿主元素的选择器 + 目标元素选择器
    :return: 目标元素对象
    """
    current_context = driver
    for idx, selector in enumerate(selector_sequence[:-1]):
        try:
            if isinstance(current_context, webdriver.WebDriver):
                host_element = current_context.find_element(By.CSS_SELECTOR, selector)
            else:
                host_element = current_context.find_element(By.CSS_SELECTOR, selector)
            current_context = host_element.shadow_root
            if not current_context:
                raise Exception(f"第{idx+1}层选择器 {selector} 对应的元素无ShadowRoot")
        except NoSuchElementException:
            raise Exception(f"第{idx+1}层未找到匹配选择器 {selector} 的元素")
    # 定位最终目标元素
    try:
        return current_context.find_element(By.CSS_SELECTOR, selector_sequence[-1])
    except NoSuchElementException:
        raise Exception(f"目标层未找到匹配选择器 {selector_sequence[-1]} 的元素")

调用示例 #

假设8层Shadow嵌套，每层宿主元素选择器依次为layer-1到layer-8，目标元素选择器为submit-btn：

driver = webdriver.Chrome()
driver.get("你的目标页面URL")

selector_list = [
    "layer-1", "layer-2", "layer-3", "layer-4",
    "layer-5", "layer-6", "layer-7", "layer-8",
    "submit-btn"
]

target_element = locate_shadow_element(driver, selector_list)
target_element.click()

方法2：一次性执行JavaScript脚本 #

如果使用低版本Selenium，或需要更灵活的逻辑，可通过执行JS脚本直接穿透多层Shadow DOM：

def locate_shadow_element_via_js(driver, selector_sequence):
    return driver.execute_script("""
        function traverseShadowDom(selectors) {
            let current = document;
            for (let i = 0; i < selectors.length; i++) {
                if (i === selectors.length - 1) {
                    current = current.querySelector(selectors[i]);
                } else {
                    const host = current.querySelector(selectors[i]);
                    current = host ? host.shadowRoot : null;
                }
                if (!current) break;
            }
            return current;
        }
        return traverseShadowDom(arguments[0]);
    """, selector_sequence)

调用示例 #

和方法1一致，传入选择器数组即可：

target_element = locate_shadow_element_via_js(driver, selector_list)
if target_element:
    driver.execute_script("arguments[0].click();", target_element)

关键注意点 #

• 确保每层选择器能唯一匹配宿主元素，避免定位偏差
• 若Shadow DOM为closed类型（无法通过shadowRoot访问），需依赖页面提供的全局API或其他方式定位
• 函数中加入异常捕获，方便快速定位哪一层嵌套出现问题

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