使用 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。木偶师会感到困惑。

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

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

与 page load test (click to see the report) 相同，它基本上表示它在大约 40 秒内加载了 170 多个请求。

默认超时为 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();
});

这是结果，

使用 puppeteer 截取页面运行 WebGL

Taking a screenshot of a page running WebGL using puppeteer

webgl

cesium

puppeteer

使用 puppeteer 截取页面 运行 WebGL

Taking a screenshot of a page running WebGL using puppeteer

webgl

cesium

puppeteer

使用 puppeteer 截取页面运行 WebGL