(Кукольник) Есть ли способ получить запрос элемента по x, y?

Question

Я хотел бы получить селектор запроса элементов, передавая координаты x, y.

Или, может быть, несколько элементов, которые удовлетворяют координатам.

Может быть, я могу сделать mouse.click (x, y) и затем нажмите элемент, но я не хочу, чтобы страница выполняла какие-либо действия, просто получите запрос элемента.

Есть ли возможность сделать это?

Answer 1

Если вам нужен самый верхний элемент по координатам области просмотра, вы можете попробовать DocumentOrShadowRoot.elementFromPoint().Если вам нужно создать уникальный селектор, вы можете попробовать обработать массив элементов из DocumentOrShadowRoot.elementsFromPoint() (добавьте больше проверок в приведенный ниже пример - классы, идентификаторы, атрибуты, количество детей и порядок и т. Д.):

'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

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))

Вы можете сделать что-то подобное в своем вызове evaluate в Puppeteer.