Puppeteer: How to submit a form?

Javascriptnode.jsGoogle Chrome-HeadlessPuppeteer

Javascript Problem Overview


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();

})();

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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());

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiondocta_faustusView Question on Stackoverflow
Solution 1 - JavascriptGrant MillerView Answer on Stackoverflow
Solution 2 - JavascriptNam Mai AnhView Answer on Stackoverflow