Taking a screenshot of a page running WebGL using puppeteer

Question

I'm trying to take a screenshot of a page that is running webGL based Cesium. If I just take the screenshot, the page will be loaded, but the webGL wont be finished loading.

If I use the built in networkidle0 or networkidle2, the screenshot is never taken. Here is my code.

And here is the website I'm trying to take a picture of: 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

Your code is saying headless: false, along with an argument called --headless which means headless: true. Puppeteer will get confused.

Jokes aside, here is what I saw on the network tab.

The network tab says it loads at least 66 requests with at least or more than 1.5s for each resource (idk why it loaded slower on my default chrome).

Same from a page load test (click to see the report), which basically says it loads 170+ requests for around 40+ seconds.

The default timeout is 30 seconds, but it loads data for 90+ seconds.

Here is the argument to deal with navigation timeout.

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

Either disable the timeout or increase it to say 120 seconds or something around that range. Here is my code,

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();
});

and here is the result,