javascript - screen shot and data trying to be taken before site fully loads using puppeteer

Question

Hi i am trying to get to take a screenshot of a website using puppeteer but the site loads quite slow which leads to always not being able to grab any data or take screen shots, I would like to delay my screenshot until the site is finished loading, I have tried a bunch of methods and cant figure it out. Thanks in advance for any help.

This is my Code

const puppeteer = require("puppeteer-extra");

// add stealth plugin and use defaults (all evasion techniques)
const StealthPlugin = require("puppeteer-extra-plugin-stealth");
puppeteer.use(StealthPlugin());

async function scrapeProduct(url) {
  //launching puppeteer
  const browser = await puppeteer.launch({ headless: true });

  const page = await browser.newPage();

  await page.goto(url, { waitUntil: "load" });
  await page.waitFor("*");

  function time() {
    var d = new Date();
    var n = d.getSeconds();
    return console.log(n);
  }

  time();
  await page.screenshot({ path: "testresult.png" });
  time();
  
  
  await browser.close();
}

scrapeProduct("https://www.realcanadiansuperstore.ca/search?search-bar=milk");

Answer 1

waitFor has been depreciated recently so you are better off trying the other events.

I can't inspect the webpage you are taking a screenshot of so cannot tell what might be happening after the load event.

However have you tried the other events puppeteer offers?

waitForNavigation and waitForSelector mentioned in https://stackoverflow.com/a/52501934/484337

If you have control of the page you are taking a screenshot of then you can add a DOM event to it which your puppeteer code can wait for using waitForEvent.

If all else fails and time is not important then you can put in a sleep(n) that is long enough to guarantee the page is loaded.