在 puppeteer 中按 Enter 按钮答案

【问题标题】：Pressing Enter button in puppeteer在 puppeteer 中按 Enter 按钮
【发布时间】：2018-03-08 14:38:18
【问题描述】：

在 puppeteer 中按 enter 似乎没有任何效果。但是，当我按下其他键时，它会做它应该做的事情。这有效：

await page.press('ArrowLeft');

这不是：

await page.press('Enter');

这是输入的样子：

有什么想法吗？

编辑：我也试过 page.keyboard.down 和 page.keyboard.up 来确定。

【问题讨论】：

或许可以试试'Accept'？
我试过await page.press('Accept')但没有结果:(
Follow this link keys-special，也许不是page.press('Enter') 不起作用，也许你catch page只是听mouseup事件。
你试过await page.press('Return')
我也有这个问题。我正在使用puppeteer.launch({headless: false}); 运行 puppeteer，所以我可以看到发生了什么，并且 ArrowLeft 有效，但 Enter 无效。我检查了 API 文档，它清楚地表明 page.press("Enter") 是执行此操作的方法，但它对我不起作用。

标签： javascript node.js puppeteer

【解决方案1】：

我通常使用page.keyboard.press('Enter'); :) 对我有用。

查看文档here。我认为您应该在 .press 之前使用 .keyboard 以使其正常工作。

【讨论】：

你能详细说明你的答案吗？
不确定要详细说明什么。我认为您应该在 .press 之前添加 .keyboard 以使其正常工作。至少这是我在应用程序中模拟按 Enter 的方式。
@Sid The answer below，在您发表评论一年后添加，包含您可能想要的所有详细信息......

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

使用this site 我注意到page.type 调度beforeinput 和input 事件，但page.press 没有。这可能是一个错误，但幸运的是，发送回车键码 (13) 似乎有效，所以我们现在可以解决它。

【讨论】：

非常感谢@BlackCap，它确实有效！非常聪明！
我不得不使用page.keyboard.press(String.fromCharCode(13));

【解决方案4】：

await page.keyboard.press('Enter');这对我有用

【讨论】：

这行得通。首先确保您的页面已完全加载。

【解决方案5】：

简短的回答，首先附加到输入控件可能是个好主意：

    await page.type('#inp_srch_box', 'add');
    await page.type('#inp_srch_box',String.fromCharCode(13));

长答案...

  cat package.json
  {
    "name": "test-open-login",
    "version": "0.7.9",
    "description": "an example test to test the login of the qto app",
    "main": "test-open-login.test.js",
    "scripts": {
      "test": "mocha --recursive test",
      "server": "http-server src"
    },
    "license": "BSD",
    "devDependencies": {
      "mocha": "5.0.1",
      "puppeteer": "^2.1.0"
    },
    "dependencies": {
      "chai": "^4.2.0",
      "http-server": "^0.12.1",
      "mocha": "5.0.1"
    }
  }

  cat test/test-login.spec.js

  const puppeteer = require('puppeteer');
  async function main(){
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({width: 1200, height: 720})
    await page.goto('https://qto.fi/qto/login', { waitUntil: 'networkidle0' }); 
  // wait until
  await page.type('#email', 'test.anonymous.user@gmail.com');
  //await page.type('#pass', 'secret');
  // click and wait for navigation


  await page.waitFor(1000);
  //await frame.waitFor(1000);
  await Promise.all([
     page.click('#butLogin'),
     page.waitForNavigation({ waitUntil: 'networkidle0' }),
  ]);

    await page.type('#inp_srch_box', 'add');
    await page.type('#inp_srch_box',String.fromCharCode(13));
  }

  main();

【讨论】：

【解决方案6】：

它的page.keyboard.press()

参考：https://pptr.dev/#?product=Puppeteer&version=v3.0.0&show=api-keyboardpresskey-options

在https://github.com/puppeteer/puppeteer/blob/master/src/USKeyboardLayout.js查找键名和键码

【讨论】：