Javascript 人偶按钮按下

Puppeteer Button Press

提问by elena

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.

根据https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepresskey-options，您可以使用 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?

如何模拟回车键提交表单？

回答by elena

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:

您还可以使用 $eval 方法而不是评估：

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

回答by S.A.MOHAMED SHARUK DEEN DEEN

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.

这将点击谷歌中的提交按钮。至于您的页面，找出元素或按钮 id 然后使用它。

回答by Roger G

Perhaps another option could be:

也许另一种选择是：

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

Leveraging its virtual keyboard API. More info info here

利用其虚拟键盘 API。更多信息信息在这里

回答by Raknarrok Prototype

You can create your own element using xpath.

您可以使用 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

在上面的代码中，我们使用“$x”来检索一个数组中的所有元素，这就是为什么我们在下一行代码中使用“0”作为索引。如果您有多个对象，您可以使用“IF”条件和一个循环来搜索正确的空间并使用正确的对象。其他方式如果你有一些属性，你也可以使用类似的东西来有一个干净和简单的方法来识别你的对象

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.

您可以在不久的将来降低维护复杂性。

回答by Grant Miller

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

在写这篇文章的时候，page.press()是不是有效的方法木偶。使用page.press()导致以下错误：

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

运行您的代码时出错。类型错误：page.press 不是函数

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

您可能指的是page.keyboard.press().

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

有关如何在 Puppeteer 中模拟 Enter 键的完整列表，请参见下文：

---

---

page.keyboard.press():

page.keyboard.press():

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

您可以使用page.keyboard.press()来模拟按下回车键。以下任何选项都应该有效：

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

elementHandle.press():

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

此外，还可以使用使用的组合page.$()，并elementHandle.press()按下进入前一个元素上的焦点：

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

此外，您可以使用page.type()：

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

page.keyboard.type():

page.keyboard.type():

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

同样，您可以使用page.keyboard.type()：

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

page.keyboard.sendCharacter():

page.keyboard.sendCharacter():

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

另一种替代方法是使用该page.keyboard.sendCharacter()方法：

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

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

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

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

您还可以使用的组合page.keyboard.down()和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');

回答by Alperen Turkoz

You can go with the below code to clickacting to the buttons.

您可以使用以下代码对click按钮进行操作。

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

This API is explained here.

此处解释了此 API 。