Puppeteer: How to submit a form?
58,509
Solution 1
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());
Solution 2
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());
![docta_faustus](https://i.stack.imgur.com/mt9Xp.jpg?s=256&g=1)
Author by
docta_faustus
Updated on November 09, 2020Comments
-
docta_faustus over 3 years
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 usingpage.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(); })();
-
docta_faustus almost 7 yearsThanks! Looks like the issue was not using
.evaluate()
on the form element - didn't know you could do that. -
redochka over 6 years@NamMaiAnh i am getting TypeError: form.evaluate is not a function
-
Nam Mai Anh over 6 years@redochka May you show me the code? Have you determined if
form
wasnull
or not? -
realappie over 6 years@NamMaiAnh 'ElementHandle' do not have the 'evaluate' method.
-
Nam Mai Anh over 6 years@Abdel I have updated the answer for v0.11.0 and laters. Thank you!
-
Johnny Vietnam over 5 years
await page.evaluate(form => form.submit(), form);
is the correct syntax. -
wadleo over 5 yearsAlso, it fails when you use just
await page.type('puppeteer');
but add this to the selectionawait page.type('.js-search-field', 'puppeteer');
-
mckenna almost 5 yearsKeep 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.
-
Eray almost 4 years@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 })
: stackoverflow.com/a/52633235/556169