使用BS4的find_all爬取TD银行房贷利率时内容变为<!--empty-->如何解决

问题根因 #

• 目标页面使用Angular框架开发，属于客户端渲染站点：requests.get()仅能获取服务器返回的初始静态HTML，此时利率数据还未通过前端JavaScript计算/加载填充到DOM节点中，对应位置默认是<!--empty-->占位注释，只有等JS执行完成后才会替换为实际的2.54%这类利率数值。
• BeautifulSoup仅能解析静态文本，无法执行JS逻辑，所以无法拿到动态渲染后的内容。

可行解决方案 #

方案1：使用支持JS执行的爬取工具 #

用Selenium、Playwright等无头浏览器工具模拟浏览器运行，等页面完整渲染后再解析源码，示例代码如下：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup

# 配置无头模式
chrome_options = Options()
chrome_options.add_argument("--headless=new")
driver = webdriver.Chrome(options=chrome_options)

url = "https://www.td.com/ca/en/personal-banking/products/mortgages/mortgage-rates/"
driver.get(url)
# 等待JS渲染完成
driver.implicitly_wait(5)

# 取渲染后的完整页面源码
rendered_html = driver.page_source
soup = BeautifulSoup(rendered_html, "html.parser")

# 原有解析逻辑不变
table = soup.find("div", class_="td-rates-table rates-bg-row1").table
rows = table.tbody.find_all("tr")
for row in rows:
  for rate in row.find_all("td"):
      print(rate.text.strip())

driver.quit()

方案2：直接调用利率数据接口 #

打开浏览器开发者工具的「网络」面板，筛选XHR/Fetch请求，刷新页面后找到加载利率数据的后端接口，直接请求该接口获取结构化的JSON格式利率数据，该方案比解析HTML效率更高、稳定性更好，且不需要启动浏览器模拟渲染。

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