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

Question

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

标签： javascriptpuppeteerwebautomation

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"});