Puppeteer console.log - How can I inspect JSHandle@object properties?

Other Questions Puppeteer
1

I’m working on testing a React/Redux application with Puppeteer, and I’m trying to capture console logs using the following snippet:

page.on('console', (message) => {
    message.args().forEach((arg, index) => {
        console.log(`${index}: ${arg}`);
    });
});

However, when my redux-logger outputs an object like prevState or nextState, I only see JSHandle@object instead of its actual content. What steps can I take to view the keys and values within this object?

2

One approach is to use the evaluate method on the JSHandle to extract the properties of the object. You can do something like this within your console event listener:

page.on('console', async (message) => {
    for (const arg of message.args()) {
        const objectProperties = await arg.jsonValue();
        console.log(objectProperties);
    }
});

This way, you convert the handle to a JSON object, making the properties accessible and allowing you to inspect the prevState and nextState more effectively. It requires the use of await since jsonValue returns a promise.

3

You might also consider using arg.evaluate() which lets you run a function on the JS object and return its result. For instance,

page.on('console', async (message) => {
    for (let arg of message.args()) {
        const result = await arg.evaluate(e => e);
        console.log(result);
    }
});

This gives you a bit more control and flexibility in handling the object properties.