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

Browser

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.

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);
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





Discover More
Puppeteer Architecture
Headless browser - Puppeteer

Puppeteer is a Node library that provides a high-level API over Chrome or Chromium (ie headless chrome) Puppeteer communicate with the browser via the DevTools Protocol API The Puppeteer API is hierarchical...
Javascript - Object

object in javascript An object is a data type in Javascript. An object follows a json data structure with key that holds property value. The value may be of a variable or a function In JavaScript, a...



Share this page:
Follow us:
Task Runner