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