Кукловод дождитесь полной загрузки страницы

Мне всегда нравится ждать селекторы, так как многие из них являются отличным индикатором того, что страница полностью загружена:

await page.waitForSelector('#blue-button');

Вы можете использовать page.waitForNavigation(), чтобы дождаться полной загрузки новой страницы перед созданием PDF:

await page.goto(fullUrl, {
  waitUntil: 'networkidle0',
});

await page.type('#username', 'scott');
await page.type('#password', 'tiger');

await page.click('#Login_Button');

await page.waitForNavigation({
  waitUntil: 'networkidle0',
});

await page.pdf({
  path: outputFileName,
  displayHeaderFooter: true,
  headerTemplate: '',
  footerTemplate: '',
  printBackground: true,
  format: 'A4',
});

Если есть определенный динамически генерируемый элемент, который вы хотели бы включить в свой PDF-файл, рассмотрите возможность использования page.waitForSelector(), чтобы гарантировать, что содержимое будет видимым:

await page.waitForSelector('#example', {
  visible: true,
});

Оберните page.click и page.waitForNavigation в Promise.all

  await Promise.all([
    page.click('#submit_button'),
    page.waitForNavigation({ waitUntil: 'networkidle0' })
  ]);

В некоторых случаях лучшим решением для меня было:

await page.goto(url, { waitUntil: 'domcontentloaded' });

Вот некоторые другие варианты, которые вы можете попробовать:

await page.goto(url, { waitUntil: 'load' });
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.goto(url, { waitUntil: 'networkidle0' });
await page.goto(url, { waitUntil: 'networkidle2' });

Вы можете проверить это в документации кукольника: https://pptr.dev/#?product=Puppeteer&version=v2.1.1&show=api-pagewaitfornavigationoptions

В последней версии Puppeteer у меня работал networkidle2:

await page.goto(url, { waitUntil: 'networkidle2' });

Иногда события networkidle не всегда указывают на то, что страница полностью загружена. Все еще может быть несколько JSscripts, изменяющих содержимое на странице. Таким образом, наблюдение за завершением изменений исходного кода HTML браузером, похоже, дает лучшие результаты. Вот функция, которую вы могли бы использовать -

const waitTillHTMLRendered = async (page, timeout = 30000) => {
  const checkDurationMsecs = 1000;
  const maxChecks = timeout / checkDurationMsecs;
  let lastHTMLSize = 0;
  let checkCounts = 1;
  let countStableSizeIterations = 0;
  const minStableSizeIterations = 3;

  while(checkCounts++ <= maxChecks){
    let html = await page.content();
    let currentHTMLSize = html.length; 

    let bodyHTMLSize = await page.evaluate(() => document.body.innerHTML.length);

    console.info('last: ', lastHTMLSize, ' <> curr: ', currentHTMLSize, " body html size: ", bodyHTMLSize);

    if (lastHTMLSize != 0 && currentHTMLSize == lastHTMLSize) 
      countStableSizeIterations++;
    else 
      countStableSizeIterations = 0; //reset the counter

    if (countStableSizeIterations >= minStableSizeIterations) {
      console.info("Page rendered fully..");
      break;
    }

    lastHTMLSize = currentHTMLSize;
    await page.waitFor(checkDurationMsecs);
  }  
};

Вы можете использовать это после вызова функции страницы load / click и перед обработкой содержимого страницы. например

await page.goto(url, {'timeout': 10000, 'waitUntil':'load'});
await waitTillHTMLRendered(page)
const data = await page.content()

Вы также можете использовать, чтобы убедиться, что все элементы отрисованы

await page.waitFor('*')

Ссылка: https://github.com/puppeteer/puppeteer/issues/1875

Что касается декабря 2020 года, функция waitFor устарела, поскольку предупреждение внутри кода сообщает:

waitFor is deprecated and will be removed in a future release. See https://github.com/puppeteer/puppeteer/issues/6214 for details and how to migrate your code.

Вы можете использовать:

sleep(millisecondsCount) {
    if (!millisecondsCount) {
        return;
    }
    return new Promise(resolve => setTimeout(resolve, millisecondsCount)).catch();
}

И используйте это:

(async () => {
    await sleep(1000);
})();

Я столкнулся с той же проблемой с networkidle, когда работал над внеэкранным рендерером. Мне нужен был движок на основе WebGL, чтобы закончить рендеринг и только потом сделать снимок экрана. Для меня сработал метод page.waitForFunction (). В моем случае использование было следующим:

await page.goto(url);
await page.waitForFunction("renderingCompleted === true")
const imageBuffer = await page.screenshot({});

В коде рендеринга я просто установил для переменной renderingCompleted значение true, когда закончил. Если у вас нет доступа к коду страницы, вы можете использовать другой существующий идентификатор.