Создание скриншота страницы с запущенным WebGL с использованием puppeteer

Question

Я пытаюсь сделать скриншот страницы, на которой запущен цезий на основе webGL. Если я просто сделаю снимок экрана, страница будет загружена, но 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 по умолчанию).

То же самое с нагрузочным тестом страницы (нажмите, чтобы увидеть отчет), который в основном говорит, что загружает 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();
});

и вот результат,