I need to use a function inside page.evaluate with puppeteer. I use exposeFunction and I need to send the full Element to my function

I have a simple example:

const puppeteer = require('puppeteer');    

const myFunction = (content) => {
    console.log(content.outerHTML); // empty
}

(async () => {    
    const browser = await puppeteer.launch()     
    const page = await browser.newPage()  
    page.on('console', msg => console.log('PAGE LOG:', msg.text()));      

    const url =  "";

    await page.goto(url,{
        waitUntil: 'networkidle2'
    })

    await page.exposeFunction('myFunction', myFunction);

    const content = await page.$('.content')

    await page.evaluate( (content) => {    

        myFunction (content); // I need to send full Element

        //console.log(content.outerHTML); // here works fine
        //my_function (JSON.stringify(content)); // sends {}

    }, content )      
})()

I've tried to send with JSON.stringify / JSON.parse with no results.

I need to use a function inside page.evaluate with puppeteer. I use exposeFunction and I need to send the full Element to my function

I have a simple example:

const puppeteer = require('puppeteer');    

const myFunction = (content) => {
    console.log(content.outerHTML); // empty
}

(async () => {    
    const browser = await puppeteer.launch()     
    const page = await browser.newPage()  
    page.on('console', msg => console.log('PAGE LOG:', msg.text()));      

    const url =  "https://www.google.";

    await page.goto(url,{
        waitUntil: 'networkidle2'
    })

    await page.exposeFunction('myFunction', myFunction);

    const content = await page.$('.content')

    await page.evaluate( (content) => {    

        myFunction (content); // I need to send full Element

        //console.log(content.outerHTML); // here works fine
        //my_function (JSON.stringify(content)); // sends {}

    }, content )      
})()

I've tried to send with JSON.stringify / JSON.parse with no results.

• javascript
• puppeteer

2 Answers 2

page.exposeFunction is limited to serialized data as the other answer already points out.

But you can define a function inside of the page.execute block. Be aware, that functions defined there will only be present in the browser environment and not inside your Node.js script.

Code sample

The following code implements the myFunction inside the evaluate function and can then be used below:

await page.evaluate((content) => {
    const myFunction = (content) => {
        return content.outerHTML;
    };

    const result = myFunction(content);
    return result; // or whatever you want to do with the result
}, content);

Short Answer: You cannot.

Long answer: You cannot send DOM elements outside browser via exposeFunction.

Moreover anything you send will be serialized, there cannot be any circular reference. NodeJS does not have a DOM.

So the solution is,

• either pass only the string and object without any circular reference,
• or use puppeteers ElementHandle to handle the elements. In your code, the content variable is a ElementHandle.