BeautifulSoup解析谷歌支持页时丢失特定zippy <div>元素求助

问题描述 #

使用BeautifulSoup解析谷歌Play支持页面时，解析后的soup中找不到Zippy折叠元素。例如目标页面中存在如下Zippy元素结构：

<div class="zippy-container"><a class="zippy index1 goog-zippy-expanded" data-sc-zippy-id="play-store-app" aria-expanded="true" tabindex="0" role="button" data-stats-ve="2" data-stats-imp="" data-stats-idx="1,17" data-stats-ignore="" data-outlined="false">Play Store app</a></div>
<div class="zippy-overflow"><div class="zippy-content" style="margin-top: 0px; transition: margin-top 0.218s ease-out 0s; overflow: auto;"><ol>
  <li>Open the Google Play app <img src="//storage.googleapis.com/support-kms-prod/HIW81g8nflvhNKmYm3Q1IYhcWa6h9CBASKWd" width="18" height="18" alt="Google Play" data-mime-type="image/png">.</li>
  <li>At the top right, tap the profile icon.</li>
  <li>Tap <strong>Settings</strong> <img src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36" width="18" height="18" alt="and then" data-mime-type="image/png" data-alt-src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw"> <strong>Family </strong><img src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36" width="18" height="18" alt="and then" data-mime-type="image/png" data-alt-src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw"> <strong>Manage family members</strong>.</li>
  <li>Tap <strong>Invite family members</strong> <img src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36" width="18" height="18" alt="and then" data-mime-type="image/png" data-alt-src="//lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw"> <strong>Send</strong>.</li>
</ol>
</div></div>

执行以下代码后：

soup = bs4.BeautifulSoup(document_source, features='html.parser')

Zippy元素未出现在解析结果中，原本包含它们的div被剥离内容。尝试使用html5lib解析也无法解决问题。

问题原因 #

谷歌支持页面的Zippy折叠元素是通过JavaScript动态渲染生成的。直接通过requests等工具获取的静态HTML源码中并不包含这些元素，因此无论使用哪种解析器，BeautifulSoup都无法找到它们。

解决方案 #

需要使用能执行JavaScript并渲染完整页面的工具，获取渲染后的页面源码后再用BeautifulSoup解析，或直接抓取页面的API接口数据。

方案1：使用Selenium获取渲染后的页面

1. 安装依赖：

pip install selenium

同时需下载对应浏览器的驱动（如ChromeDriver），确保驱动版本与浏览器版本匹配。

2. 代码示例：

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

# 配置Chrome无头模式（可选，后台运行）
chrome_options = Options()
chrome_options.add_argument("--headless=new")

# 启动浏览器并加载目标页面
driver = webdriver.Chrome(options=chrome_options)
driver.get("目标谷歌Play支持页面的URL")

# 获取渲染后的完整页面源码
rendered_source = driver.page_source

# 关闭浏览器
driver.quit()

# 用BeautifulSoup解析渲染后的源码
soup = bs4.BeautifulSoup(rendered_source, features='html.parser')

# 查找Zippy容器及内容
zippy_containers = soup.find_all("div", class_="zippy-container")
for container in zippy_containers:
    # 获取Zippy标题
    zippy_title = container.find("a", class_="zippy").get_text(strip=True)
    print(f"Zippy标题：{zippy_title}")
    # 获取对应的Zippy内容
    zippy_content = container.find_next_sibling("div", class_="zippy-overflow").find("div", class_="zippy-content")
    print(f"Zippy内容：{zippy_content.get_text(strip=True)}\n")

方案2：抓取页面API接口

打开浏览器开发者工具的「网络」面板，刷新页面后过滤XHR/Fetch请求，查找加载Zippy内容的API接口。直接请求该接口可获取结构化数据，无需渲染页面，效率更高。

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