（Puppeteer）有没有一种方法可以通过x，y获取元素查询？

Question

我希望能够通过传递x,y坐标来获取元素的查询选择器。

或者可能有几个满足坐标的元素。

也许我可以使用mouse.click(x, y)然后获取点击的元素，但我不想让页面执行任何操作，只是获取元素的查询选择器。

有可能吗？

- ROKIKOKI

---

可能是检索HTML元素的位置（X，Y）的重复问题。 - Seblor

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

- vsemozhebuty

---

有可能获取类似这样的内容吗？ #productInfo > div > div > table > tbody > tr:nth-child(1) - ROKIKOKI

我不知道有任何自动化的方法来做这件事。你可以扩展.map()函数中的功能，添加一些对id、类名和具有相同标签名称的兄弟元素的检查，并通过结果放大返回的字符串。 - vsemozhebuty

我已在协议存储库中提问（https://github.com/ChromeDevTools/devtools-protocol/issues/158）。在一个旧的邮件组问题中（https://groups.google.com/d/topic/chrome-debugging-protocol/ZhmzuBNnZoQ/discussion），建议重新实现`Elements.DOMPath.cssPath`函数（https://github.com/ChromeDevTools/devtools-frontend/blob/f97c852c172db4904c2a0b2c4cef93f2ebe5068f/front_end/elements/DOMPath.js#L23）来自devtolls代码。 - vsemozhebuty

Answer 2

首先，您需要考虑可能会在同一位置获得许多元素，包括主HTML元素。

首先，您需要获取所有元素：

最初的回答

Array.prototype.slice.call(document.getElementsByTagName("*"))

然后，我们知道每个元素都有一个名为getClientRects的函数，它将返回一个“框”的数组。基于此，我们可以过滤出所有在所需坐标上具有一个框的元素：最初的回答

var x = 150;
var y = 1250;
Array.prototype.slice.call(document.getElementsByTagName("*")).filter(e =>
     Array.prototype.slice.call(e.getClientRects()).find(rect => 
         rect.top <= x && rect.bottom >= x && rect.left <= y && rect.right >= y))

你可以在Puppeteer的evaluate调用中执行类似这样的操作。"Original Answer"翻译成"最初的回答"。

- hardkoded