45

Whenever I try to pass a function, like this:

var myFunc = function() { console.log("lol"); };

await page.evaluate(func => {
 func();
 return true;
}, myFunc);

I get:

(node:13108) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Evaluation failed: TypeError: func is not a function
at func (<anonymous>:9:9)
(node:13108) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Why? How to do it correctly?

Thank you!

€: let me clarify: I am doing it this way because I want to find some DOM elements first and use them inside of that function, more like this (simplified):

var myFunc = function(element) { element.innerHTML = "baz" };

await page.evaluate(func => {
  var foo = document.querySelector('.bar');
  func(foo);
  return true;
}, myFunc);
1

5 Answers 5

57

You cannot pass a function directly into page.evaluate(), but you can call another special method (page.exposeFunction), which expose your function as a global function (also available in as an attribute of your page window object), so you can call it when you are inside page.evaluate():

var myFunc = function() { console.log("lol"); };
await page.exposeFunction("myFunc", myFunc);

await page.evaluate(async () => {
   await myFunc();
   return true;
});

Just remember that page.exposeFunction() will make your function return a Promise, then, you need to use async and await. This happens because your function will not be running inside your browser, but inside your nodejs application.

  1. exposeFunction() does not work after goto()
  2. Why can't I access 'window' in an exposeFunction() function with Puppeteer?
  3. How to use evaluateOnNewDocument and exposeFunction?
  4. exposeFunction remains in memory?
  5. Puppeteer: pass variable in .evaluate()
  6. Puppeteer evaluate function
  7. allow to pass a parameterized funciton as a string to page.evaluate
  8. Functions bound with page.exposeFunction() produce unhandled promise rejections
  9. exposed function queryseldtcor not working in puppeteer
  10. How can I dynamically inject functions to evaluate using Puppeteer?
2
  • How can I pass a map to a js function?
    – Alston
    Jul 20, 2022 at 4:04
  • @Alston Which map do you mean? A Map data structure or an array map? If a Map data structure, you have to serialize it.
    – ggorlen
    Sep 14, 2022 at 1:40
24

Similar problems have been discussed in a puppeteer issue.

There are several way to deal with your problem. First rule is to keep it simple.

Evaluate the function

This is the fastest way to do things, you can just pass the function and execute it.

await page.evaluate(() => {
  var myFunc = function(element) { element.innerHTML = "baz" };
  var foo = document.querySelector('.bar');
  myFunc(foo);
  return true;
});

Expose the function beforehand

You can expose the function beforehand using a page.evaluate, or a page.addScriptTag

// add it manually and expose to window
await page.evaluate(() => {
  window.myFunc = function(element) { element.innerHTML = "baz" };
});

// add some scripts
await page.addScriptTag({path: "myFunc.js"});

// Now I can evaluate as many times as I want
await page.evaluate(() => {
  var foo = document.querySelector('.bar');
  myFunc(foo);
  return true;
});

Use ElementHandle

page.$(selector)

You can pass an element handle to .evaluate and make changes as you seem fit.

const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);

page.$eval

You can target one element and make changes as you want.

const html = await page.$eval('.awesomeSelector', e => {
e.outerHTML = "whatever"
});

The trick is to read the docs and keep it simple.

2
  • 1
    What's the point of first solution, you can just pass the function and execute it.? What if we want to use the same myFunc in multiple evaluate calls?
    – avocado
    Jul 18, 2020 at 15:40
  • 1
    like the answer below says, you can't pass a function into the page like you can a variable using page.evaluate. ex: await page.evaluate(async func =>{ /* ... */ }, myFunc) <-- does not work Nov 19, 2020 at 22:35
4

Pass function with parameter

// add it manually and expose to window

 await page.evaluate(() => {
      window.myFunc = function(element) { element.innerHTML = "baz" };
    });

// and then call function declared above

 await page.evaluate((param) => {
         myFunc (param);
    }, param);
2
  • I am not supposed to call window.myFunc instead of myFunc inside page.evaluate(...)? How myFunc ended up in the global namespace after being assigned to window.myFunc?
    – user
    Apr 21, 2020 at 1:27
  • 2
    How you answer is different from the most voted answer?
    – user
    Apr 21, 2020 at 1:29
0
//  External function to run inside evaluate context
function getData() {
        return document.querySelector('title').textContent;
    }

function mainFunction(url, extractFunction){
    let browser = await puppeteer.launch({});
    let page = await browser.newPage();

    await page.goto(url);

    let externalFunction = Object.assign(extractFunction);

    let res = await this.page.evaluate(externalFunction)

    console.log(res);
}
    

// call it here
mainFunction('www.google.com',getData);
1
  • Nice one, this actually worked
    – Arthur
    Sep 18, 2022 at 14:54
0

I like evaluateOnNewDocument because I want to ensure my script code is ran before anything else.

For example, if looking for total-blocking-time web vitals:

  const perfObserver = () => {
    // Important that you don't run for this URL.
    if (window.location.href === 'about:blank') return;

    window.totalBlockingTime = 0;

    console.log(window.location.href);
    console.log('TBT', totalBlockingTime);

    const observer = new PerformanceObserver(function (list) {
      let perfEntries = list.getEntries();
      for (const perfEntry of perfEntries) {
        let longtask = perfEntry.duration - 50
        if (longtask) console.log(perfEntry);
        totalBlockingTime += longtask;
      }
      console.log({ totalBlockingTime });
    });
    observer.observe({ type: "longtask", buffered: true });
  };


  const browser = await puppeteer.launch({
    headless: true,
    devtools: false
  });

  const page = await browser.newPage();

  await page.evaluateOnNewDocument(perfObserver);

  await page.goto("https://stackoverflow.com/");

  const performance = await page.evaluate(() => window.totalBlockingTime);
  
  console.log(performance);

  await browser.close();

You can also pass arguments into the function from your parent scope. See docs link above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.