[Feature]: Support ArrayBuffer in IndexedDB when using BrowserContext#storageState

[gwennlbh]

🚀 Feature Request

Serialize ArrayBuffer values into a base64-encoded bytestring instead of an empty array

For example, here's how devalue handles it:

{ bytes: new Uint8Array([1, 2, 3, 4]).buffer }

// becomes

[{"bytes":1},["ArrayBuffer","AQIDBA=="]]

An online demo: https://svelte.dev/playground/9d3f0802c85244fb8f3e136f9022a51c?version=5.48.0

Devalue is used for transfering data in server-client exchanges in SvelteKit. The 1 is because it also handles cyclical references, so there's index-based indirection, but the base64 idea is the same

If this is too much complexity, providing a hook for implementing a custom serializer/reviver (à la JSON.stringify's second argument) would work for me too

Either way, I'd be happy to contribue a PR, as I was really looking forward to making use of Storage States ^^

Example

Currently, objects containing ArrayBuffer values, such as:

{ bytes: new Uint8Array([1, 2, 3, 4]).buffer }

get encoded as such:

// origins[0].indexedDB[0].stores[0].records[0]
{
  "valueEncoded": {
    "o": [{ 
       "k": "bytes", 
       // empty array ↓
       "v": { "o": [], "id": 2 } 
    }]
}

Instead, they could be encoded into a base64 bytestring, there's even a standard Uint8Array#toBase64 now

Unfortunately it was just added to Node (It's on Node 25 only), but we can pretty easily do our own base64 encoding logic until support for Node <26 can be dropped (which will be in a while but whatever).

Here's devalue's implementation, for example

Motivation

I'm testing a local-only webapp that manipulates image data, and stores the image file bytes into indexedDB.

I was previously doing my own dataase dump/load via page.evaluate() but it is kind of slow (i need to do a full-page reload after loading a database dump before starting the test)

I was wondering if I could somehow "arm" the browser so that it already has everything in place in its IndexedDB

I followed the guide at https://playwright.dev/docs/auth#basic-shared-account-in-all-tests but upon looking at the .json the method writes, it looks like ArrayBuffers are not saved

[gwennlbh]

I guess that implementation would mean adding code to innerSerialize in utilityScriptSerializer.ts

playwright/packages/playwright-core/src/utils/isomorphic/utilityScriptSerializers.ts

Lines 196 to 290 in 7b68bf6

	function innerSerialize(value: any, handleSerializer: (value: any) => HandleOrValue, visitorInfo: VisitorInfo): SerializedValue {
	const result = handleSerializer(value);
	if ('fallThrough' in result)
	value = result.fallThrough;
	else
	return result;
	if (typeof value === 'symbol')
	return { v: 'undefined' };
	if (Object.is(value, undefined))
	return { v: 'undefined' };
	if (Object.is(value, null))
	return { v: 'null' };
	if (Object.is(value, NaN))
	return { v: 'NaN' };
	if (Object.is(value, Infinity))
	return { v: 'Infinity' };
	if (Object.is(value, -Infinity))
	return { v: '-Infinity' };
	if (Object.is(value, -0))
	return { v: '-0' };
	if (typeof value === 'boolean')
	return value;
	if (typeof value === 'number')
	return value;
	if (typeof value === 'string')
	return value;
	if (typeof value === 'bigint')
	return { bi: value.toString() };
	if (isError(value)) {
	let stack;
	if (value.stack?.startsWith(value.name + ': ' + value.message)) {
	// v8
	stack = value.stack;
	} else {
	stack = `${value.name}: ${value.message}\n${value.stack}`;
	}
	return { e: { n: value.name, m: value.message, s: stack } };
	}
	if (isDate(value))
	return { d: value.toJSON() };
	if (isURL(value))
	return { u: value.toJSON() };
	if (isRegExp(value))
	return { r: { p: value.source, f: value.flags } };
	for (const [k, ctor] of Object.entries(typedArrayConstructors) as [TypedArrayKind, Function][]) {
	if (isTypedArray(value, ctor))
	return { ta: { b: typedArrayToBase64(value), k } };
	}
	const id = visitorInfo.visited.get(value);
	if (id)
	return { ref: id };
	if (Array.isArray(value)) {
	const a = [];
	const id = ++visitorInfo.lastId;
	visitorInfo.visited.set(value, id);
	for (let i = 0; i < value.length; ++i)
	a.push(serialize(value[i], handleSerializer, visitorInfo));
	return { a, id };
	}
	if (typeof value === 'object') {
	const o: { k: string, v: SerializedValue }[] = [];
	const id = ++visitorInfo.lastId;
	visitorInfo.visited.set(value, id);
	for (const name of Object.keys(value)) {
	let item;
	try {
	item = value[name];
	} catch (e) {
	continue; // native bindings will throw sometimes
	}
	if (name === 'toJSON' && typeof item === 'function')
	o.push({ k: name, v: { o: [], id: 0 } });
	else
	o.push({ k: name, v: serialize(item, handleSerializer, visitorInfo) });
	}
	let jsonWrapper;
	try {
	// If Object.keys().length === 0 we fall back to toJSON if it exists
	if (o.length === 0 && value.toJSON && typeof value.toJSON === 'function')
	jsonWrapper = { value: value.toJSON() };
	} catch (e) {
	}
	if (jsonWrapper)
	return innerSerialize(jsonWrapper.value, handleSerializer, visitorInfo);
	return { o, id };
	}
	}

oh wait, there's already handling for TypedArrays

playwright/packages/playwright-core/src/utils/isomorphic/utilityScriptSerializers.ts

Lines 243 to 246 in 7b68bf6

	for (const [k, ctor] of Object.entries(typedArrayConstructors) as [TypedArrayKind, Function][]) {
	if (isTypedArray(value, ctor))
	return { ta: { b: typedArrayToBase64(value), k } };
	}

i guess it's just a matter of adding a simple case for ArrayBuffer and doing new Uint8Array(buffer) then!

[Skn0tt]

I vaguely remember trying to implement it, but there was some sort of a cross-platform problem. Would you be open to contributing a PR? I'm happy to review it.

[gwennlbh]

Wow, nice timing, I was about to submit one lol

I tried patching my node_modules but I can't seem to get the changes to work, I tried running build and replacing playwright-core/lib/generated, to no avail, but I'll try doing a proper PR and maybe I can test out my changes properly with a test suite