Как нажать на указанную c часть элемента кукловода

Question

Скажем, у меня есть элемент шириной 500 пикселей, который называется «селектор». Как бы я go примерно, например, нажал на пиксель 400?

Согласно документам кукловода, .hover () будет зависать над серединой элемента. И когда я тестировал его с использованием кода вроде

const selector = await page.$('selector');
await selector.hover();
await selector.click();

, он точно щелкнул прямо на пикселе 250. Так что, очевидно, существует код, чтобы это произошло. Я просмотрел документы кукловода, но не смог найти нужный мне исходный код. Кто-нибудь может помочь?

Answer 1

Puppeteer предоставляет метод для щелчка на указанном c пикселе на странице (Mouse.click(x, y)). Вы можете рассчитать, где это относительно позиции вашего элемента:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://yoursite.com");

  const elem = await page.$("#my-element");
  await clickOnElement(elem, 400);

  await page.screenshot({ path: "example.png" });

  await browser.close();

  // Clicks on an element at position x,y
  async function clickOnElement(elem, x = null, y = null) {
    const rect = await page.evaluate(el => {
      const { top, left, width, height } = el.getBoundingClientRect();
      return { top, left, width, height };
    }, elem);

    // Use given position or default to center
    const _x = x !== null ? x : rect.width / 2;
    const _y = y !== null ? y : rect.height / 2;

    await page.mouse.click(rect.left + _x, rect.top + _y);
  }
})();