headless false - 始终关注地址栏答案

【问题标题】：headless false - focus always on address barheadless false - 始终关注地址栏
【发布时间】：2021-07-28 12:29:14
【问题描述】：

我正在使用带有headless=false 选项的 puppeteer，以便让用户在表单中键入一些详细信息，然后以编程方式读取结果。我希望光标/焦点在页面加载时位于第一个输入字段上，但焦点始终在地址栏上。有没有办法在页面内移动光标/焦点？

我已经尝试过await page.focus(selector)。请查找以下示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false});
  const page = await browser.newPage();
  let selector = ".w3-white.w3-padding.notranslate>form>input[name='firstname']";
  await page.goto('https://www.w3schools.com/html/html_forms.asp');
  await page.waitForSelector(selector,{waitUntil :"networkidle2"});
  await page.focus(selector);
  await page.type(selector,"aaa");

  //await browser.close();
})();

我希望在页面加载后，用户将能够在输入字段中输入内容，而不必先“移动”到该字段中（通过鼠标或标签）。

【问题讨论】：

标签： node.js puppeteer

【解决方案1】：

您遇到的问题是您将光标设置在页面内部，但浏览器本身的焦点仍然在地址栏上。

要让浏览器关注页面本身，您需要调用page.bringToFront()，它将浏览器的焦点设置到选项卡。您应该在创建这样的页面后立即执行此操作：

const page = await browser.newPage();
await page.bringToFront();

此外，正如在另一个答案中已经指出的那样，您为 page.waitForSelector 函数提供了无效选项。这只是被 puppeteer 忽略（与您的问题无关），但应该删除。

【讨论】：

非常感谢！这个问题困扰了我多年，终于找到了正确的答案。

【解决方案2】：

有一点需要纠正，waitUntil 是page.goto 的一个选项：

await page.goto('https://www.w3schools.com/html/html_forms.asp',{waitUntil :"networkidle2"});

有了这个，你的例子可以在 puppeteer 1.11 和 node 8.6 上正常工作

【讨论】：

【解决方案3】：

我调用了 mouse.click() 函数将光标从地址栏移动到页面。

await page.mouse.click(0, 0);

使用 browser.newPage() 的方式与我预期的一样，但这种情况会占用更多内存。所以我使用了 click() 函数。

【讨论】：