Puppeteer Error: Form Submits as Empty After Automation

Other Questions Puppeteer
1

My Puppeteer script fills a form but encounters an empty form error when calculating. Below is an alternative code snippet demonstrating similar form automation:

const autoFill = async () => {
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.launch({ headless: false, slowMo: 60 });
  const page = await browser.newPage();
  await page.goto('https://example.com/formpage');

  const formData = {
    age: '25',
    weight: '75',
    height: '175',
    goal: 'build_muscle',
    gender: 'male',
    bodyFat: '15',
    activity: 'high',
    meals: '4'
  };

  // Choose a preset option
  await page.click('#preset-menu li:nth-child(2)');

  // Confirm selection
  await page.click('#confirmOption');
  await page.waitForTimeout(1500);

  // Input form values
  await page.type('#inputAge', formData.age);
  await page.type('#inputWeight', formData.weight);
  await page.type('#inputHeight', formData.height);

  // Select goal
  if(formData.goal === 'lose_weight') {
    await page.evaluate(() => document.querySelector('input[name="goal"][value="L"]').click());
  } else {
    await page.evaluate(() => document.querySelector('input[name="goal"][value="M"]').click());
  }

  // Choose gender
  await page.evaluate(() => document.querySelector(`input[name='gender'][value='${formData.gender === 'male' ? 'M' : 'F'}']`).click());

  // Trigger calculation
  await page.waitForTimeout(2000);
  await page.click('#computeAction');
  const output = await page.$eval('#resultSection', el => el.innerText);
  console.log(output);
};
autoFill();
2

hey, i had a simlar problem! i found that a little extra wait time after preset selection lets the ui settle before inputting. maybe try a click on the field to secure focus

3

I had a similar hiccup in one of my projects. In my experience, adding explicit waits for the form elements to be fully loaded before any typing actions made a significant difference. Indeed, it is possible that switching presets or other UI actions could trigger a refresh of the form elements, causing early input to be lost. I solved my issue by using page.waitForSelector or even page.waitForTimeout in between the interactions. Adjusting these delays ensured that the data was reliably retained, thus overcoming the empty form error.

4

hey, i fixed it by defocusing the field after typing. maybe form fields get reset if they keep focus. try clickin outside the input box or simulate a blur event right after filling. it helped me avoid that instant form reset.

5

I had a similar issue when automating form submissions with Puppeteer. It turned out that the form fields sometimes did not register the manual input due to the UI not completing its transitions. In my case, I added a combination of explicit delays and focus/blur events to further ensure the browser picked up every keystroke. Instead of assuming the field was ready right away, I waited until I was sure it was fully rendered. This approach helped mitigate race conditions and reliably captured all data before triggering the submit action.

6

My investigation revealed that the recurring form empty submission was due to the interplay of asynchronous events during form rendering. I experienced a similar situation and ultimately decided to incorporate a preliminary check to ensure that all dynamic elements had settled before proceeding with form input actions. In addition to explicit waits, I applied an initial page.hover on the input fields to force any pending event handlers into execution mode. This helped synchronize the UI state before filling in the inputs, ensuring the data entered was not inadvertently reset.