使用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每个请求至少包含或大于每个资源（idk为什么在我的默认Chrome浏览器上加载速度慢）。

从同一页面负载测试（点击查看报告），这基本上是说，它加载了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();
});

这是结果，