Puppeteer - How to pass back and forth a date (or a complex type) to the headless browser via the evaluate function

About

A step by step guide that shows how to serialize and deserialize an object with a date (

It will also work for other complex type

) when using the puppeteer evaluate function.

Articles Related

Steps

The object

This is the example object that has a date property that we will pass to the browser.

let dayObj = {
	"name": "saturday",
	"date": new Date(2020, 1, 25)
}

The serialization

From and to the evaluate function, you need to pass a serialized object (ie object that are stringified).

let dayJson = JSON.stringify(dayObj);

A stringified date is just a string in the ISO8601 format. See Instant - String Format (ISO 8601)

console.log(dayJson);

{"name":"saturday","date":"2020-02-24T23:00:00.000Z"}"

The script execution via the evaluate function

We have string, we can pass it to the evaluate function and return any other object back by serializing it (ie stringified)

let dayJsonFromBrowser = await page.evaluate((dayJsonInBrowser) => {
	// To make it an object back, you can parse it
	let dayObjInBrowser = JSON.parse(dayJsonInBrowser);
	// And pass it back again with stringify
	return JSON.stringify(dayObjInBrowser);
}, dayJson);

The deserialization

JSON.parse and the reviver function

After receiving a serialized object back from the evaluate function, you need to rebuild it with the JSON.parse function and a reviver function. The reviver get as arguments, the key and the value of each property of the object and this is where you can build the object back as a date.

let dayObjFromBrowser = JSON.parse(dayJsonFromBrowser, (key, value) => {
	// The key of the properties
	if (key == 'date') {
		// if the name of the properties is date, deserialize it (ie make it a date)
		return new Date(value);
	} else {
		return value;
	}
})

Are they the same ? (Jest assertion)

expect(dayObj).toEqual(dayObjFromBrowser);

PASS

The object type

If you have an object with a function, you can cast the object to its original type with the Object.assign function.

Example:

We can create a class that will add a getDate function (typescript)

class day {
	name: string;
	date: Date;

	constructor(name: string, date: Date){
		this.name = name;
		this.date = date;
	}

	getDate(){
		return this.date;
	}
}

To cast the object that we got from the previous JSON.parse step, we can create a dummy object and assign it.

const dummObject = new day("", new Date());
let dayType = Object.assign(dummObject, dayObjFromBrowser);

Does the new object, has the new getDate function and does it return the good date ?

// jest assertion
expect(dayType.getDate()).toEqual(new Date(2020, 1, 25));

PASS

Documentation / Reference

This page is an answer to this question: Return date from evaluate/evaluateHandle