I'm completing a form using Puppeteer within a NodeJS project. Everything is working fine with the regular type and click functions. Upon clicking the "submit" button a POST request is made which sends some form data to the server. I would like to append a key/value before sending it. This is where I am currently based on what I've found on StackOverflow, Github & Puppeteer documentation. I'm intercepting the request, adding my key/value by passing in a new instance of a FormData object which has the new key/value appended.
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');
My first concern is - is this the correct way to do this at all? I'm concerned that when the #submit button is clicked at the end that the form data will be overwritten with the "normal" form data that gets sent when this button is clicked. Should I be doing something else? Possibly with page.evaluate and running some code in the browser itself to somehow set this key/value upon submit?
The second is that currently the page just hangs indefinitely when this.page.goto is called. I'm seeing in the logs "Request handler triggered" but it's as if the .continue() method is not getting called or not working correctly. Nothing loads.
Would really appreciate some guidance here!
The trick here was first to change the listener to happen on each request by using the .on method instead of .once.
Also, as ggorlen mentioned in a comment, I needed to perform some checks on each of the requests that were being made by the page and use the URL (and another property of the form data) to verify that it was in fact the request I wanted to change.
The below code appears to be working now.
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();
}
});