Passing and executing functions within Puppeteer's evaluate method

Other Questions Puppeteer
1

I’m trying to use a function inside Puppeteer’s evaluate() method. I’m passing it as an argument but getting an error saying ‘func is not a function’. What am I doing wrong?

Here’s what I’ve tried:

const myFunction = () => {
  console.log('Hello from myFunction');
};

try {
  const result = await page.evaluate((fn) => {
    fn(); // This line throws the error
  }, myFunction);
} catch (error) {
  console.error('Error:', error.message);
}

I’m using Puppeteer version 10.2 on Windows 10 with Node 8.2.1. Any ideas on how to fix this? I thought passing the function as an argument would work, but it seems like I’m missing something important. Thanks for any help!

2

I’ve encountered this issue as well. One alternative approach that might work for you is using the page.exposeFunction() method. This allows you to make a Node.js function available in the browser context. Here’s how you could modify your code:

const myFunction = () => {
  console.log('Hello from myFunction');
};

try {
  await page.exposeFunction('myExposedFunction', myFunction);
  const result = await page.evaluate(() => {
    return myExposedFunction();
  });
} catch (error) {
  console.error('Error:', error.message);
}

This method is cleaner and more reliable than trying to pass the function directly. It also maintains the original function’s context, which can be crucial for more complex scenarios. Just remember that exposed functions are limited to serializable types for arguments and return values.

3

hey, ive had this prob too. puppeteer can be a real pain sometimes lol. have u tried using page.evaluateHandle()? it lets u pass functions n stuff. like this:

await page.evaluateHandle((fn) => fn(), myFunction);

it worked 4 me, might help u out. good luck!

4

I’ve run into this issue before, and it can be a bit tricky. The problem is that Puppeteer serializes the function when passing it to evaluate(), which means it loses its function-ness.

Here’s a workaround that’s worked for me:

const myFunction = () => {
  console.log('Hello from myFunction');
};

try {
  const result = await page.evaluate(() => {
    const fn = new Function('return ' + arguments[0])();
    fn();
  }, myFunction.toString());
} catch (error) {
  console.error('Error:', error.message);
}

This approach converts the function to a string, passes it to evaluate(), and then reconstructs it on the browser side. It’s not the most elegant solution, but it gets the job done.

Remember, this method has some limitations. It won’t work with closure variables or complex functions. For those cases, you might need to rethink your approach or find a way to simplify the function you’re passing.