Puppeteer evaluate function on load to show alert

Question

I am a newbie in puppeteer and I can't understand why the following code cannot work. any explanation would be appreciated.

const puppeteer=require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.goto('https://bet254.com');
    await page.evaluate(async ()=> {
        window.addEventListener("load",(event)=>{
            document.alert("Loaded!");
        })
    });

})();

I was expecting an alert after loading. But nothing happened! How can I add a listener to show an alert on page load?

put your IIFE in try/catch block and check for any errors you might be getting. — Amir Saleem, Jul 17 '21 at 04:17

ggorlen · Accepted Answer · 2021-07-17T05:12:39.123

page.goto already waits for the page to load, so by the time your evalute runs, you can't re-wait for the page to load, so the load event will never fire.

Another problem is that document.alert isn't a function. You may be thinking of document.write or window.alert. In any case, neither function is particularly useful for debugging, so I suggest sticking to console.log unless you have a very compelling reason not to.

When working with Puppeteer, it's important to isolate problems by running your evaluate code by hand in the browser without Puppeteer, otherwise you might have no idea whether it's Puppeteer that's failing, or just plain old bad browser code.

Anything logged in evaluate won't be shown in your Node stdout or stderr, so you'll probably want to monitor that with a log listener. You'll need to look at both Node and the browser console for errors.

Depending on what you're trying to accomplish, page.evaluateOnNewDocument(pageFunction[, ...args]) will let you attach code to evaluate whenever you navigate, which might be what you're trying for here.

Here's an example of alerting headfully:

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  await page.evaluateOnNewDocument(() => {
    window.addEventListener("load", event => {
      alert("Loaded!");
    });
  });
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

Using console.log:

const puppeteer = require("puppeteer");

const onPageConsole = msg =>
  Promise.all(msg.args().map(e => e.jsonValue()))
    .then(args => console.log(...args))
;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  page.on("console", onPageConsole);
  await page.evaluateOnNewDocument(() => {
    window.addEventListener("load", event => {
      alert("Loaded!");
    });
  });
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

If all you're trying to do is run some code after load, then you might not even need to be attaching a listener to the load event at all:

const puppeteer = require("puppeteer");

const onPageConsole = msg =>
  Promise.all(msg.args().map(e => e.jsonValue()))
    .then(args => console.log(...args))
;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  page.on("console", onPageConsole);
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
  await page.evaluate(() => console.log("Loaded!"));
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

Puppeteer evaluate function on load to show alert

1 Answers1