I’m working on automated testing with Puppeteer and need to enter text into form fields. Right now I’m using this approach:
await browser.select('#username').type('[email protected]');
This method works fine but it simulates human typing by entering each character one at a time. For my test cases, I don’t need this realistic typing simulation and would prefer to set the entire value instantly. Is there a way to populate the input field with all the text at once rather than the slow character-by-character approach? I’m looking for faster execution in my test suite.
yeah, you can also use page.type() with delay set to 0 - might work better if you need the input events to fire automatically. just do await page.type('#username', '[email protected]', {delay: 0}) and it’s still faster than default typing but triggers all the right events without extra code.
The page.$eval() method is another solid option - it combines selection and value setting in one call. I find it cleaner than using evaluate separately:
await page.$eval('#username', (el, value) => el.value = value, '[email protected]');
This directly targets the element and sets its value with no typing delay. I usually follow up with await page.focus('#username') and sometimes await page.keyboard.press('Tab') so the form recognizes the change. Way more efficient for test automation when you don’t need human-like interaction.
Use page.evaluate() to set the input value directly with JavaScript. It skips the typing simulation and sets the value instantly. Here’s what I use:
await page.evaluate(() => {
document.querySelector('#username').value = '[email protected]';
});
You might need to trigger input events afterward if your app needs them for validation. I usually add a focus event so the field knows it’s been filled. Way faster than typing character by character.