26

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?

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
elena
  • 3,740
  • 5
  • 27
  • 38
  • Maybe try to submit the form `const form = await page.$('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); await form.evaluate(form => form.submit());` – codtex Sep 21 '17 at 11:39
  • Will try that, thanks @codtex! – elena Sep 21 '17 at 11:46
  • I've tried. It seems to do something (the result is that the page reloads basically). However, the desired form isn't submitted and I do not see any results. – elena Sep 21 '17 at 11:56
  • Sorry Elena I'm not an expert on puppeteer, event it was my first time to check it's documentation, but what is the purpose of your task - do you want to actually submit the form ? or maybe find and click the submit button ? - there might be a javascript that is performing the search without reloading the page – codtex Sep 21 '17 at 12:06
  • @codtex sure, I understand. Well, I am just trying to get results for a search. There's a search input box where you enter the search term. When the Enter button is pressed, it should return the results. – elena Sep 21 '17 at 12:10

6 Answers6

44

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() );
elena
  • 3,740
  • 5
  • 27
  • 38
10

Perhaps another option could be:

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

Leveraging its virtual keyboard API. More info info here

Roger G
  • 181
  • 2
  • 2
10
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.

vezunchik
  • 3,669
  • 3
  • 16
  • 25
MSDeen
  • 181
  • 1
  • 4
  • this is bad practice, you should return the element and then in the next line of code click on it using puppeter click function – EugenSunic Mar 06 '20 at 12:30
2

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.

Raknarrok Prototype
  • 71
  • 5
1

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');
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
1

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.

Alperen Turkoz
  • 29
  • 2