如何在网页爬虫中提取点击按钮后才渲染展示的动态数据

你提到的按钮带wire:click.prevent属性，说明网站用的是Laravel Livewire框架，点击按钮是触发前端异步调用后端方法加载数据，不会跳转新页面，有两种常用的爬取方案：

方案1：自动化浏览器模拟点击（兼容性最高，上手简单） #

直接用Selenium、Playwright这类工具模拟真实用户的点击操作，自动执行页面JS逻辑，拿到渲染后的详情数据，不需要分析接口逻辑，适合大部分场景：

• 操作示例（Python + Playwright）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动浏览器，headless=True为无界面模式，调试可以改成False
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    # 打开产品列表页
    page.goto("https://www.platformone-eg.com/en/products")
    # 定位对应产品的Product Details按钮，点击
    page.locator('a[wire\\:click.prevent="product_details(15662)"]').click()
    # 等待详情容器加载完成，把选择器替换为页面实际的详情模块类名/ID
    page.wait_for_selector('.product-detail-wrapper', timeout=5000)
    # 提取需要的详情数据
    product_detail = page.locator('.product-detail-wrapper').inner_html()
    print(product_detail)
    browser.close()

如果需要批量爬取所有产品，遍历所有产品对应的product_details()里的ID，逐个点击提取即可。

方案2：逆向Livewire接口（爬取效率更高） #

适合需要高并发批量爬取的场景，不需要启动浏览器，直接构造HTTP请求拿数据：

• Livewire的所有交互请求都是统一POST到/livewire/message/[组件名]端点，请求头需要带X-Livewire标识，请求体包含组件状态、要调用的方法和参数
• 操作步骤：打开浏览器控制台的网络标签，点击一次Product Details按钮，找到对应的fetch/xhr类型请求，复制完整的请求头、请求体结构，后续请求只需要把参数里的产品ID替换为对应产品的ID，就能直接拿到返回的详情数据
• 注意：需要定期更新请求里的fingerprint、state等Livewire校验参数，避免请求被拦截。

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