javascript - (Puppeteer) 有没有办法通过 x, y 获取元素查询？

Question

我想通过传递 x,y 坐标来获取元素查询选择器。

或者可能满足坐标的元素很少。

也许我可以做 mouse.click(x, y) 然后获取被点击的元素，但我不希望页面采取任何行动来获取元素的查询。

有可能这样做吗？

标签： javascriptpuppeteer

Answer 1

如果您只需要视口坐标的最顶层元素，您可以尝试DocumentOrShadowRoot.elementFromPoint(). 如果您需要组成一个唯一的选择器，您可以尝试处理来自的元素数组DocumentOrShadowRoot.elementsFromPoint()（在下面的示例中添加更多检查 - 类、ID、属性、子项计数和顺序等）：

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    console.log(await page.evaluate(() => {
      return document.elementFromPoint(100, 100).tagName;
    }));

    console.log(await page.evaluate(() => {
      return document.elementsFromPoint(100, 100)
                     .map(({ tagName }) => tagName).reverse().join(' > ');
    }));

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

DIV
HTML > BODY > DIV