如何使用Puppeteer通过x/y坐标点击元素？

Question

我一直在尝试使用puppeteer通过x和y坐标点击页面上的按钮，但是我无法让它正常工作。这是我目前正在使用的代码：

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

没有任何错误出现，它根本没有点击任何元素。所以我猜测我没有正确地找到它的位置。

我在puppeteer中使用默认的视口大小，即800px x 600px。下面是我手动尝试在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'})

但是什么也没有发生。我做错了什么？

- srb633

---

那实际上就是我目前正在使用的脚本，但我无法使其工作。 - srb633

你能分享一下你正在使用的页面的 URL 吗？ 注意：如果你正在使用我回答中的 clickOnElement 函数，在你的情况下，不需要指定 x/y 参数，它将会在指定元素的中心位置进行点击。只需输入 clickOnElement(myElem); 即可。 - blex

我不能与您分享我正在使用的网站，但让我们以 https://www.ultrafineonline.com/ 为例。假设我想要点击页面顶部的“登录”按钮，并使用以下代码获取其 x 和 y 坐标：document.getElementsByClassName("yscp_link")[0].getBoundingClientRect().x，document.getElementsByClassName("yscp_link")[0].getBoundingClientRect().y。请在 DOM 中尝试一下，它是否给出了正确的坐标以便点击它？ - srb633

你真的“需要”使用坐标吗？还是你可以采用简单的方法？这个可以工作：https://pastebin.com/embed_iframe/ZhmH1wUX - blex

看起来除非在同一域中，否则您无法单击iframe中的内容，或者您需要禁用安全性。这是一个已禁用安全性的工作示例：https://pastebin.com/embed_iframe/4cQVymsH - blex

Answer 1

你可以找到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();
})();

- blex