Automating form submission in Puppeteer: What's the best approach?

Other Questions Puppeteer
1

Hey folks! I’m trying to figure out how to submit forms using Puppeteer. I’ve had some luck with page.click('.input[type="submit"]') when there’s a submit button. But what about forms without one? I tried focusing on the text input and using page.press('Enter'), but it’s not working. Here’s a quick example of what I’ve tried:

const automate = async () => {
  const browser = await launchBrowser();
  const tab = await browser.newTab();
  await tab.navigate('https://example.com');
  console.log(tab.currentUrl());

  await tab.focus('#search-box');
  await tab.type('automation');

  await tab.pressKey('Enter');

  await tab.waitForPageLoad();

  console.log('Results:', tab.currentUrl());

  const resultTitles = await tab.evaluate(() => {
    return Array.from(document.querySelectorAll('.result-title')).map(el => el.textContent);
  });
  console.log(resultTitles.join('\n'));
  browser.close();
};

automate();

Any ideas on how to make this work for all types of forms? Thanks in advance!

2

I’ve been working with Puppeteer for a while now, and I’ve found that using the page.$eval() method can be quite effective for form submissions. It allows you to target specific elements and trigger events directly. Here’s an approach I’ve used successfully:

await page.$eval('form', form => form.submit());

This method works well for most forms, regardless of whether they have a submit button or not. If you’re dealing with more complex forms or single-page applications, you might need to combine this with a wait for navigation:

await Promise.all([
  page.$eval('form', form => form.submit()),
  page.waitForNavigation({ waitUntil: 'networkidle0' })
]);

In my experience, this approach has been more reliable than relying on button clicks or key presses. It directly triggers the form’s submit event, which is how most forms are designed to work. Just make sure to adjust the selector to match your specific form if needed.

3

I’ve encountered similar challenges with form submissions in Puppeteer. One approach that’s worked well for me is using the page.evaluate() method to directly trigger the form submission event. Here’s an example:

await page.evaluate(() => {
  document.querySelector('form').submit();
});

This method bypasses the need for a submit button and works for most form types. If you’re dealing with dynamic forms or single-page applications, you might need to wait for navigation or network idle after submission:

await Promise.all([
  page.evaluate(() => document.querySelector('form').submit()),
  page.waitForNavigation({ waitUntil: 'networkidle0' })
]);

Remember to adjust selectors based on your specific form structure. This approach has been quite reliable in my automation projects, handling various form types without much hassle.

4

hey man, i’ve had some luck with page.evaluate(() => document.forms[0].submit()). it works for most forms, even without submit buttons. just make sure to wait for the page to load after submitting. you might need to tweak it depending on your specific form, but its a good starting point.