Skip to content

feat(storageState): handle ArrayBuffer - #38923

Merged
Simon Knott (Skn0tt) merged 1 commit into
microsoft:mainfrom
gwennlbh:storagestate-arraybuffer
Jan 27, 2026
Merged

Simon Knott (Skn0tt) merged 1 commit into
microsoft:mainfrom
gwennlbh:storagestate-arraybuffer

Conversation

@gwennlbh

Copy link
Copy Markdown
Contributor

Closes #38915

@gwennlbh

Gwenn Le Bihan (gwennlbh) commented Jan 23, 2026 •

Copy link
Copy Markdown
Contributor Author

For the tests, I'm planning on adding data to should support IndexedDB in browsercontext-storage-state.spec.ts, but I'm not sure about how to add the data before testing serialization:

it('should support IndexedDB', async ({ page, server, contextFactory }) => {
await page.goto(server.PREFIX + '/to-do-notifications/index.html');
await expect(page.locator('#notifications')).toMatchAriaSnapshot(`
- list:
- listitem: Database initialised.

Do i edit to-do-notifications/scripts/todo.js ? seems a bit heavy

Or do I go with a page.evalute() call ?

@Skn0tt

Copy link
Copy Markdown
Contributor

That's exactly what I did in 311625b#diff-303a7e6f772039cc6ffb24ee18c55a69c7f42a9c1956ec8c53985f4d2faa9397 - go ahead and update the index.html file, yeah. When you use page.evaluate, you'll be testing the serialisation for page.evaluate on top of the storagestate one.

@gwennlbh

Copy link
Copy Markdown
Contributor Author

When you use page.evaluate, you'll be testing the serialisation for page.evaluate on top of the storagestate one.

I was thinking like, filling another indexeddb store within a page.evaluate() call

but alright, i'll add something to the todo app, but tbf idk what to add that would warrant an ArrayBuffer '^^

@Skn0tt

Copy link
Copy Markdown
Contributor

it doesn't have to make sense, just take one of the strings and turn it into an array buffer before serialising

@gwennlbh

Copy link
Copy Markdown
Contributor Author

do I add a second todo item? because the trivial case is not there anymore since theres an array buffer (the record becomes a valueEncoded instead of a value)

@Skn0tt

Simon Knott (Skn0tt) commented Jan 23, 2026 •

Copy link
Copy Markdown
Contributor

you can add a "task description" column that's stored as an arraybuffer. I'm sure Copilot will write you some nice code for it :)

@gwennlbh

Gwenn Le Bihan (gwennlbh) commented Jan 23, 2026 •

Copy link
Copy Markdown
Contributor Author

Simon Knott (@Skn0tt) sorry didnt see your comment, i ended up storing a binaryTitle column that's just the utf8 bytes of the title, but its pretty much the same thing :)

although i guess we could add a proper separate description column and put in larger text, with some special chars to check for mojibake if the base64 encoding somehow breaks

@gwennlbh

Copy link
Copy Markdown
Contributor Author

the test passes in all browsers on my machine!

@Skn0tt Simon Knott (Skn0tt) left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Left some minor feedback. I'll kick off CI.

return;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please remove the unintended whitespace formatting changes

{ h: number } |
{ ta: { b: string, k: TypedArrayKind } };
{ ta: { b: string, k: TypedArrayKind } } |
{ ba: { b: string } };

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's call it ab - it's not an BrrayAuffer!

{ k: 'month', v: 'January' },
{ k: 'year', v: '2025' },
{ k: 'notified', v: 'no' },
{ v: { ba: { b: 'UGV0IHRoZSBjYXQ=' } }, k: 'binaryTitle' }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: swap k and v for easy mental parsing when glancing over this code

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the test failure diff showed them in this order, but i guess key order is not checked, ill swap them around yeh

@Skn0tt

Copy link
Copy Markdown
Contributor

if you feel like contributing more, I think this comment can be resolved! Float16 is in baseline now. https://github.com/gwennlbh/playwright/blob/67735a3afba771684ea09444d4f2a91ed41ed77b/packages/playwright-core/src/utils/isomorphic/utilityScriptSerializers.ts#L98-L99

@Skn0tt

Copy link
Copy Markdown
Contributor

although i guess we could add a proper separate description column and put in larger text, with some special chars to check for mojibake if the base64 encoding somehow breaks

don't worry, we're here to test the serializer, not the impl of typedArrayToBase64

@Skn0tt

Copy link
Copy Markdown
Contributor

eslint is complaining, please take a look

@gwennlbh

Copy link
Copy Markdown
Contributor Author

Simon Knott (@Skn0tt) yeah i saw, im waiting for the tests to finish before pushing again

i also added the Float16Array, do i make a separate PR for it or just another commit is fine?

@Skn0tt

Copy link
Copy Markdown
Contributor

Please make a separate PR, then we can review it separately ahead of the next release.

@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@gwennlbh

Copy link
Copy Markdown
Contributor Author

lint should be fixed,
i dont think the test failure is related to the change

idk about the MCP tests either

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "MCP"

12 failed
❌ [webkit] › mcp/snapshot-mode.spec.ts:58 › should respect --snapshot-mode=incremental @mcp-windows-latest
❌ [chrome] › mcp/cli.spec.ts:267 › save as › screenshot --full-page @mcp-macos-15
❌ [chromium] › mcp/cli.spec.ts:162 › core › dialog-accept @mcp-macos-15
❌ [chromium] › mcp/cli.spec.ts:267 › save as › screenshot --full-page @mcp-macos-15
❌ [chromium] › mcp/cli.spec.ts:342 › devtools › tracing-start-stop @mcp-macos-15
❌ [chromium] › mcp/launch.spec.ts:21 › test reopen browser @mcp-macos-15
❌ [chromium] › mcp/tabs.spec.ts:108 › close tab @mcp-macos-15
❌ [firefox] › mcp/cli.spec.ts:267 › save as › screenshot --full-page @mcp-macos-15
❌ [firefox] › mcp/cli.spec.ts:342 › devtools › tracing-start-stop @mcp-macos-15
❌ [webkit] › mcp/cli.spec.ts:267 › save as › screenshot --full-page @mcp-macos-15
❌ [webkit] › mcp/snapshot-mode.spec.ts:58 › should respect --snapshot-mode=incremental @mcp-macos-15
❌ [webkit] › mcp/test-debug.spec.ts:167 › test_debug (pause/snapshot/resume) @mcp-macos-15

3094 passed, 300 skipped


Merge workflow run.

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "tests 1"

5 failed
❌ [playwright-test] › reporter.spec.ts:251 › created › should not have internal error when steps are finished after timeout @macos-latest-node20
❌ [playwright-test] › reporter.spec.ts:251 › merged › should not have internal error when steps are finished after timeout @macos-latest-node20
❌ [playwright-test] › reporter-html.spec.ts:1037 › created › should have link for opening HTML attachments in new tab @macos-latest-node20
❌ [playwright-test] › to-have-screenshot.spec.ts:1022 › should satisfy both maxDiffPixelRatio and maxDiffPixels @macos-latest-node20
❌ [playwright-test] › update-aria-snapshot.spec.ts:669 › update-source-method › should overwrite source when specified in the config @macos-latest-node20

4 flaky ⚠️ [chromium-library] › library/screenshot.spec.ts:171 › page screenshot › should handle vh units `@chromium-ubuntu-22.04-node22`
⚠️ [firefox-library] › library/page-clock.spec.ts:282 › stubTimers › replaces global performance.timeOrigin `@firefox-ubuntu-22.04-node20`
⚠️ [playwright-test] › ui-mode-trace.spec.ts:185 › should show snapshots for steps `@macos-latest-node20`
⚠️ [playwright-test] › ui-mode-trace.spec.ts:813 › should update state on subsequent run `@macos-latest-node20`

34664 passed, 695 skipped


Merge workflow run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants