Emulating Slow Network in Playwright

Hi,

I've been developing Waku, a React framework, for a couple of years now. It started as my personal project and is now a team effort to explore React Server Components. Check it out: waku.gg

Why I Wanted to Simulate a Slow Network

We use Playwright for end-to-end (E2E) testing in Waku. Ideally, E2E tests should avoid relying on timeouts, and instead wait for specific conditions or signals. But while debugging a feature, I needed to simulate a slow network—specifically to test a pending state handled by useTransition.

Fortunately, there’s a simple way to do this in Playwright, which I’ll share today.

The Solution

Here’s the code we use:
🔗 View on GitHub

await page.route(/.*\/RSC\/.*/, async (route) => {
  await new Promise((r) => setTimeout(r, 100));
  await route.continue();
});

This doesn’t truly slow down the network, but it adds a delay for matching routes. With this, the tests run more stably and let me observe pending UI states more reliably.

A Note on Routing Patterns

Initially, my attempt didn’t work. I tried something like:

await page.route('/RSC/**', async (route) => {

This probably didn’t match the intended URL, though I’m not exactly sure why. I haven’t figured out a good way to debug this pattern matching yet—suggestions are welcome!

Looking Ahead

We’re planning to add more E2E tests to the Waku repository. If you’re interested in contributing, you’re very welcome!

Happy coding.