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

const puppeteer = require('puppeteer');

async function drawBoundingBox() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com'); // 替换为你要操作的网页地址

  // 选择要绘制边界框的元素
  const element = await page.$('#target-element'); // 替换为你要绘制边界框的元素选择器

  // 获取元素的位置和大小信息
  const box = await element.boundingBox();

  // 在页面上绘制边界框
  await page.evaluate((box) => {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.left = `${box.x}px`;
    div.style.top = `${box.y}px`;
    div.style.width = `${box.width}px`;
    div.style.height = `${box.height}px`;
    div.style.border = '2px solid red';
    document.body.appendChild(div);
  }, box);

  // 截图保存绘制边界框后的页面
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
}

drawBoundingBox();