feat(storageState): add OPFS support by gwennlbh · Pull Request #41420 · microsoft/playwright

gwennlbh · 2026-06-23T08:47:01Z

gwennlbh

i'll wait for an answer on the comment i added since if baseline 2025 is not acceptable and neither is putting the script in a web worker, i don't wanna spend time on writing tests 😅

Sign in to view

 }

+// Getting a File object's contents requires async
+export async function serializeFile(value: File): Promise<Extract<SerializedValue, { f: any; }>> {


pavelfeldman · 2026-06-23T17:26:36Z

 };

+type OPFSTree = Array<
+  [name: string, contents: Extract<SerializedValue, {f: any}> | OPFSTree]


Let's use conservative types:

type FSEntry { type: 'file' | 'folder'; name: string; lastModified: number; } type File = FSEntry & { type: 'file'; base64: string; } type Folder = FSEntry & { type: 'folder'; entries: (File | Folder)[]; }

pavelfeldman · 2026-06-23T17:30:38Z

    { ta: { b: string, k: TypedArrayKind } } |
-    { ab: { b: string } };
+    { ab: { b: string } } |
+    { f: { b: string, n: string, t: string, m: number } };


You should be able to serialize and restore opfs without this.

pavelfeldman · 2026-06-23T17:33:56Z

      return base64ToTypedArray(value.ta.b, typedArrayConstructors[value.ta.k]);
    if ('ab' in value)
      return base64ToTypedArray(value.ab.b, Uint8Array).buffer;
+    if ('f' in value) {


I did it like this so that we would get File object support in IndexedDB as a side effect of the PR, but yeah it's not strictly necessary

pavelfeldman · 2026-06-23T17:34:30Z


  async storageState(params: channels.BrowserContextStorageStateParams, progress: Progress): Promise<channels.BrowserContextStorageStateResult> {
-    return await this._context.storageState(progress, params.indexedDB, params.credentials);
+    return await this._context.storageState(progress, params.indexedDB, params.credentials, params.opfs);


pass params as object

gwennlbh · 2026-06-25T19:35:34Z

i just realized, i don't think there's any way to set the lastModified or content type of the file when writing it into OPFS. Maybe we should just leave them out of the serialized data :/ Unfortunate cuz tests can't rely on these things (esp. the last modified date could be useful, i feel like)

I mean, they have a solution: mocking FileSystemFileHandle#getFile i guess

pavelfeldman · 2026-07-01T21:48:11Z


  async storageState(params: channels.APIRequestContextStorageStateParams, progress: Progress): Promise<channels.APIRequestContextStorageStateResult> {
-    return await this._object.storageState(progress, params.indexedDB);
+    return await this._object.storageState(progress, params.indexedDB, params.opfs);


nit: params object here

pavelfeldman · 2026-07-01T21:49:39Z

  }[],
 };

+export type FSEntry = {


This file is generated, where did we get these entries from and why?

oops, didn't know that

i didn't run the build or test my changes yet, thats why the PR is still a draft (i was waiting on a decision to move forward even with some stuff not being baseline widely available yet).

also, what do you think about the lastModified thing ? i think i'll just not store it: if we can't control it, might as well not make tests unreliable by making the serialization dependent on the current time

found it, I edited packages/protocol/spec and docs/src.

gwennlbh · 2026-07-03T06:54:22Z

+      - `type` <[FSEntryType]<"file"|"folder">> Type of the entry. "folder" for the root of the OPFS
+      - `base64` ?<[string]> Contents of the file, for "file" entries
+      - `contentType` ?<[string]> Content type of the file, for "file" entries
+      - `entries` ?<[Array]<[Object]<[string], [any]>>> Array of child entries (recursive), for "folder" entries


The recursive nature of FSEntry is causing issues here (a type mismatch at APIRequest#newContext)

I think I'm gonna go with a flat structure instead, that store absolute paths to files. It's a bit annoying because we need to be able to represent empty directories so we still have to make base64 & contentType optional (or make them take sentinel values like application/vnd.playwright.opfs-folder for contentType but thats worse imo), but oh well.

…ed files

gwennlbh · 2026-07-03T07:30:10Z

sorry for the big force-push, I forgot the conventional commits prefixes in my later commits (i mean it's gonna get squashed anyways i guess, but since contributing.md talks about naming your commits that way might aswell do it)

gwennlbh

@pavelfeldman for the test, i'm planning on adding a "store TODOs to OPFS" button in the to-do-notifications mock app, that would write one folder per deadline month containing one .md file per item:

- list:
  - listitem: "lorem [lorem] - 00:00, January 1 2027."
  - listitem: "ipsum [ipsum] - 00:00, January 5 2027."
  - listitem: "dolor [dolor] - 00:00, December 5 2027."

would result in

(opfs root)
/ January
  / lorem.md
  / ipsum.md
/ December
  / dolor.md

is this okay?

feat(storageState): add OPFS support

18b71cc

gwennlbh force-pushed the storagestate-opfs branch from 6f6684c to 18b71cc Compare June 23, 2026 08:53

gwennlbh commented Jun 23, 2026

View reviewed changes

Comment thread packages/injected/src/storageScript.ts Outdated

gwennlbh commented Jun 23, 2026

View reviewed changes

Comment thread packages/injected/src/storageScript.ts Outdated

gwennlbh commented Jun 23, 2026

View reviewed changes

Comment thread packages/isomorphic/utilityScriptSerializers.ts Outdated

}

// Getting a File object's contents requires async

export async function serializeFile(value: File): Promise<Extract<SerializedValue, { f: any; }>> {

This comment was marked as outdated.

Sign in to view

gwennlbh mentioned this pull request Jun 23, 2026

✨ Generic binary storage backend cigaleapp/cigale#1796

Draft

pavelfeldman reviewed Jun 23, 2026

View reviewed changes

gwennlbh force-pushed the storagestate-opfs branch 3 times, most recently from e9d3564 to 2040049 Compare June 25, 2026 19:34

pavelfeldman reviewed Jul 1, 2026

View reviewed changes

gwennlbh commented Jul 3, 2026

View reviewed changes

gwennlbh added 5 commits July 3, 2026 09:27

chore: address comments

0df8526

chore: address nit

036f0b6

feat(storageState): remove lastModified field from FSFile

c9c2a8e

fix(storageState): edit protocol spec and docs src instead of generat…

8c7cf46

…ed files

feat(storageState): switch to flat structure for OriginStorage.opfs

bbaaff9

gwennlbh force-pushed the storagestate-opfs branch from 08cbb44 to bbaaff9 Compare July 3, 2026 07:28

Merge branch 'main' into storagestate-opfs

f7bff7f

gwennlbh commented Jul 3, 2026

View reviewed changes

Uh oh!

Conversation

gwennlbh commented Jun 23, 2026

Uh oh!

Uh oh!

gwennlbh left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gwennlbh commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gwennlbh Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gwennlbh commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gwennlbh left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gwennlbh left a comment •

edited

Loading

gwennlbh commented Jun 25, 2026 •

edited

Loading

gwennlbh Jul 3, 2026 •

edited

Loading

gwennlbh commented Jul 3, 2026 •

edited

Loading

gwennlbh left a comment •

edited

Loading