Создание скриншота страницы с запущенным 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();
});

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