I am currently developing an end-to-end testing suite using Puppeteer and I am having trouble consistently filling out registration forms. Sometimes the text is entered too quickly for the site's JavaScript to register, and other times the field isn't fully cleared before typing. What is the standard protocol for selecting an input by its selector and ensuring the text is correctly bound to the element's value? Is page.type() better than setting the value directly via page.evaluate(), especially when dealing with complex reactive frameworks?
3 answers
The most human-like way to fill an input is using page.type(selector, text, {delay: 100}). This mimics actual keystrokes, which is vital if the website has event listeners like onKeyPress or onInput that trigger validation. However, if you are dealing with a field that already contains data, Puppeteer doesn't clear it by default; it just appends the text. To handle this, you should first click the element, then use page.keyboard.down('Control'), page.keyboard.press('A'), and page.keyboard.up('Control') followed by Backspace. This ensures a clean slate before the new data is entered, preventing common automation errors during the submission process.
I’ve noticed that page.type() can be slow for very long strings. In scenarios where you need to dump a large amount of text into a textarea, wouldn't it be more efficient to use page.evaluate() to set the value directly? Does this method bypass the security or validation checks that modern front-end frameworks like React or Angular use to track state changes in their components?
For simple forms, I always use a combination: page.focus(selector) followed by page.keyboard.type(text). It seems to be the most stable approach for me across different browser versions.
I agree with Rebecca. Focusing the element first is a great defensive programming habit in Puppeteer. It ensures the cursor is exactly where it needs to be before any keyboard events are fired, reducing the chance of "typing into the void."
Joshua, you're right about the speed, but there's a catch. To answer your question, if you use element.value = 'text', frameworks like React often won't "see" the change because the internal state isn't updated. To fix this, you have to manually dispatch an input event after setting the value: el.dispatchEvent(new Event('input', { bubbles: true }));. This forces the framework to sync its state with the DOM. While page.type() is slower, it handles all these event triggers automatically, which is why it's generally preferred for testing user interactions unless performance is a major bottleneck.