挑战：按钮的隐式下载链接
在自动化网页操作时，我们经常会遇到需要点击按钮来下载文件的情况。然而，许多这类按钮并非直接包含 href 属性指向下载链接，而是通过 JavaScript 动态生成下载请求。这意味着我们无法简单地通过检查元素的 href 属性来获取目标 URL。在这种情况下，Puppeteer 提供的网络请求拦截功能成为解决问题的关键。
解决方案：拦截网络请求
Puppeteer 允许我们监听浏览器发出的所有网络请求。通过 page.waitForRequest() 方法，我们可以等待特定的请求被发出，并从中提取出我们所需的下载 URL。结合 Promise.all()，我们可以在点击按钮的同时等待预期的网络请求，确保捕获到正确的下载链接。
核心步骤
- 导航至目标页面： 使用 page.goto() 访问包含下载按钮的网页。
- 定位并点击触发下载的按钮： 使用 page.waitForSelector() 找到按钮，然后使用 click() 方法模拟点击。
- 拦截并匹配下载请求： 这是最关键的一步。在点击按钮之前或同时，启动 page.waitForRequest() 监听器，并通过回调函数定义匹配规则，以识别出真正的下载请求。
- 提取请求 URL： 一旦匹配的请求被捕获，即可从请求对象中获取其 URL。
示例代码
以下是一个使用 Puppeteer 捕获按钮触发的 CSV 文件下载链接的示例：
京东商城2012模板 for ECshop
下载
仿京东商城模板，适用于ECshop v2.7.3，先安装ecshop程序，建议安装utf-8版本。 模板使用教程： http://www.ecmoban.com/article-1421.html 模板交流区QQ群:60221814 特别说明：下载该模板只获得该模板的使用权，无该模板的版权! 如发生EC版权跳转等不明原因出错，请核实是否删除了底部的ECSHOP版权，或者模板堂版权链接，如删除了恢复
const puppeteer = require("puppeteer"); // 确保版本兼容，例如 ^19.7.5
(async () => {
let browser;
try {
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内容加载完成
// 假设页面上有一个按钮，点击后会显示另一个“导出CSV”按钮
// 首先点击“Téléchargement des données”（下载数据）按钮，如果存在
const initialBtnSelector = '[aria-label="Téléchargement des données"]';
const initialBtn = await page.waitForSelector(initialBtnSelector);
if (initialBtn) {
await initialBtn.click();
}
// 同时等待“Export CSV”按钮被点击 和 匹配的下载请求被发出
// Promise.all 确保这两个异步操作都完成
const [downloadRequest] = await Promise.all([
// 1. 等待匹配的请求：请求URL以.csv结尾 或 包含特定API路径
page.waitForRequest(req =>
req.url().endsWith(".csv") ||
req.url().includes("data.ademe.fr/data-fair/api/v1/datasets/liste-des-entreprises-rge-2")
),
// 2. 点击“Export CSV”按钮，触发下载请求
(await page.waitForSelector('[aria-label="Export CSV"]')).click()
]);
// 打印捕获到的下载链接
console.log("捕获到的下载链接:", downloadRequest.url());
// 如果需要下载文件，可以调用一个下载函数
// 例如：await downloadFile(downloadRequest.url(), 'output.csv');
// downloadFile 函数的实现可以参考：https://stackoverflow.com/a/51302466/6243352
// 或者使用Node.js的http/https模块进行文件下载
// const fs = require('fs');
// const https = require('https');
// https.get(downloadRequest.url(), response => {
// response.pipe(fs.createWriteStream('downloaded_file.csv'));
// });
} catch (err) {
console.error("发生错误:", err);
} finally {
if (browser) {
await browser.close();
}
}
})();代码解析
- page.goto(url, { waitUntil: "domcontentloaded" }): 导航到指定 URL，并等待页面的 DOM 内容加载完毕。这有助于确保后续的元素选择器能够找到目标元素。
- page.waitForSelector('[aria-label="Téléchargement des données"]'): 等待页面上出现 aria-label 为 "Téléchargement des données" 的元素。这在某些情况下是必要的，因为下载按钮可能不会立即出现。
-
Promise.all([...]): 这是一个关键的技巧。它允许我们并行执行多个 Promise。在这里，我们同时做了两件事：
- page.waitForRequest(...): 启动一个监听器，等待符合特定条件的网络请求。回调函数 req => req.url().endsWith(".csv") || req.url().includes("...") 定义了请求的匹配规则。我们寻找 URL 以 .csv 结尾的请求，或者包含特定 API 路径的请求。
- (await page.waitForSelector('[aria-label="Export CSV"]')).click(): 等待页面上出现 aria-label 为 "Export CSV" 的按钮，并点击它。这个点击操作会触发我们正在等待的网络请求。
- downloadRequest.url(): 一旦 page.waitForRequest 捕获到匹配的请求，它会返回一个请求对象。我们可以通过 url() 方法获取该请求的完整 URL。
注意事项与最佳实践
-
请求匹配规则的精确性： page.waitForRequest 的回调函数是识别目标请求的关键。需要根据实际情况，选择最能准确匹配下载请求的条件，例如：
- 文件扩展名： req.url().endsWith(".csv")
- URL路径片段： req.url().includes("api/v1/datasets")
- 请求方法： req.method() === 'GET' 或 req.method() === 'POST'
- 请求头或载荷： 针对更复杂的请求（如POST请求），可能需要检查 req.headers() 或 req.postData()。
- 时序问题： Promise.all 在处理点击和等待请求的并发时非常有效。确保 waitForRequest 在点击操作之前或同时被调用，以避免错过请求。
- 动态内容与等待策略： 网页内容可能是动态加载的。使用 page.waitForSelector() 确保元素可见且可交互，使用 waitUntil 选项（如 domcontentloaded, networkidle0）确保页面状态稳定。
- 错误处理： 使用 try...catch...finally 结构来捕获潜在的错误，并确保在脚本结束时关闭浏览器实例，即使发生错误。
- 文件下载： 一旦获取到下载 URL，你可以使用 Node.js 内置的 http 或 https 模块，或者第三方库（如 axios）来实际下载文件。
- 区域差异与A/B测试： 某些网站可能会根据用户区域或进行A/B测试而显示不同的按钮文本或行为。在编写自动化脚本时，应考虑到这些潜在的差异，并尽可能使用更稳定的选择器（如 aria-label 或唯一ID）。
总结
通过巧妙地结合 page.waitForRequest() 和 Promise.all()，Puppeteer 提供了一种强大而灵活的方式来处理那些不直接暴露下载链接的按钮。这种方法不仅限于文件下载，还可以用于捕获任何由用户交互触发的后台数据请求，极大地扩展了自动化操作的可能性。掌握这一技巧，将使您在处理复杂网页自动化任务时更加游刃有余。
