webgl - 使用 puppeteer 截取运行 WebGL 的页面的屏幕截图

Question

我正在尝试截取运行基于 webGL 的 Cesium 的页面的屏幕截图。如果我只是截图，页面会被加载，但是 webGL 不会完成加载。

如果我使用内置的 networkidle0 或 networkidle2，则永远不会截取屏幕截图。这是我的代码。

这是我要拍照的网站:https://www.arelplane.com/@arelenglish

const puppeteer = require('puppeteer');

module.exports = {
  takeScreenshot: (userId) => {
    (async () => {
      const browser = await puppeteer.launch({
        headless: false,
        args: [
          '--headless',
          '--hide-scrollbars'
        ]
      });
      const page = await browser.newPage();
      await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0"});
      await page.screenshot({path: 'example.png'});

      await browser.close();
    })();
    return "Successful API call!";
  }
}

Answer 1

您的代码是说 headless: false，以及一个名为 --headless 的参数，这意味着 headless: true。 puppeteer 师会感到困惑。

开个玩笑，这是我在网络选项卡上看到的。

网络选项卡表示它加载至少 66 个请求，每个资源至少 1.5s(我知道为什么它在我的默认 chrome 上加载速度较慢)。

同样来自 page load test (click to see the report) ，基本上说它加载了 170 多个请求，持续了大约 40 多秒。

默认超时为 30 秒，但加载数据的时间超过 90 秒。

这里是处理导航超时的参数。

await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0}); // timeout: 0 will disable navigation timeout

要么禁用超时，要么将其增加到 120 秒或该范围内的某个值。这是我的代码，

puppeteer.launch({headless: false}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0});
  await page.screenshot({path: "test.png"});
  await browser.close();
});

结果如下