What's the quickest way to populate form fields in Puppeteer?

Other Questions Puppeteer
1

I’m working on some end-to-end tests using Puppeteer and I’ve run into a small issue. I’m trying to fill out form fields, but the current method I’m using seems a bit slow. Here’s what I’ve got:

await page.type('#username', 'johndoe123');

This works, but it’s typing each character one at a time, like a person would. It’s neat, but not what I need right now. Is there a faster way to do this? I’d like to instantly fill the entire field if possible.

I’ve looked through the docs but couldn’t find anything obvious. Has anyone else dealt with this before? Any tips or tricks would be super helpful. Thanks!

2

I’ve found that using the page.evaluate() method with Object.assign() can be incredibly efficient for populating multiple form fields at once. Here’s an approach I’ve used successfully:

await page.evaluate(() => {
  Object.assign(document.forms[0], {
    username: 'johndoe123',
    email: '[email protected]',
    password: 'securepass123'
  });
});

This method allows you to set values for multiple fields in one go, which can significantly speed up your tests. It’s particularly useful when dealing with complex forms. Just ensure your selectors are accurate, and remember that this method, like others mentioned, doesn’t trigger input events by default.

3

I’ve actually faced this exact issue before when optimizing our test suite at work. The solution is pretty straightforward - you can use the page.evaluate() function to directly set the value of the input field. Here’s how I do it:

await page.evaluate((selector, value) => {
  document.querySelector(selector).value = value;
}, '#username', 'johndoe123');

This method is significantly faster as it bypasses the character-by-character input simulation. It’s especially useful when you’re dealing with a large number of form fields or running tests at scale.

One caveat though - this method doesn’t trigger input events, which might be important if your form has any JavaScript listening for those. In such cases, you might need to manually dispatch the events after setting the value. But for most scenarios, this approach works like a charm and can really speed up your tests.

4

hey, try using page.$eval() for quick form filling. it’s way faster than typing:

await page.$eval(‘#username’, (el, value) => el.value = value, ‘johndoe123’);

this sets the value instantly. just remember it won’t trigger input events if ur form needs that. hope this helps!