我在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按钮时，表单数据将被单击该按钮时发送的普通表单数据覆盖。我是不是应该做点别的事？可能使用页面。评估并在浏览器本身中运行一些代码，以便在提交时以某种方式设置此键/值？

第二个问题是，当前页面在调用this.page.goto时不确定地挂起。我在日志中看到了触发的请求处理程序，但似乎没有调用.Continue()方法或该方法工作不正常。没有加载任何内容。

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

推荐答案

这里的诀窍首先是使用.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();
    }
    
});