Rayrun
← Back to Discord Forum

integration with miragejs

wickynilliamsposted in #help-playwright
Open in Discord
wickynilliams
wickynilliams

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?

This thread is trying to answer question "How can one seed Mirage with specific data per test before loading the page in a SPA, and how can one setup Mirage for end-to-end tests and access it from within the tests?"

3 replies

I'm also trying to setup mirage for e2e tests. How did you setup the mirage instance in your app and how are you able to access it from within the tests? 🙂 I've been struggling with things like context.addInitScript. Would you be able to share some minimal code snippets for this integration part?

wickynilliams
wickynilliams

oh hey, only just saw this!

wickynilliams
wickynilliams

i'll do a little explanation shortly

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.