如何获取Polymer页面加载JS完成后的HTML内容？

嘿，我之前也踩过Polymer + Selenium的类似坑，毕竟Polymer基于Web Components，异步渲染和Shadow DOM的特性确实会让普通的page_source拿不到最终的页面内容。给你几个靠谱的思路：

1. 等待Polymer完全初始化完成 #

Polymer依赖WebComponentsReady事件来完成组件的初始化和渲染，光等document.readyState是不够的。你需要显式等待这个事件触发，再去获取HTML：

比如用Python的Selenium示例：

from selenium.webdriver.support.ui import WebDriverWait

# 先等页面基本加载完成
WebDriverWait(driver, 10).until(
    lambda d: d.execute_script('return document.readyState') == 'complete'
)

# 再等Polymer的WebComponentsReady事件
WebDriverWait(driver, 15).until(
    lambda d: d.execute_script('return typeof window.WebComponentsReady !== "undefined" && window.WebComponentsReady')
)

2. 处理Shadow DOM的内容 #

Polymer的很多组件内容是放在Shadow DOM里的，默认的page_source不会包含这部分内容。你需要通过JavaScript来遍历并提取Shadow DOM的HTML：

# 执行JS脚本获取包含所有Shadow DOM的完整HTML
full_rendered_html = driver.execute_script("""
    function extractFullHTML(node) {
        let html = node.outerHTML;
        // 遍历所有带Shadow Root的元素
        const elementsWithShadow = node.querySelectorAll('*');
        elementsWithShadow.forEach(el => {
            if (el.shadowRoot) {
                // 递归提取Shadow DOM的内容并替换原元素
                const shadowHtml = extractFullHTML(el.shadowRoot);
                html = html.replace(el.outerHTML, `<${el.tagName.toLowerCase()} shadow-content="${shadowHtml}"></${el.tagName.toLowerCase()}>`);
            }
        });
        return html;
    }
    return extractFullHTML(document.documentElement);
""")

这段脚本会递归遍历所有元素的Shadow Root，把Shadow DOM的内容整合到最终的HTML里。

3. 等待异步数据加载完成 #

如果你的Polymer页面还会异步加载数据（比如从API拉取内容再渲染），那还要额外等待数据绑定的元素出现。比如你可以等某个只有数据加载完成后才会显示的元素：

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

# 等待数据加载后的目标元素出现
WebDriverWait(driver, 20).until(
    EC.presence_of_element_located((By.CSS_SELECTOR, 'my-custom-element .loaded-content'))
)

把这几步结合起来，你应该就能拿到浏览器里看到的完整渲染后的HTML了。

内容的提问来源于stack exchange，提问作者Валера Стригун