Puppeteer按钮按下

时间:2017-09-21 11:35:53

标签: javascript node.js puppeteer

根据https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepresskey-options,您可以模拟用木偶操纵者按下键盘按钮。

这就是我的所作所为:

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

按下按钮不会产生任何结果。它基本上被忽略了。

6 个答案:

答案 0 :(得分:9)

我终于弄明白了。我在同一个表单中找到了一个类型为submit的锚元素。然后我点击它并提交表格。

以下是我使用过的代码:

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

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

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

答案 1 :(得分:1)

也许另一个选择可能是:

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

利用其虚拟键盘API。更多信息info here

答案 2 :(得分:1)

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

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

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

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

答案 3 :(得分:1)

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

这将单击google中的“提交”按钮。至于您的页面,请找出元素或按钮ID,然后使用它。

答案 4 :(得分:1)

在撰写本文时,page.press() 不是有效的Puppeteer方法。使用page.press()会导致以下错误:

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

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

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


page.keyboard.press():

您可以使用page.keyboard.press()模拟按下Enter键。以下任何选项均应起作用:

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()来组合元素,然后按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():

此外,您可以使用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');

答案 5 :(得分:0)

您可以使用以下代码来click对按钮起作用。

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

此API的说明here