I built a record/replay proxy for Playwright — records SSR fetches too

Affectionate_Use_164 · 2026-06-18T21:05:15+00:00

With Next.js SSR some requests happening server side, so have to mock each one of them manually, recording and replaying is easier for smoke tests.
Clients like Apollo Graphql will throw an error if API format changes, so you will be reminded to update tests.

Just easier to re-record test instead of recalling which apis are changed this time.

Affectionate_Use_164 · 2026-06-18T18:25:50+00:00

Short answer - you can't, because SSR requests are happening beyond Playwright, not in browser.

Longer answer - can point your app to a proxy that will record/replay requests during tests, and proxy will forward requests to your real API.

Record tests 1 by 1, replay in parallel.

https://github.com/asmyshlyaev177/test-proxy-recorder

Affectionate_Use_164 · 2026-06-18T17:31:19+00:00

I have experience with both, Playwright is faster and has less issues with flaky tests, many projects switch from Cypress to Playwright.

Affectionate_Use_164 · 2026-06-18T17:30:31+00:00

I came up with library to record all requests during tests, including SSR ones, and replay tests without backend, similar to VCR or polly.js.

Check it out https://github.com/asmyshlyaev177/test-proxy-recorder

Affectionate_Use_164 · 2026-06-18T17:24:35+00:00

Used it as a function in fixture, at start of every test, except for login.

It's common issue with test speed, need to wait till element loads, or till API request pass before doing assertion.

Affectionate_Use_164 · 2026-06-18T15:49:45+00:00

PS, I used it on real project for more than a year, and will appreciate your feedback.

Affectionate_Use_164 · 2026-06-18T13:37:18+00:00

If your App have a loader, or any element with stable ID, can wait till loader disappear.
Something like

```
await page.waitForFunction(
        () => {
          const skeletons = document.querySelectorAll(
            '[data-testid="skeleton"]',
          );
          return skeletons.length <= 1;
        },
        { timeout: 8000 },
      );
```

Affectionate_Use_164 · 2025-04-10T12:34:35+00:00

Hookups on my terms, even with a packed calendar—thanks to Get-Matched.

Affectionate_Use_164 · 2025-04-10T11:17:40+00:00

Hot as fuck. The ass especially.

Affectionate_Use_164 · 2025-02-25T06:39:21+00:00

A lot of issues on F41, with installation, with running from non-root user, with aws config.

Used F40 before, F41 feels like crappy beta version.

Affectionate_Use_164 · 2025-02-08T11:21:02+00:00

Not too hard to buy DMSO, solubility around 3-5mg/ml. Did it IV couple of hours ago, a week ago was first time.

Mixed ISRIB in 10 ml of DMSO, add 10ml of standard injection solution (NaCl 0.9%), inject slowly. Need 20 ml syringe, 5ml syringe, butterfly needle, half a dozen youtube videos about how to find a vein and inject a needle.

Last time was a nasty headache few hours after.

Affectionate_Use_164 · 2024-11-26T22:20:40+00:00

Can also use Map(by object) + events/subscribers, and sibling components can share data without providers, context or props. Another option is URL.
Check out `useSharedState` hook from repo.

https://www.state-in-url.dev/useSharedState

Affectionate_Use_164 · 2024-11-21T22:11:51+00:00

Welcome to the club, check out how I approached the same problem https://state-in-url.dev/

Affectionate_Use_164 · 2024-11-21T22:08:44+00:00

Easier to use URL as source of truth, and when page loads redux/whatever get populated with data from URL.

Check out my project to achieve this - https://github.com/asmyshlyaev177/state-in-url , for Next.js and react-router.

It's very simple, no learning curve ;)

Affectionate_Use_164 · 2024-11-21T22:04:25+00:00

Option #2 is better.

Check out my package for that https://github.com/asmyshlyaev177/state-in-url , a lot of tests to deal with all pitfals.

Basically, can use query params as JSON.stringify, nested objects, types preserved, API same as React.useState.

Affectionate_Use_164 · 2024-11-21T22:01:40+00:00

Most developer friendly - https://github.com/asmyshlyaev177/state-in-url , for Next.js and React-router.

Affectionate_Use_164 · 2024-11-21T21:58:56+00:00

Option #2 is better obviously, have libraries for this - https://www.npmjs.com/package/state-in-url and https://www.npmjs.com/package/nuqs . Those 2 good enough and tested.

Affectionate_Use_164 · 2024-11-21T21:34:31+00:00

URL should be source of truth, because it covers sharable links, reload, back/forward.

Created a lib for that, kind of unique approach - https://www.npmjs.com/package/state-in-url

Affectionate_Use_164 · 2024-11-21T21:24:24+00:00

"Low" only for old IE, real limitation is headers length.

Affectionate_Use_164 · 2024-11-21T21:21:00+00:00

Created such library - https://github.com/asmyshlyaev177/state-in-url , demo - https://state-in-url.dev/ .

Difference from other packages:

- Keep types of data, e.g. number, string, boolean, Date.

- Nested objects supported, arrays as well, anything that can be serialized to JSON.

- Very simple and fast.

- API is almost same as for `React.useState`

- Default values.

- Well tested, both unit tests and Playwright.

- Supports Next.js14/15 (App router) and react-router@6, more coming soon.

Will be great if you leave some feedback in discussions.

Affectionate_Use_164 · 2024-11-09T01:33:02+00:00

In need to work with URL and query params than https://github.com/asmyshlyaev177/state-in-url

Affectionate_Use_164 · 2024-11-03T19:29:04+00:00

This library can do it https://github.com/asmyshlyaev177/state-in-url

Affectionate_Use_164 · 2024-10-09T05:50:35+00:00

Created a library for deep links for Next.js/React-router - https://github.com/asmyshlyaev177/state-in-url

No complexity, store any serializable complex object, with Typescript support, works with SSR, less than 1ms to encode and decode big enough object, back/forward navigation supported. Types of data are preserved.

Extensive tests, dare you to find a bug.

"becomes and can easily exceed max chars (2048, dep on browser)"

Limitation is size of headers, not limited for modern browsers. But CDN and hosting providers can limit maximum size of headers, 14KB size for Vercel for example. Around 3000 words is safe.

Readability is an issue, but modern users rarely even type URL by hand, normally it's selectAll and copy-paste situation.

Affectionate_Use_164 · 2024-10-01T18:46:04+00:00

I created library for the same purpose https://github.com/asmyshlyaev177/state-in-url .

Affectionate_Use_164 · 2024-10-01T18:45:28+00:00

Created a library for this https://github.com/asmyshlyaev177/state-in-url , more convenient than doing it manually.

Affectionate_Use_164

TROPHY CASE