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

75

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

24,187
16
134
150

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
3

@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

43

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

619
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

Puppeteer: How to submit a form?

2 Answers2

Linked