javascript - Puppeteer wait until page is completely loaded

javascript – Puppeteer wait until page is completely loaded

javascript – Puppeteer wait until page is completely loaded

You can use page.waitForNavigation() to wait for the new page to load completely before generating a 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,
});

If there is a certain element that is generated dynamically that you would like included in your PDF, consider using page.waitForSelector() to ensure that the content is visible:

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

Sometimes the networkidle events do not always give an indication that the page has completely loaded. There could still be a few JS scripts modifying the content on the page. So watching for the completion of HTML source code modifications by the browser seems to be yielding better results. Heres a function you could use –

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.log(last: , lastHTMLSize,  <> curr: , currentHTMLSize,  body html size: , bodyHTMLSize);

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

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

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

You could use this after the page load / click function call and before you process the page content. e.g.

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

javascript – Puppeteer wait until page is completely loaded

In some cases, the best solution for me was:

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

Some other options you could try are:

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

You can check this at puppeteer documentation:
https://pptr.dev/#?product=Puppeteer&version=v11.0.0&show=api-pagewaitfornavigationoptions

Related posts on java script  :

Leave a Reply

Your email address will not be published.