如何在 Puppeteer 中单击并按住

Question

我正在尝试使用 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' })

知道怎么做吗？

Answer 1

在 Puppeteer 中有一些工具可以触发鼠标按住：page.click, mouse.click, mouse.down and mouse.up. page.hover can be useful for positioning the mouse over a selector and mouse.move 可用于基于坐标的定位和实现点击和拖动。

然后，page.evaluate (and family), which lets you run browser code to trigger native mousedown and mouseup events on the target element. If you have difficulty clicking with the Puppeteer functions (for example, due to )，evaluate 是下一个不错的选择。

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

delay <number> Time to wait between mousedown and mouseup in milliseconds. Defaults to 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 秒。

如何在 Puppeteer 中单击并按住

How to click and hold in Puppeteer

javascript

automation

node.js

puppeteer