Search code examples
javascriptxpathpuppeteerserver-side-renderingcursor-position

Does Puppeteer support selecting elements by rendered coordinate location on a page?


I'd like to render a page and run an algorithm to visually determine what locations have elements I want to select attributes of. Puppeteer seems to support outputting a screenshot of the page and mouse move events by (x, y) but I don't see any methods for selecting an element for inspection by (x, y).

Is there a method to figure what element in the page is at a certain coordinate? Stacked elements will not be an issue for my use case as the desired element should be reachable via xpath at that point.

If not directly supported, is it feasible to use mouse.move(x, y[, options]) to move the cursor to the desired position and somehow "tag" the element beneath the cursor with an predefined searchable attribute (ex: <element treasure=yes>) that can be found with xpath? I am thinking page.evaluate(pageFunction[, ...args]) could be used to inject a javascript function to dynamically tag the current element beneath the cursor.


Solution

  • You can easily do that with DocumentOrShadowRoot.elementFromPoint()

    await page.evaluateHandle((x,y) => document.elementFromPoint(x,y), x,y);
    

    This will give you the topmost element in that coordinate.