Puppeteer按钮按下

Question

根据https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepresskey-options，您可以使用Puppeteer模拟按键操作。

以下是我的操作：

// 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");

按钮按下后没有任何反应，基本上被忽略了。

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

- elena

---

也许尝试提交表单 const form = await page.$('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); await form.evaluate(form => form.submit()); - codtex

会尝试一下，谢谢@codtex！ - elena

我已经尝试过了。它似乎做了一些事情（结果基本上是页面重新加载）。然而，所需的表单没有被提交，我也没有看到任何结果。 - elena

抱歉Elena，我不是Puppeteer的专家，这是我第一次查看它的文档，但你的任务目的是什么 - 你想实际提交表单吗？还是找到并点击提交按钮？-可能有一个JavaScript在执行搜索而不重新加载页面。 - codtex

@codtex 确定，我明白了。我只是在尝试搜索结果。有一个搜索框，您可以输入搜索词。当按下回车键时，它应该返回结果。 - elena

Answer 1

我终于弄清楚了。我在同一个表单中发现了一个类型为submit的锚元素，然后点击它，表单就被提交了。

以下是我使用的代码：

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

您也可以使用$eval方法代替evaluate:

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

- elena

---

感谢分享！ - Alferd Nobel

Answer 2

也许另一个选择是：

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

利用其虚拟键盘API。更多信息请参见此处。

- Roger G

Answer 3

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

这将会点击Google上的提交按钮。对于你的页面，找出元素或按钮的id，然后使用它。

- MSDeen

---

这是不好的编程实践，你应该先返回元素，然后在下一行代码中使用puppeter的click函数单击它。 - EugenSunic

Answer 4

你可以使用xpath创建自己的元素。将Original Answer翻译成"最初的回答"。

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

在上面的代码中，我们使用"$x"来检索一个数组中的所有元素，这就是为什么在下一行代码中我们使用"0"作为索引的原因。如果您有多个对象，可以使用"IF"条件和一个循环来搜索正确的空间并使用正确的对象。另一种方法是，如果您只有几个属性，您也可以使用类似的方式来清晰简单地识别您的对象。"Original Answer"翻译成"最初的回答"。

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

最初的回答：您可以在不久的将来减少维护复杂性。

- Raknarrok Prototype

Answer 5

目前为止，page.press()不是有效的Puppeteer方法。使用page.press()会导致以下错误：

运行代码时出错。TypeError: page.press不是一个函数

你可能是想要使用page.keyboard.press()。

请参考以下全面列表，了解如何在Puppeteer中模拟Enter键：

---

page.keyboard.press():

你可以使用 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():

此外，您可以使用 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():

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

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

page.keyboard.type():

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

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

page.keyboard.sendCharacter():

另一种可选方法是使用page.keyboard.sendCharacter() 方法：

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

page.keyboard.down() / 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');

- Grant Miller

Answer 6

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

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

这个API的解释在这里。

- Alperen Turkoz