How to click element using x/y coordinates with puppeteer?

user_13120452 0
Viewed 9625

I've been trying to figure out how to click a button on a page using x and y coordinates in puppeteer but I haven't been able to get it working. This is what i'm currently using.

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

No errors occur, it simply isn't clicking on any element. So my guess is i'm not finding it's position correctly.

I'm using the default viewport in puppeteer which is 800px by 600px. This is what i'm doing to manually try and locate the x and y of the button in the DOM.

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

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

So I add it to the click event.

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

And nothing happens. What am I doing wrong?

puppeteer node.js javascript
1 Answers

You can find the iframe and its coordinates, and then add the offset of the element you want inside this iframe, before clicking:

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();
})();
user_19137290
Related