如何使用Puppeteer在元素上绘制边界框

Question

我是Puppeteer和JS的新手，但我想知道如何在网页上找到一个元素并在其周围绘制一个边框，因此，如果我进行屏幕截图，该框将是可见的（我想要整个屏幕截图）页面，但还希望看到边界框。

Answer 1

此代码将在您的问题中添加一个红色边框并对其进行截图。

await page.goto("https://stackoverflow.com/questions/55225525/how-to-draw-a-bounding-box-on-an-element-with-puppeteer");
const element = await page.$(".question");
await page.evaluate(el => el.style.border = "5px solid red", element);
await element.screenshot({ path: "./question.png"});