javascript - 如何在 Puppeteer 中单击并按住

Question

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

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 和 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 <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(async () => await browser.close())
;

输出是这样的

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

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