[BUG] [firefox] `window.performance` entry is incorrect for resources when using playwright's network APIs

[nikitaeverywhere]

TL;DR when using Playwright's network API to handle requests and simulate network response delay, for instance,

  await page.route('https://website.com/**', async (route) => {
    await delay(); // Resolves in 1 second
    await route.fulfill({ contentType: 'text/plain', body: '' });
  });

Browser's performance API entry of this resource is incorrect (no delay is present):

System info

• Playwright Version: 1.32.0
• Operating System: macOS Ventura 13.2.1
• Browser: latest auto-downloaded WebKit
• Other info: node v19.6.0

Source code

For demonstration, test/dummy.test.ts:

import { test } from '@playwright/test';

const RESOURCE = 'https://dummy-resource.com/test';
const delay = async (ms = 1000) =>
  await new Promise((resolve) => setTimeout(resolve, ms));

test('dummy', async ({ page }) => {
  await page.route(RESOURCE, async (route) => {
    await delay();
    await route.fulfill({ contentType: 'text/plain', body: '' });
  });
  await page.on('console', (msg) => console.log(msg));
  await page.goto('.');

  await page.evaluate(
    async ([RESOURCE]) => {
      await (await fetch(RESOURCE)).text();

      const performanceEntry = performance.getEntriesByName(RESOURCE)[0];

      // Visualize performance entry
      console.log(`\n${performanceEntry}:`);
      for (const prop in performanceEntry) {
        if (typeof performanceEntry[prop] === 'number') {
          console.log(`${prop} = ${performanceEntry[prop]}`);
        }
      }
    },
    [RESOURCE]
  );

  await delay(500);
  console.log('\n');
});

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: 'test',
  fullyParallel: false,
  retries: 0,
  workers: 1,
  use: {
    baseURL: 'http://x.com',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Run the test:

npx playwright install
npx playwright test

Expected

It is expected that performance api entry will have duration > 1000 in every browser.

Actual

Duration in Firefox is always 0.

THE GOAL

Being able to simulate network latency in all browsers, including correct performance API entries.

[nikitaeverywhere]

@mxschmitt please also consider reopening #22332 as even despite the workaround exists, it is clearly a Playwright bug which causes no "error" neither "load" event being fired on HTML elements (abnormal behavior).

[aslushnikov]

@nikitaeverywhere the reason for this behavior is that our Firefox network instrumentation is conceptually similar to Service Worker, thus the behavior. This is intended outcome.

Overall, I'd recommend against using Playwright request interception as a network shaping solution - it wouldn't cover all the usecases, e.g. it wouldn't throttle WebSockets.

To throttle "for real", we'd recommend user-land solutions:

• Charles Proxy is quite popular and works across OS'es.
• On Linux, network shaping could be configured per network interface with tools like tc. wondershaper is a convenience wrapper atop of tc and might be a good starting point.
• On Mac, there's Network Link Conditioner.

Hope this helps!