如何使用 puppeteer 使用 x/y 坐标单击元素？

我一直在尝试弄清楚如何使用 puppeteer 中的 x 和 y 坐标单击页面上的按钮，但我无法让它工作。这就是我目前正在使用的。

await page.mouse.click(x, y, {button: 'left'})

没有发生错误，它只是没有单击任何元素。所以我的猜测是我没有找到正确的位置。

我在 puppeteer 中使用默认视口，大小为 800 像素 x 600 像素。这就是我手动尝试在 DOM 中找到按钮的 x 和 y 的方法。

document.getElementsByClassName("classname")[0].getBoundingClientRect().x
> 90.125

document.getElementsByClassName("classname")[0].getBoundingClientRect().y
> 128

所以我将它添加到点击事件中。

await page.mouse.click(90.125 , 128, {button: 'left'})

但什么也没发生。我究竟做错了什么？

您可以找到 iframe 及其坐标，然后在该 iframe 内添加所需元素的偏移量，然后再单击：

const puppeteer = require("puppeteer");
 
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
 
  await page.goto("https://example.com/page_with_frame", {waitUntil: 'networkidle0'});
 
  // Find the iframe
  const frame = await page.waitForSelector("iframe");
  // Find its coordinates
  const rect = await page.evaluate(el => {
    const {x, y} = el.getBoundingClientRect();
    return {x, y};
  }, frame);
 
  // Values found manually by doing 
  // `document.querySelector('.yscp_link').getBoundingClientRect()`
  // in the dev console. Add 5 to them, because it's the top left corner
  const offset = {x: 213 + 5, y: 11 + 5};
 
  // Click
  await page.mouse.click(rect.x + offset.x, rect.y + offset.y);
 
  await frame.waitForNavigation({
    waitUntil: 'networkidle2',
  });
 
  await page.screenshot({ path: "example.png" });
 
  await browser.close();
})();