每个 DOM 节点的屏幕截图

Question

如何为任何站点中的每个 DOM 节点创建屏幕截图？

我尝试使用无头浏览器（puppeteer），它仅在我知道某个元素的 XPath 或 Selector 时才有效。 但是如何才能接收所有元素的 XPath 或 Selector？

async function screenshotDOMElement(opts = {}) {
const padding = 'padding' in opts ? opts.padding : 0;
const path = 'path' in opts ? opts.path : null;
const selector = opts.selector;

if (!selector)
    throw Error('Please provide a selector.');

const rect = await page.evaluate(selector => {
    const element =
     document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (!element)
        return null;
    const {x, y, width, height} = element.getBoundingClientRect();
    console.log (x,y,width,height)
    return {left: x, top: y, width, height, id: element.id};
}, selector);

if (!rect)
    throw Error(`Could not find element that matches selector: ${selector}.`);

return await page.screenshot({
    path,
    clip: {
        x: rect.left - padding,
        y: rect.top - padding,
        width: rect.width + padding * 2,
        height: rect.height + padding * 2
    }
});
}

我还尝试使用HtmlAgilityPack (C#) 并通过 XPath 枚举 HtmlDocument 中的每个节点，但是这个 XPath 不能与 puppeteer 一起使用

我需要使用 puppeteer，因为它是 XPath 或 Selector 进行屏幕截图任务的最佳工具

谁能帮帮我？

Answer 1

使用 puppeteer，您不再需要使用整个页面截图，因为它有 elementHandle.screenshot([options])。您可以执行以下操作：

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://example.com');

// get a list of all elements - same as document.querySelectorAll('*')
const elements = await page.$$('*')

for (let i = 0; i < elements.length; i++) {
  try {
    // get screenshot of a particular element
    await elements[i].screenshot({path: `${i}.png`})
  } catch(e) {
    // if element is 'not visible', spit out error and continue
    console.log(`couldnt take screenshot of element with index: ${i}. cause: `,  e)
  }
}
await browser.close();

请注意，puppeteer 无法获取某些不可见或被其他元素覆盖的元素的屏幕截图等。在这种情况下，您需要捕获错误并继续前进。