Puppeteer: How to submit a form?

Question

Using puppeteer, how could you programmatically submit a form? So far I've been able to do this using page.click('.input[type="submit"]') if the form actually includes a submit input. But for forms that don't include a submit input, focusing on the form text input element and using page.press('Enter') doesn't seem to actually cause the form to submit:

const puppeteer = require('puppeteer');

(async() => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://stackoverflow.com/', {waitUntil: 'load'});
    console.log(page.url());

    // Type our query into the search bar
    await page.focus('.js-search-field');
    await page.type('puppeteer');

    // Submit form
    await page.press('Enter');

    // Wait for search results page to load
    await page.waitForNavigation({waitUntil: 'load'});


    console.log('FOUND!', page.url());

    // Extract the results from the page
    const links = await page.evaluate(() => {
      const anchors = Array.from(document.querySelectorAll('.result-link a'));
      return anchors.map(anchor => anchor.textContent);
    });
    console.log(links.join('\n'));
    browser.close();

})();

Grant Miller · Accepted Answer · 2018-11-08T16:22:16.430

81

If you are attempting to fill out and submit a login form, you can use the following:

await page.goto('https://www.example.com/login');

await page.type('#username', 'username');
await page.type('#password', 'password');

await page.click('#submit');

await page.waitForNavigation();

console.log('New Page URL:', page.url());

edited Nov 08 '18 at 16:22

answered Jul 31 '18 at 01:15

Grant Miller

27,532
16
147
165

2

Keep in mind that if the inputs already have content like in the case of updating a form, this method will prepend the data already in the input field. – mckenna Jul 11 '19 at 19:29
4

@mckenna "Another interesting solution is to click the target field 3 times so that the browser would select all the text in it and then you could just type what you want:" `await input.click({ clickCount: 3 })` : https://stackoverflow.com/a/52633235/556169 – Eray Sep 24 '20 at 11:09

Nam Mai Anh · Answer 2 · 2018-01-11T03:02:32.350

44

Try this

const form = await page.$('form-selector');
await form.evaluate(form => form.submit());

For v0.11.0 and laters:

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

edited Jan 11 '18 at 03:02

answered Aug 20 '17 at 18:29

Nam Mai Anh

629
8
9

1

Thanks! Looks like the issue was not using `.evaluate()` on the form element - didn't know you could do that. – docta_faustus Aug 20 '17 at 23:03
1

@NamMaiAnh i am getting TypeError: form.evaluate is not a function – redochka Oct 26 '17 at 08:50
1

@redochka May you show me the code? Have you determined if `form` was `null` or not? – Nam Mai Anh Oct 26 '17 at 09:09
@NamMaiAnh 'ElementHandle' do not have the 'evaluate' method. – realappie Jan 10 '18 at 21:38
@Abdel I have updated the answer for v0.11.0 and laters. Thank you! – Nam Mai Anh Jan 11 '18 at 03:03
2

`await page.evaluate(form => form.submit(), form);` is the correct syntax. – Johnny Vietnam Oct 11 '18 at 05:03
Also, it fails when you use just `await page.type('puppeteer');` but add this to the selection `await page.type('.js-search-field', 'puppeteer');` – wadleo Nov 20 '18 at 06:55

score 2 · Answer 3 · answered Jul 26 '22 at 17:17

I was scraping a SPA, and I had to use waitForNetworkIdle since the form submit was not triggering a page navigation event. Instead it submitted data to the server, and updated the DOM of the page which was already loaded.

const [response] = await Promise.all([        
    page.waitForNetworkIdle(),
    page.click('#form-submit-button'),
]);

When to use `waitForNetworkIdle`

I suspect that if you open a normal web browser, submit the form, and look to see if the page URL has changed or not. If it has not changed, you should use waitForNetworkIdle.

Also, take this advice with a grain of salt, I've only been using puppeteer for an hour.

This comment marks the date of my first up-vote on this answer. I am so glad I was able to help solve your problem. — Walter Stabosz, Oct 05 '22 at 16:19

Puppeteer: How to submit a form?

3 Answers3

When to use `waitForNetworkIdle`

Linked

Puppeteer: How to submit a form?

3 Answers3

When to use waitForNetworkIdle

Linked

When to use `waitForNetworkIdle`