Puppeteer捕获动态按钮请求URL技巧

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Puppeteer捕获动态按钮请求URL方法》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

理解问题：按钮的动态行为

在网页自动化中，我们经常会遇到这样的场景：页面上的某个按钮，例如“导出CSV”或“下载报告”，其HTML结构中并没有直接的 href 属性指向一个可下载的URL。相反，这些按钮通常通过JavaScript触发一个后台请求（如XHR或Fetch API），然后服务器响应数据流，或者动态生成一个文件下载链接。对于 Puppeteer 而言，直接检查按钮的DOM属性将无法获取到实际的下载链接，因为这个链接是在点击动作发生后，由浏览器与服务器交互过程中动态产生的。

核心策略：网络请求拦截

解决这类问题的关键在于利用 Puppeteer 的网络请求拦截能力。当用户点击一个按钮并触发下载或数据请求时，浏览器会向服务器发送一个或多个网络请求。Puppeteer 提供了 page.waitForRequest() 方法，允许我们监听并捕获这些请求，从而获取到实际的数据源URL。

page.waitForRequest(urlOrPredicate, options) 方法会等待符合条件的网络请求发出。它的强大之处在于，我们可以提供一个谓词函数（一个返回布尔值的函数），来精确地匹配我们感兴趣的请求。

实践步骤：捕获动态下载URL

以下是使用 Puppeteer 捕获动态下载URL的详细步骤及示例代码：

1. 初始化 Puppeteer 与导航

首先，我们需要启动浏览器并导航到目标页面。

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const url = "https://data.ademe.fr/datasets/liste-des-entreprises-rge-2"; // 目标页面URL
  await page.goto(url, { waitUntil: "domcontentloaded" }); // 等待DOM内容加载完成
  // ... 后续操作
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

2. 定位并触发按钮

在某些情况下，可能需要点击多个按钮才能触发最终的下载。例如，可能先点击一个“下载数据”按钮，然后才出现“导出CSV”按钮。我们需要按顺序定位并点击这些按钮。

// ... (接上文代码)

// 假设有一个初始按钮用于展开下载选项，例如“Téléchargement des données”
const initialBtn = await page.waitForSelector('[aria-label="Téléchargement des données"]');
if (initialBtn) {
  await initialBtn.click();
}

// ... (接下文代码)

3. 拦截并解析请求

这是最关键的一步。我们需要在点击最终下载按钮 之前 设置好请求监听器。Promise.all 是一个非常适合这里的模式，它允许我们同时等待一个请求的发生和一个动作的完成。

// ... (接上文代码)

// 设置请求监听器，等待符合条件的网络请求
const [request] = await Promise.all([
  page.waitForRequest(req =>
    // 匹配以 .csv 结尾的URL，或者包含特定API路径的URL
    req.url().endsWith(".csv") ||
    req.url().includes("data.ademe.fr/data-fair/api/v1/datasets/liste-des-entreprises-rge-2")
  ),
  // 点击“Export CSV”按钮，触发下载请求
  (await page.waitForSelector('[aria-label="Export CSV"]')).click()
]);

// 获取捕获到的请求URL
console.log("捕获到的下载URL:", request.url());

// ... (后续操作，如下载文件)

4. 完整示例代码

将上述步骤整合起来，形成一个完整的自动化脚本：

const puppeteer = require("puppeteer"); // ^19.7.5 或更高版本

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const url = "https://data.ademe.fr/datasets/liste-des-entreprises-rge-2"; // 目标页面URL

  try {
    await page.goto(url, { waitUntil: "domcontentloaded" });

    // 步骤1: 尝试点击第一个按钮，通常用于展开下载选项或弹窗
    const initialBtn = await page.waitForSelector('[aria-label="Téléchargement des données"]', { timeout: 5000 });
    if (initialBtn) {
      console.log("点击 'Téléchargement des données' 按钮...");
      await initialBtn.click();
    } else {
      console.log("未找到 'Téléchargement des données' 按钮，可能不需要点击。");
    }

    // 步骤2: 等待并点击实际触发下载的按钮，同时监听网络请求
    console.log("准备监听网络请求并点击 'Export CSV' 按钮...");
    const [request] = await Promise.all([
      // 监听请求：匹配以 .csv 结尾的URL 或 包含特定API路径的URL
      page.waitForRequest(req =>
        req.url().endsWith(".csv") ||
        req.url().includes("data.ademe.fr/data-fair/api/v1/datasets/liste-des-entreprises-rge-2")
      ),
      // 等待并点击 'Export CSV' 按钮
      (await page.waitForSelector('[aria-label="Export CSV"]')).click()
    ]);

    // 步骤3: 获取捕获到的请求URL并打印
    const downloadUrl = request.url();
    console.log("成功捕获到下载URL:", downloadUrl);

    // 示例：此处可以调用其他函数来下载文件
    // 例如：await downloadFile(downloadUrl, 'output.csv');

  } catch (err) {
    console.error("操作过程中发生错误:", err);
  } finally {
    if (browser) {
      await browser.close();
      console.log("浏览器已关闭。");
    }
  }
})();

注意事项与进阶

1. 请求过滤的重要性：

   • page.waitForRequest 的谓词函数是关键。你需要根据目标网站的实际情况，编写能够准确匹配目标下载请求的逻辑。常见的匹配方式包括：
     • req.url().endsWith(".csv")：匹配特定文件扩展名。
     • req.url().includes("api/v1/datasets/...")：匹配URL中的特定路径或API端点。
     • req.resourceType() === 'xhr' 或 'document' 等：匹配请求的资源类型。
   • 如果页面上同时有多个请求发出，确保你的过滤条件足够精确，以避免捕获到错误的URL。

2. 处理多步操作：

   • 如果下载过程涉及多个点击或页面跳转，需要按照实际的用户操作流程，逐步编写 Puppeteer 代码。每次点击前，可能都需要等待相应的元素出现。
   • Promise.all 模式非常适合处理“点击一个元素同时等待某个结果”的场景。

3. 错误处理与超时：

   • 使用 try...catch...finally 结构来处理可能发生的错误，例如元素未找到、请求超时等。
   • waitForSelector 和 waitForRequest 都支持 timeout 选项，合理设置超时时间可以避免脚本无限等待。

4. 后续文件下载：

   • 一旦获取到下载URL，你可以使用 Node.js 的 http、https 模块或第三方库（如 node-fetch、axios）来实际下载文件。
   • 对于 Puppeteer 自身，也可以配置下载行为，例如使用 page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: './downloads'}) 来直接让浏览器下载文件到指定路径。

总结

通过巧妙地结合 page.waitForRequest 和 Promise.all，Puppeteer 能够有效地解决动态生成下载链接的问题。这种网络请求拦截的策略不仅限于文件下载，同样适用于捕获由按钮触发的任何后台 API 请求的 URL，为更复杂的网页自动化场景提供了强大的工具。理解并掌握这一技巧，将极大地扩展您的 Puppeteer 自动化能力。

到这里，我们也就讲完了《Puppeteer捕获动态按钮请求URL技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！