[Feature]: Capture OPFS in storageState

[gwennlbh]

🚀 Feature Request

A new option (defaults to false) for BrowserContext#storageState, opfs, to capture the Origin Private Filesystem contents.

OPFS files are represented by File objects, so serialization seems doable, with base64 for the actual file contents. We can re-use ArrayBuffer serialization code for this (see #38923 hehe).

Listing the entire OPFS tree is very much doable, and is done by a number of "OPFS Viewer" devtools extensions in both firefox & chrome to make up for the lack of native devtools support, for example

Example

test("...", async ({ browser }) => {

  const state = await browser.storageState({
    indexedDB: true,
    // could also be called OPFS in caps or originPrivateFS, or
    // originPrivateFilesystem… im not sure about the name
    opfs: true 
  })

})

Motivation

Since v1.59 and #38923, i've switched to using Storage State for my E2E tests, and everything works fine because I've been storing binary file data in IndexedDB, as ArrayBuffers.

However, I'm planning on transitioning to OPFS for file storage, but I'm kinda blocked on OPFS support for storage state... and going back to a manual json dump with handrolled capture/restore scripts would be unfortunate.

Just like #38923, I'd be happy to contribute a PR ^^

Thanks again for Playwright !! Can't count how many times it saved me from introducing regressions lol

[pavelfeldman]

Just like #38923, I'd be happy to contribute a PR ^^

Go ahead!