本文系统讲解如何使用显式等待（Explicit Wait）可靠定位由 JavaScript 动态渲染的元素（如 SPA 中的 #root 内容），避免因过早读取 page_source 或 innerHTML 导致内容为空的问题。核心在于结合预期条件（EC）与合理超时机制，而非依赖页面加载完成信号。
本文系统讲解如何使用显式等待（explicit wait）可靠定位由 javascript 动态渲染的元素（如 spa 中的 `#root` 内容），避免因过早读取 `page_source` 或 `innerhtml` 导致内容为空的问题。核心在于结合预期条件（ec）与合理超时机制，而非依赖页面加载完成信号。
现代单页应用（SPA）如 https://www.boplatssyd.se/mypages/app 通常采用 React、Vue 等框架构建，其 HTML 骨架极简（仅含 <div id="root"></div>），全部 UI 内容均由 JavaScript 在运行时动态注入 DOM。此时，driver.get(url) 仅触发初始 HTML 加载并返回控制权，而实际业务元素尚未渲染——直接调用 driver.page_source 或 element.get_attribute('innerHTML') 将只能获取空容器，导致定位失败。
根本解法：显式等待（Explicit Wait）
显式等待不是“等时间”，而是“等状态”。它通过 WebDriverWait 监控 DOM 变化，直到目标元素满足指定预期条件（Expected Condition），才继续执行后续操作。相比强制等待（time.sleep()）和隐式等待（全局生效但无法响应可见性/可点击性等语义），显式等待具备高精度、高可靠性与强可读性。
✅ 推荐等待策略（按优先级排序）
| 预期条件 | 适用场景 | 示例代码 |
|---|---|---|
| EC.presence_of_element_located(locator) | 元素已插入 DOM（存在但可能隐藏/未渲染完成） | WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "root"))) |
| EC.visibility_of_element_located(locator) | 元素存在且可见（宽高 > 0，display != 'none', visibility != 'hidden'）✅ 最常用 | WebDriverWait(driver, 15).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#root > div"))) |
| EC.element_to_be_clickable(locator) | 元素可见且未被禁用（适合按钮、链接等交互元素） | WebDriverWait(driver, 12).until(EC.element_to_be_clickable((By.XPATH, "//button[contains(text(),'Sök')]"))) |
| EC.text_to_be_present_in_element(locator, text) | 某元素内文本出现（如加载提示变为“加载完成”） | WebDriverWait(driver, 8).until(EC.text_to_be_present_in_element((By.CLASS_NAME, "status"), "Hittade 42 bostäder")) |
⚠️ 注意：presence_of_element_located 仅确保元素存在于 DOM，不保证其已渲染可见；若需提取可见内容（如商品列表、搜索结果），务必选用 visibility_of_element_located 或更严格的 element_to_be_clickable。
? 实战示例：正确提取动态内容
以下代码针对 boplatssyd.se 页面，安全获取 #root 下已渲染的完整 HTML 结构：
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()
try:
driver.get("https://www.boplatssyd.se/mypages/app/")
# ✅ 等待 #root 内首个子元素可见（表明 React 应用已挂载并渲染）
WebDriverWait(driver, 20).until(
EC.visibility_of_element_located((By.CSS_SELECTOR, "#root > *"))
)
# 此时 page_source 包含动态生成的完整 DOM
html_content = driver.page_source
print("✅ 动态内容已成功加载，HTML 长度：", len(html_content))
# 若需进一步定位具体元素（如搜索结果列表）
# results = driver.find_elements(By.CSS_SELECTOR, ".property-card")
# for card in results:
# print(card.find_element(By.TAG_NAME, "h3").text)
finally:
driver.quit()? 关键注意事项
- 勿混用隐式等待：若同时设置了 driver.implicitly_wait(10)，显式等待的超时逻辑将受干扰，建议禁用隐式等待，统一使用显式等待；
- 避免 innerHTML 陷阱：element.get_attribute('innerHTML') 仅返回该元素当前时刻的子节点快照，而 driver.page_source 返回整个已渲染 DOM 的快照，后者更稳定；
- 超时值需合理：设为 10–20秒 较稳妥（覆盖网络+JS执行+渲染延迟），过短易失败，过长拖慢执行；
- 定位器要稳健：优先使用 ID、data-testid 等开发者预留属性；次选语义化 CSS 类（避免 .col-6 等易变布局类）；慎用复杂 XPath；
- 滚动触发动态加载？ 若内容需滚动才加载（如无限滚动），需先执行 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")，再等待新元素出现。
掌握显式等待，本质是让 Selenium 与浏览器渲染节奏协同——不是被动等待，而是主动观测状态变化。这不仅是定位动态元素的钥匙，更是构建健壮自动化脚本的基石。
