如何在 Puppeteer 中单击并按住答案

【问题标题】：How to click and hold in Puppeteer如何在 Puppeteer 中单击并按住
【发布时间】：2022-04-10 06:43:54
【问题描述】：

我正在尝试使用 Puppeteer 单击并按住。我尝试在while 循环中使用page.click，但没有成功。

let browserURL = `http://127.0.0.1:9222`;

let browser = await puppeteer.connect({ browserURL, defaultViewport: null });

const page = await browser.newPage();
while (pageContent.includes("hold")) {
  await page.click("div")
}

我也试过这个：

await page.mouse.click(132, 103, { button: 'left' })

任何想法如何做到这一点？

【问题讨论】：

我相信你可以使用mouse.down和mouse.up。不过我自己从未尝试过。

标签： javascript node.js automation puppeteer

【解决方案1】：

在 Puppeteer 中有一些工具可以触发鼠标按住：page.click、mouse.click、mouse.down 和 mouse.up。 page.hover 可用于将鼠标定位在选择器上，mouse.move 可用于基于坐标的定位和实现点击和拖动。

然后，有page.evaluate（和家族），它允许您在目标元素上运行浏览器代码到trigger native mousedown and mouseup events。如果您在点击 Puppeteer 功能时遇到困难（例如，由于visibility issues），evaluate 是一个不错的下一个尝试选项。

您选择哪种方法取决于您的用例。如果您使用.click() 调用（这些是page.hover、mouse.move()、mouse.down() 和mouse.up() 上的便捷包装器），您需要在选项对象上设置delay 属性以模拟保持，文档将其描述为

delay mousedown 和 mouseup 之间的等待时间，以毫秒为单位。默认为 0。

下面是关于以下按钮的概念证明：

const hms = () => ("" + Date()).slice(16, 24);
const btnEl = document.querySelector("button");
btnEl.addEventListener("mousedown", e => {
  document.querySelector("ul").innerHTML +=
    `<li>mousedown at ${hms()}</li>`
  ;
});
btnEl.addEventListener("mouseup", e => {
  document.querySelector("ul").innerHTML +=
    `<li>mouseup at ${hms()}</li>`
  ;
});

<button>click and hold me</button>
<ul></ul>

const puppeteer = require("puppeteer");

let browser;
(async () => {
  const html = `
    <button>click and hold me</button>
    <ul></ul>
    <script>
      const hms = () => ("" + Date()).slice(16, 24);
      const btnEl = document.querySelector("button");
      btnEl.addEventListener("mousedown", e => {
        document.querySelector("ul").innerHTML +=
          \`<li>mousedown at \${hms()}</li>\`
        ;
      });
      btnEl.addEventListener("mouseup", e => {
        document.querySelector("ul").innerHTML +=
          \`<li>mouseup at \${hms()}</li>\`
        ;
      });
    </script>
  `;
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  await page.setContent(html);
  await page.click("button", {delay: 5000});
  await page.waitForFunction(() => 
    document.querySelector("ul").innerText.includes("mouseup")
  );
  console.log(await page.$eval("ul", el => el.innerText));
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

输出类似于

mousedown at 12:53:23
mouseup   at 12:53:28

这表明鼠标在按钮上按住了 5 秒。

【讨论】：