如何用Selenium Python查找所有Shadow Root并获取完整页面HTML

核心思路 #

要拿到包含原始源码、动态生成内容、所有Shadow DOM和iframe的完整HTML，需要两步处理：

• 递归遍历页面所有元素，将带有Shadow Root的节点替换为其内部的HTML（包括嵌套的Shadow DOM）
• 遍历所有iframe，进入每个iframe内部重复上述Shadow DOM处理，再将iframe的内容替换回主文档的对应位置

实现代码 #

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

def process_shadow_dom(driver, element=None):
    """递归处理Shadow DOM，返回处理后的HTML字符串"""
    if element is None:
        # 默认处理整个文档的根节点
        element = driver.find_element(By.TAG_NAME, 'html')
    
    # 通过JS执行递归逻辑，捕获Shadow DOM内容
    html = driver.execute_script("""
        const el = arguments[0];
        let html = el.outerHTML;
        // 检查当前元素是否存在Shadow Root
        if (el.shadowRoot) {
            // 递归处理Shadow内部的元素
            const shadowHtml = arguments[1](el.shadowRoot);
            // 将Shadow内容插入到原元素闭合标签前
            const closeTagPos = html.lastIndexOf(`</${el.tagName.toLowerCase()}>`);
            html = html.slice(0, closeTagPos) + shadowHtml + html.slice(closeTagPos);
        }
        return html;
    """, element, process_shadow_dom)
    
    return html

def process_iframes(driver, main_html):
    """遍历所有iframe，替换主HTML中的iframe标签为内部处理后的完整内容"""
    iframes = driver.find_elements(By.TAG_NAME, 'iframe')
    
    for iframe in iframes:
        # 切换到iframe上下文
        driver.switch_to.frame(iframe)
        # 处理iframe内的Shadow DOM，获取完整HTML
        iframe_full_html = process_shadow_dom(driver)
        # 切回主文档
        driver.switch_to.default_content()
        
        # 生成iframe的占位标识，用于替换主HTML中的对应部分
        iframe_start_tag = iframe.get_attribute('outerHTML').split('>')[0] + '>'
        # 将iframe标签替换为"标签+内部完整HTML"的形式
        main_html = main_html.replace(iframe_start_tag, iframe_start_tag + iframe_full_html)
    
    return main_html

# 初始化浏览器实例
driver = webdriver.Chrome()
driver.get("https://your-target-page.com")  # 替换为目标页面URL

# 第一步：处理主文档的Shadow DOM
main_content = process_shadow_dom(driver)

# 第二步：处理所有iframe，整合完整HTML
full_page_html = process_iframes(driver, main_content)

# 导出到本地文件
with open('full_page.html', 'w', encoding='utf-8') as f:
    f.write(full_page_html)

driver.quit()

代码说明 #

• process_shadow_dom：通过JavaScript递归遍历元素，自动识别并嵌入所有层级的Shadow DOM内容，无需提前知道Shadow Root的位置。
• process_iframes：遍历页面所有iframe，切换上下文后处理内部的Shadow DOM，再将iframe的完整内容替换回主HTML，确保iframe内的动态内容和Shadow DOM也被捕获。
• 最终生成的HTML与Chrome DevTools导出的完整页面内容一致，包含了所有静态、动态生成的DOM结构。

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