理解问题：按钮的动态行为
在网页自动化中，我们经常会遇到这样的场景：页面上的某个按钮，例如“导出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("浏览器已关闭。");
}
}
})();注意事项与进阶
-
请求过滤的重要性：
- page.waitForRequest 的谓词函数是关键。你需要根据目标网站的实际情况，编写能够准确匹配目标下载请求的逻辑。常见的匹配方式包括：
- req.url().endsWith(".csv")：匹配特定文件扩展名。
- req.url().includes("api/v1/datasets/...")：匹配URL中的特定路径或API端点。
- req.resourceType() === 'xhr' 或 'document' 等：匹配请求的资源类型。
- 如果页面上同时有多个请求发出，确保你的过滤条件足够精确，以避免捕获到错误的URL。
- page.waitForRequest 的谓词函数是关键。你需要根据目标网站的实际情况，编写能够准确匹配目标下载请求的逻辑。常见的匹配方式包括：
-
处理多步操作：
- 如果下载过程涉及多个点击或页面跳转，需要按照实际的用户操作流程，逐步编写 Puppeteer 代码。每次点击前，可能都需要等待相应的元素出现。
- Promise.all 模式非常适合处理“点击一个元素同时等待某个结果”的场景。
-
错误处理与超时：
- 使用 try...catch...finally 结构来处理可能发生的错误，例如元素未找到、请求超时等。
- waitForSelector 和 waitForRequest 都支持 timeout 选项，合理设置超时时间可以避免脚本无限等待。
-
后续文件下载：
- 一旦获取到下载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 自动化能力。
