Repository navigation
[Feature]: Capture OPFS in storageState #41400
Description
🚀 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
Activity
pavelfeldman commentedon Jun 22, 2026
Go ahead!
gwennlbh commentedon Jul 7, 2026
since the PR was closed, if other ppl end up here, in the meantime I got it working with a Page.addInitScript
With fixtures & stuff you can get pretty close to what would be OPFS-in-storageState.
See cigaleapp/cigale@9c855fc if you want the commit where I add that (you can ignore stuff related to "fixture paths" in the code, it's just a strongly typed string union for paths to fixtures in my project, you can just use a free string type instead)
The entire impl is in the "tests/utils/opfs.ts" file:
https://github.com/cigaleapp/cigale/blob/main/tests/utils/opfs.ts
usage is:
collectOPFSStateas you would withPage.storageStaterestoreOPFSState. Just like the storageState option, it supports both an array of opfs file entries and a path to a json file (the ones collectOPFSState writes)opfsState: string | FSEntry[]property to your basetest.extend<...>so that when you can dotest.use({ opfsState: "..." }):)feat(storage): capture OPFS in storage state
feat(storage): capture OPFS in storage state
feat(storage): capture OPFS in storage state