带有光标图标的 Puppeteer 屏幕截图

Question

我们正在使用 puppeteers page.screenshot 函数 (https://devdocs.io/puppeteer/index#pagescreenshotoptions) 但生成的捕获图像不显示当前鼠标光标图标。有没有办法告诉 puppeteer 在捕获的屏幕截图中包含鼠标光标图标？

Answer 1

安装鼠标助手.js

您可以使用install-mouse-helper.js 在页面中注入一个框，该框在 Puppeteer 中随鼠标移动并在屏幕截图中可见：

const puppeteer = require('puppeteer');
const {installMouseHelper} = require('./install-mouse-helper');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await installMouseHelper(page); // Install Mouse Helper

  await page.goto('https://example.com/');

  await page.mouse.move(100, 200);
  await page.mouse.down();
  await page.mouse.move(500, 250);

  await page.screenshot({
    path: 'example.png',
  });

  await browser.close();
})();