integration with miragejs

hey all. i have a SPA which uses a mock "server" provided by https://miragejs.com/, and i have some tests written with playwright. this works great so far! but now i want to be able to seed mirage with specific data per test, so that i can test more scenarios.

note: mirage is not a server as such, it is in-memory in the browser (not a service worker). it intercepts fetch calls and returns data you have seeded it with.

i created a custom fixture which allows me to do things like: await seed.create("pet", { name: "fido" }), which proxies to page.evaluate , ultimately calling a method on a mirage instance. btw fixtures are really neat!

however i have a bit of a chicken and egg problem. since mirage is in-memory in the browser, i cannot set data before i goto() a page, but i need the data to be there before loading the page, so that any fetches return the specific data for my test.

my workaround so far has been to first goto('/'), then seed data, then only navigate via links (since it's an SPA, no reload), avoiding further use of goto (since it would clear the in-memory mirage instace). but i don't think this is sustainable/scalable, and will be confusing to other devs. so i am looking for other approaches.

i would appreciate any suggestions. one idea i am toying with is for my custom seed fixture to write to storageState, allowing me to rehydrate migrage on page load. but i am wondering if there is a more natural hook for this kind of node/browser/page interplay?