如何抓取依赖动态数据源的Div元素数据？（BeautifulSoup+Selenium）

问题场景 #

在浏览器开发者工具中能看到渲染后的日期DOM结构：

<div class="full-date">
                    <span class="day-of-week ng-binding">Thursday</span> | 
                    <span class="month ng-binding">August</span>
                    <span class="date ng-binding">04, </span>
                    <span class="year ng-binding">2022</span>
                </div>

但使用divs = soup.find_all('div')提取内容时，得到的却是Angular模板表达式：

<div class="full-date">
 <span class="day-of-week">{{ WMService.auctionStartDate(lot.auction) | moment:'dddd' }}</span> | 
 <span class="month">{{ WMService.auctionStartDate(lot.auction) | moment:'MMMM' }}</span>
 <span class="date">{{ WMService.auctionStartDate(lot.auction) | moment:'DD' }}, </span>
 <span class="year">{{ WMService.auctionStartDate(lot.auction) | moment:'YYYY' }}</span>
 </div>

无法获取August、04、2022这类实际数据，推测是页面依赖外部数据源渲染，请问该情况是否存在？如何解决？

问题本质 #

这种情况确实存在，这是**客户端渲染（CSR）**的典型表现：页面初始HTML仅包含Angular模板（即{{ ... }}表达式），实际数据是浏览器加载并执行JavaScript后，通过调用WMService.auctionStartDate这类接口/服务获取数据，再动态渲染到DOM中的。

BeautifulSoup直接解析的是服务器返回的初始HTML源码，自然拿不到JS渲染后的实际内容；而浏览器开发者工具展示的是渲染完成后的最终DOM结构，所以能看到真实数据。

解决方法 #

你已经用到了Selenium（它可以模拟浏览器执行JS），只需要利用Selenium的等待机制，确保Angular完成渲染后再提取内容即可，有两种常用方式：

方式一：直接用Selenium提取渲染后的元素文本 #

无需再用BeautifulSoup，直接通过Selenium定位元素并获取文本：

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("目标网页URL")

# 等待目标元素渲染完成（最多等待10秒）
wait = WebDriverWait(driver, 10)
month_element = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "month")))
date_element = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "date")))
year_element = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "year")))

# 提取文本并处理格式
month = month_element.text.strip()
date = date_element.text.strip().replace(",", "")
year = year_element.text.strip()

print(f"日期：{month} {date}, {year}")

driver.quit()

方式二：等待渲染完成后，获取页面源码再用BeautifulSoup解析 #

如果习惯用BeautifulSoup处理DOM，可以先让Selenium等待渲染，再获取当前页面的源码：

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

driver = webdriver.Chrome()
driver.get("目标网页URL")

# 等待页面关键元素渲染完成
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "full-date")))

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

# 提取目标内容
full_date_div = soup.find("div", class_="full-date")
month = full_date_div.find("span", class_="month").text.strip()
date = full_date_div.find("span", class_="date").text.strip().replace(",", "")
year = full_date_div.find("span", class_="year").text.strip()

print(f"日期：{month} {date}, {year}")

driver.quit()

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