如何使用 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"});