如何使用 Selenium 自动触发点击并抓取动态渲染的 HTML 内容

落枫吖_4141

落枫吖_4141

2026-08-20

935人浏览

原创

如何使用 Selenium 自动触发点击并抓取动态渲染的 HTML 内容

本文介绍在目标网页依赖 JavaScript 事件(如点击 div)才加载答案内容时,如何绕过 BeautifulSoup 的局限性,改用轻量、现代的 Selenium 方案完成动态页面抓取,尤其适配 Ubuntu 环境且无需手动管理 ChromeDriver。

本文介绍在目标网页依赖 javascript 事件(如点击 `div`)才加载答案内容时,如何绕过 beautifulsoup 的局限性,改用轻量、现代的 selenium 方案完成动态页面抓取,尤其适配 ubuntu 环境且无需手动管理 chromedriver。

BeautifulSoup 是一个强大的静态 HTML 解析库,但它无法执行 JavaScript,因此对“点击后才显示内容”的交互式网页(例如 <div onclick="showAnswers()">Xem đáp án</div>)完全无效。这类场景必须借助浏览器自动化工具——而 Selenium 正是业界标准方案。

幸运的是,现代 Selenium(v4.11+)已内置 WebDriver Manager 自动化机制:只要系统已安装 Chrome 浏览器(Ubuntu 下可通过 sudo apt install chromium-browsergoogle-chrome-stable 安装),Selenium 就能自动匹配并下载对应版本的 ChromeDriver,无需手动下载、解压或配置 PATH

以下是一个完整、可直接运行的教程级解决方案:

✅ 核心步骤说明

  1. 启动无头 Chrome(--headless=true),避免 GUI 开销;
  2. 使用 WebDriverWait 等待关键元素加载完成,避免 NoSuchElementException
  3. 定位并模拟点击触发答案展开(本例中需额外补全点击逻辑,原答案未显式调用 .click(),但实际页面需点击才能渲染 #accordionExample > ul li);
  4. 解析结构化问答数据,按题干与选项分组输出。

? 补充点击逻辑(关键修正)

原示例代码假设答案已存在 DOM 中,但根据问题描述,答案需点击「Xem đáp án」后才渲染。因此需增加显式点击操作:

html-ppt-to-pdf
html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF(使用 Playwright + Chromium 原生 PDF 功能)。

下载
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

OPTIONS = webdriver.ChromeOptions()
OPTIONS.add_argument("--headless=true")
OPTIONS.add_argument("--no-sandbox")
OPTIONS.add_argument("--disable-dev-shm-usage")

URL = "https://tech12h.com/bai-hoc/trac-nghiem-lich-su-12-bai-1-su-hinh-thanh-trat-tu-gioi-moi-sau-chien-tranh-gioi-thu-hai"

if __name__ == "__main__":
    with webdriver.Chrome(options=OPTIONS) as driver:
        driver.get(URL)

        # 显式等待并点击「Xem đáp án」按钮(根据页面实际 selector 调整)
        try:
            answer_btn = WebDriverWait(driver, 10).until(
                EC.element_to_be_clickable((By.XPATH, "//div[contains(text(), 'Xem đáp án')]"))
            )
            answer_btn.click()
            # 可选:短暂等待动画/渲染完成
            WebDriverWait(driver, 5).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "#accordionExample ul li"))
            )
        except Exception as e:
            print("⚠️ 未能定位或点击‘Xem đáp án’按钮,可能已默认展开或 selector 变更:", e)

        # 提取题干(<p> 标签)和选项(</p>
  • 标签) questions = [el.text.strip() for el in driver.find_elements(By.CSS_SELECTOR, "#accordionExample > p")] answers = [el.text.strip() for el in driver.find_elements(By.CSS_SELECTOR, "#accordionExample > ul li")] # 每道题含 4 个选项,按 4 分组 for i, q in enumerate(questions): print(f"{q}") start, end = i * 4, (i + 1) * 4 for opt in answers[start:end]: print(f"\t{opt}")

    ⚠️ 注意事项

    • Selector 鲁棒性:网站结构可能更新,建议用浏览器开发者工具(F12)实时验证 #accordionExample > p//div[contains(text(), 'Xem đáp án')] 是否仍准确;
    • Ubuntu 兼容性:若报 DevToolsActivePort 错误,请确保添加 --no-sandbox--disable-dev-shm-usage 参数;
    • 反爬策略:该站点无强反爬,但生产环境建议添加随机延时、User-Agent 轮换及请求头模拟;
    • 替代方案:若因资源限制无法使用 Selenium,可考虑 playwright-python(更轻量、支持多浏览器)或分析网络请求(F12 → Network → XHR/Fetch),直接调用 API 接口(如存在)。

    ✅ 总结

    当网页内容依赖用户交互(点击、悬停、滚动)触发 JavaScript 渲染时,BeautifulSoup 已力不从心;Selenium 是当前最成熟、易上手的解决方案。借助其自动驱动管理、显式等待与元素交互能力,配合合理 CSS/XPath 定位,即可稳定抓取动态问答结构。无需复杂配置,一行 pip install selenium 即可开启可靠自动化采集。

    ? 提示:首次运行前请确认系统已安装 Chrome/Chromium —— 这是 Selenium 自动化成功的前提。

  • 前端入门到VUE实战笔记:立即使用
    在学习笔记中,你将探索 前端 的入门与实战技巧!

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    html

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    python打包成可执行文件
    python打包成可执行文件

    本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

    2023.07.20

    1531

    4

    python能做什么
    python能做什么

    python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

    2023.07.25

    3584

    7

    format在python中的用法
    format在python中的用法

    Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    2023.07.31

    1549

    3

    python教程
    python教程

    Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

    2023.08.03

    20397

    23

    python环境变量的配置
    python环境变量的配置

    Python是一种流行的编程语言,被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后,我们需要配置环境变量,以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    2023.08.04

    2527

    5

    python eval
    python eval

    eval函数是Python中一个非常强大的函数,它可以将字符串作为Python代码进行执行,实现动态编程的效果。然而,由于其潜在的安全风险和性能问题,需要谨慎使用。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    2023.08.04

    2587

    5

    scratch和python区别
    scratch和python区别

    scratch和python的区别:1、scratch是一种专为初学者设计的图形化编程语言,python是一种文本编程语言;2、scratch使用的是基于积木的编程语法,python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.11

    1063

    5

    python合并两个列表
    python合并两个列表

    Python是一种强大的编程语言,具有许多方便的功能和工具。在Python中,有多种方法可以合并两个列表。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    2023.08.10

    576

    4

    python是前端还是后端
    python是前端还是后端

    Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.11

    2003

    5

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    GDB 17.2 官方文档集合
    GDB 17.2 官方文档集合

    共0课时 | 0人学习

    Bootstrap 入门安装配置
    Bootstrap 入门安装配置

    共0课时 | 0人学习

    38+ PhpStorm 提示和技巧
    38+ PhpStorm 提示和技巧

    共1课时 | 201人学习