Puppeteer Button Press

Viewed 93732

According to https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepresskey-options, you can simulate the pressing of a keyboard button with Puppeteer.

Here's what I do:

// First, click the search button
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
// Focus on the input field
await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
// Enter some text into the input field
await page.type("Bla Bla");
// Press Enter to search -> this doesn't work!
await page.press("Enter");

The pressing of the button doesn't produce anything. It's basically ignored.

How can I simulate the Enter key to submit the form?

6 Answers

I've figured it out finally. I found inside that same form an anchor element whose type was submit. I then clicked on it and the form was submitted.

Here's the code I've used:

const form = await page.$('a#topbar-search');
await form.evaluate( form => form.click() );

You can also use the $eval method instead of evaluate:

await page.$eval( 'a#topbar-search', form => form.click() );

Perhaps another option could be:

await page.keyboard.press('Enter');

Leveraging its virtual keyboard API. More info info here

await page.$eval('input[name=btnK]', el => el.click());

this will click the submit button in google. As for your page find out the elements or buttons id and then use it.

You can create your own element using xpath.

const browser = await puppeteer.launch();
const page = await browser.newPage();
const txtObject = await page.$x('.//input[type="text"]');
await txtObject[0].type('bla bla bla');

In this above code we use "$x" to retrieve all the elements in one array, thats why we use in "0" as index in the next code line. If you have more than one object you can use a "IF" condition and one loop to search the correct space and use the correct object. Other way if you have a few attributes, you also can use something like that to have a clean and easy way to identify your object

await page.click('input[type="submit"]'); // With type
await page.click('input[class="ng-newstyle"]'); //With class attribute

And you can reduce the maintenance complexity in the near future.

At the time of writing, page.press() is not a valid Puppeteer method. Using page.press() results in the following error:

Error running your code. TypeError: page.press is not a function

You are likely referring to page.keyboard.press().

See below for a comprehensive list on how to emulate the Enter key in Puppeteer:


page.keyboard.press():

You can use page.keyboard.press() to simulate pressing the enter key. Any of the following options should work:

await page.keyboard.press('Enter'); // Enter Key
await page.keyboard.press('NumpadEnter'); // Numeric Keypad Enter Key
await page.keyboard.press('\n'); // Shortcut for Enter Key
await page.keyboard.press('\r'); // Shortcut for Enter Key

elementHandle.press():

Additionally, you can use use a combination of page.$() and elementHandle.press() to focus on an element before pressing enter:

await (await page.$('input[type="text"]')).press('Enter'); // Enter Key
await (await page.$('input[type="text"]')).press('NumpadEnter'); // Numeric Keypad Enter Key
await (await page.$('input[type="text"]')).press('\n'); // Shortcut for Enter Key
await (await page.$('input[type="text"]')).press('\r'); // Shortcut for Enter Key

page.type():

Furthermore, you can use page.type():

await page.type(String.fromCharCode(13));

page.keyboard.type():

Likewise, you can use page.keyboard.type():

await page.keyboard.type(String.fromCharCode(13));

page.keyboard.sendCharacter():

Another alternative method would be to use the page.keyboard.sendCharacter() method:

await page.keyboard.sendCharacter(String.fromCharCode(13));

page.keyboard.down() / page.keyboard.up():

You can also use a combination of page.keyboard.down() and page.keyboard.up():

// Enter Key
await page.keyboard.down('Enter');
await page.keyboard.up('Enter');

// Shortcut for Enter Key
await page.keyboard.down('NumpadEnter');
await page.keyboard.up('NumpadEnter');

// Shortcut for Enter Key
await page.keyboard.down('\n');
await page.keyboard.up('\n');

// Shortcut for Enter Key
await page.keyboard.down('\r');
await page.keyboard.up('\r');

You can go with the below code to click acting to the buttons.

const searchButtonNodeSelector = ".submit-button";
await page.click(searchButtonNodeSelector);

This API is explained here.

Related