Completing form fields with Puppeteer

Recently we had some issues with flakey e2e tests, which turned out to be caused by the Puppeteer page.type method sometimes not inputting the full text into form fields. In one case this resulted in a user account getting created as contri instead of contributoruser, with the following test failing as it wasn’t able to log in with the correct account details.

These failures were intermittent and seemed to be related to the speed at which Puppeteer was inputting the text. With the page.keyboard.type method, there is an option to pass in a delay config option, which seemed to improve things for some tests.

With the user account creation form though, it seemed like typing each letter into input fields was not the most efficient or robust approach. We were not testing the user creation form in these tests, so didn’t need to know how it was performing with actual keyboard input.

Is there a way to instead set the input field value in one go rather than letter by letter?

It turns out there is. With the following approach, we were able to set each of the form inputs with a single string rather than one letter at a time. With this change, our most recent problem test now seems to be passing much more reliably, locally and in CI.

await page.$eval( '#user_login', el => el.value = 'username' );

This call was contained in a generic createUser method which allows the username to be passed in, and it turned out that to use a dynamic value it has to be passed in as a third parameter of the page.$eval method, eg.

await page.$eval(
	'#user_login',
	( el, value ) => ( el.value = value ),
	username
);

In the above example the username is the argument that gets passed into the value parameter.