I’m working with Puppeteer and trying to figure out the right way to submit forms programmatically. When a form has a submit button, I can just use page.click('button[type="submit"]') and it works fine. But I’m running into issues with forms that don’t have an actual submit button.
I tried focusing on the input field and pressing Enter with page.press('Enter'), but that doesn’t seem to trigger the form submission properly. Here’s what I’ve been trying:
const automation = require('puppeteer');
(async() => {
const browserInstance = await automation.launch();
const newPage = await browserInstance.newPage();
await newPage.goto('https://example-site.com/', {waitUntil: 'load'});
// Fill in the search input
await newPage.focus('#search-input');
await newPage.type('my search term');
// Try to submit the form
await newPage.press('Enter');
// Wait for results
await newPage.waitForNavigation({waitUntil: 'load'});
console.log('Navigation completed:', newPage.url());
browserInstance.close();
})();
What’s the most reliable way to handle form submissions when there’s no submit button to click?
I’ve encountered this exact scenario multiple times and found that page.evaluate() combined with the form’s submit method is usually the most reliable approach. Instead of trying to simulate user interactions, you can directly call the form’s native submit function.
Try replacing your Enter key press with something like:
await newPage.evaluate(() => {
document.querySelector('#search-input').closest('form').submit();
});
This bypasses any potential JavaScript event handlers that might interfere with keyboard simulation. I’ve also had success with page.$eval() when you need to target the form more specifically. The key advantage is that it triggers the actual form submission mechanism rather than relying on simulated user input, which can be inconsistent depending on how the site’s JavaScript is structured.
another trick that worked for me is using page.keyboard.press('Enter') while focused on the input - sometimes page.press() doesnt fire the right events but keyboard method does. also try waiting a bit after typing before hitting enter, some forms need time to setup their listeners
The issue you’re facing is pretty common with modern web applications. What I’ve found works consistently is waiting for the input to be properly registered before attempting submission. Many sites use debounced search handlers that need a moment to bind their event listeners.
Try adding a small delay after typing and then use page.keyboard.press('Enter') instead of page.press(). The keyboard method tends to fire events more reliably in my experience. Also consider wrapping the whole input sequence in a try-catch block and add waitForSelector to ensure the form is fully loaded before interacting with it.
Sometimes the form submission is handled by JavaScript event listeners rather than traditional form submission, so you might need to wait for specific network requests or DOM changes instead of navigation. Check the browser’s network tab to see what actually happens when you submit manually - that’ll give you clues about what to wait for in your automation.