Python获取含shadow-root节点的HTML页面内容求助

问题原因 #

urllib/requests + BeautifulSoup属于静态爬虫，只能获取服务器返回的初始HTML源码。而shadow-root内的内容是浏览器加载页面后，通过JavaScript动态渲染生成的，静态工具无法执行JS，自然拿不到这部分内容。

解决方案：使用浏览器自动化工具 #

要获取shadow-root内的DOM节点，必须用能模拟完整浏览器环境、执行JavaScript的工具，比如Playwright或Selenium。以下是具体实现：

方法1：使用Playwright #

Playwright是微软推出的自动化测试工具，API简洁，支持多浏览器。

1. 安装依赖：

pip install playwright
playwright install chromium

2. 示例代码：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动Chromium浏览器，headless=False可可视化运行，设为True则无头模式
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://developer.salesforce.com/docs/atlas.en-us.apexref.meta/apexref/apex_namespace_System.htm")
    
    # 等待目标元素所在的shadow-root父元素加载完成
    page.wait_for_selector("docs-app", state="visible")
    
    # 通过执行JS访问shadow-root并获取目标div
    see_also_content = page.evaluate('''() => {
        // 定位包含shadow-root的父元素（根据页面实际结构调整选择器）
        const parentElement = document.querySelector('docs-app');
        if (!parentElement) return null;
        
        // 获取shadow-root对象
        const shadowRoot = parentElement.shadowRoot;
        if (!shadowRoot) return null;
        
        // 在shadow-root内查找目标div
        const targetDiv = shadowRoot.querySelector('div#sfdc:seealso');
        return targetDiv ? targetDiv.innerHTML : null;
    }''')
    
    # 输出结果，或根据需求处理节点
    print(see_also_content)
    browser.close()

方法2：使用Selenium #

Selenium是老牌浏览器自动化工具，兼容性好。

1. 安装依赖：

pip install selenium

同时需要下载对应浏览器的驱动（比如ChromeDriver），确保驱动版本与浏览器匹配。

2. 示例代码：

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

# 初始化Chrome浏览器
driver = webdriver.Chrome()
driver.get("https://developer.salesforce.com/docs/atlas.en-us.apexref.meta/apexref/apex_namespace_System.htm")

# 等待shadow-root的父元素加载
wait = WebDriverWait(driver, 15)
wait.until(EC.presence_of_element_located((By.TAG_NAME, "docs-app")))

# 执行JS获取shadow-root内的目标div
see_also_content = driver.execute_script('''
    const parentElement = document.querySelector('docs-app');
    const shadowRoot = parentElement.shadowRoot;
    return shadowRoot.querySelector('div#sfdc:seealso').innerHTML;
''')

print(see_also_content)
driver.quit()

注意事项 #

• 页面结构可能变动：如果docs-app不是包含shadow-root的父元素，需要打开浏览器开发者工具（F12），定位到shadow-root的直接父元素，替换代码中的选择器。
• 加载等待：必须等待页面或目标元素加载完成，避免因元素未渲染导致的报错。
• 反爬机制：Salesforce可能有反爬措施，若遇到访问限制，可尝试添加请求头、设置等待时间或使用代理。

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