如何用Python获取客户端JS渲染的目标网站完整HTML内容？

问题原因 #

你当前的代码仅获取到页面初始的静态HTML，因为JavaScript还未完成页面渲染就执行了获取操作，所以只能拿到空的#app容器。

改进方案 #

方案一：Selenium 改进版 #

添加等待逻辑，确保页面渲染完成后再获取内容：

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

driver = webdriver.Chrome()
driver.get('https://study.innspector.dbvis.de/')
# 等待#app容器内出现子元素，最长等待10秒
wait = WebDriverWait(driver, 10)
wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '#app > *')))

content = driver.page_source
soup = BeautifulSoup(content, "html5lib")
print(soup)
driver.quit()

方案二：Playwright 改进版 #

利用Playwright内置的等待机制，确保页面渲染完成：

from playwright.sync_api import sync_playwright

with sync_playwright() as playwright:
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()
    page.set_viewport_size({"width": 2220, "height": 1280})

    # 等待网络空闲（无网络请求持续500ms），确保JS加载并完成渲染
    page.goto("https://study.innspector.dbvis.de/", wait_until="networkidle")
    # 额外等待#app内的元素可见，确保渲染完成
    page.wait_for_selector('#app > *', state='visible')
    
    skeleton = page.evaluate('document.body.innerHTML')
    print(skeleton)
    browser.close()

关键说明 #

• 两种方案的核心都是等待页面渲染完成：可以通过等待特定元素出现、网络空闲状态或页面加载完成状态来实现。
• 如果目标页面有特定的渲染完成标志（比如某个唯一元素），可以将等待条件替换为该元素的选择器，能更精准地捕获渲染后的内容。

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