使用 Puppeteer/NodeJS 在单击时设置 FormData 键/值答案

【问题标题】：Setting a FormData key/value on click with Puppeteer/NodeJS使用 Puppeteer/NodeJS 在单击时设置 FormData 键/值
【发布时间】：2021-10-16 12:42:38
【问题描述】：

我正在一个 NodeJS 项目中使用 Puppeteer 完成一个表单。使用常规类型和单击功能一切正常。单击“提交”按钮后，会发出一个 POST 请求，该请求会将一些表单数据发送到服务器。我想在发送之前附加一个键/值。这就是我目前在 StackOverflow、Github 和 Puppeteer 文档上找到的内容。我正在拦截请求，通过传入一个 FormData 对象的新实例来添加我的键/值，该对象附加了新的键/值。

await this.page.setRequestInterception(true);
var FormData = require('form-data');
var form = new FormData();
this.page.once("request", interceptedRequest => {
    console.log("Request handler triggered");
    form.append('newvalue', 'some new value');
    interceptedRequest.method = "POST";
    interceptedRequest.postData = form;
    interceptedRequest.continue();
    
});
await this.page.goto(urlWithForm, { waitUntil: "networkidle2" });
// Complete form...
// Click submit
await this.page.click('#submit');

我首先担心的是 - 这是正确的方法吗？我担心当最后单击#submit 按钮时，表单数据将被单击此按钮时发送的“正常”表单数据覆盖。我应该做点别的吗？可能使用 page.evaluate 并在浏览器本身中运行一些代码以在提交时以某种方式设置此键/值？

第二个是当前页面只是在调用 this.page.goto 时无限期挂起。我在日志中看到“请求处理程序已触发”，但好像 .continue() 方法没有被调用或无法正常工作。什么都没有加载。

非常感谢这里的一些指导！

【问题讨论】：

这是什么页面？页面发送大量请求，所以我会设置一个保护来检查请求 url 是否与您的目标匹配。

标签： javascript node.js puppeteer form-data

【解决方案1】：

这里的技巧是首先通过使用 .on 方法而不是 .once 来更改侦听器以在每个请求上发生。

另外，正如 ggorlen 在评论中提到的那样，我需要对页面发出的每个请求进行一些检查，并使用 URL（以及表单数据的另一个属性）来验证它是否确实存在我想更改的请求。

下面的代码现在似乎可以工作了。

await this.page.setRequestInterception(true);
this.page.on("request", interceptedRequest => {
    const formDataObj = qs.parse(interceptedRequest.postData());
    if (interceptedRequest.url() === theURLImInterestedIn && formDataObj.email) {
        formDataObj.newKey = newKeyValue;
        interceptedRequest.continue({
            method: 'POST',
            postData: qs.stringify(formDataObj),
            headers: {
              ...interceptedRequest.headers()
            }
        });
    } else {
        interceptedRequest.continue();
    }
    
});

【讨论】：