制作屏幕截图时 Puppeteer 和 Playwright chrome headful bug

Question

我目前正在开发一个 node.js 脚本，它需要使用 Puppeteer 启动一个 headful chromium 实例，然后每 3 秒对页面进行一次屏幕截图，这是我的代码：

const puppeteer = require('puppeteer');

async function init (){
 const browser = await puppeteer.launch({headless: true});
 const page = await browser.newPage();
 await page.goto('https://example.com');
 screenshot(page)
};

async function screenshot(page){

 let buffer = await page.screenshot();
 let imageBuffer = buffer.toString('base64');
 // save imageBuffer to database
 setTimeout(screenshot, 3000, page)
}

我当前的问题是我需要用户仍然能够在浏览器和他的计算机上正常导航，但这不可能：

1. 截屏时页面滞后，如下视频所示：https://youtu.be/Tl2w-qKckkc
2. 制作屏幕截图时，浏览器窗口聚焦并位于所有窗口的顶部。

我也尝试过使用 Playwright，但将它与 chromium 一起使用时会出现同样的错误。有人可以帮忙吗？

Answer 1

在 Playwright 中，执行以下操作：

// Affects all the platforms.
const page = await browser.newPage({ viewport: null });

// Local fix for those using Apple hardware with Retina displays.
const page = await browser.newPage({ deviceScaleFactor: 2 });

我在https://github.com/microsoft/playwright/issues/2576发表了详细的回复。请随时跟进并在那里提出问题/请求功能！