I’m working on some end-to-end tests with Puppeteer. Right now I’m trying to fill out a form but I’ve run into a small issue. When I use the page.type() method to enter an email address, it types each character one by one. This is pretty slow and not really what I need.
Here’s what I’m doing now:
await page.type('#emailInput', '[email protected]');
It works, but it’s like watching someone type really slowly. Is there a faster way to do this? I’d love to just drop the whole email in at once. Does Puppeteer have any tricks up its sleeve for this kind of thing?
I’ve looked through the docs but haven’t found anything obvious. Maybe I’m missing something simple? Any help would be great!
hey there, i’ve run into this too! puppeteer’s got a cool trick - try using page.evaluate() to set the value directly. something like:
await page.evaluate(() => document.querySelector(‘#emailInput’).value = ‘[email protected]’);
way faster than typing it out. hope this helps!
I’ve encountered this issue as well in my Puppeteer projects. While page.evaluate() is a good solution, I’ve found that using page.$eval() can be even more straightforward for this specific task. Here’s an example:
await page.$eval(‘#emailInput’, el => el.value = ‘[email protected]’);
This method combines selecting the element and setting its value in one step. It’s efficient and avoids the need for a separate querySelector call. Additionally, it maintains better type safety compared to page.evaluate().
In my experience, this approach has significantly sped up form filling in my test suites. It’s particularly useful when dealing with multiple input fields in succession.
As someone who’s been working with Puppeteer extensively, I’ve found that the page.type() method can indeed be a bottleneck in tests. A less-known but highly effective approach is using the page.keyboard.sendCharacter() method. Here’s how you can implement it:
await page.focus(‘#emailInput’);
await page.keyboard.sendCharacter(‘[email protected]’);
This method essentially ‘pastes’ the entire string at once, bypassing the character-by-character input simulation. It’s significantly faster than page.type() and doesn’t require JavaScript evaluation like page.evaluate() or page.$eval().
I’ve used this in large-scale test suites and it’s made a noticeable difference in execution time. Just remember to focus on the input field first to ensure the characters are sent to the right place. This approach has been a game-changer for my Puppeteer scripts, especially when dealing with forms that have numerous fields.