使用puppeteer

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的请求（idk为什么它在我的默认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();
});

这是结果，