feat: skip common asset requests by default to improve performance (#14)

grxy · kettanaito · web-flow · commit 69eb8f680e37 · 2026-02-09T16:14:31.000+01:00
Co-authored-by: Artem Zakharchenko &lt;kettanaito@gmail.com&gt;
diff --git a/src/fixture.ts b/src/fixture.ts
@@ -16,6 +16,7 @@ import {
   RequestHandler,
   WebSocketHandler,
   handleRequest,
+  isCommonAssetRequest,
 } from 'msw'
 import {
   type WebSocketClientEventMap,
@@ -30,6 +31,14 @@ import {
 export interface CreateNetworkFixtureArgs {
   initialHandlers?: Array<RequestHandler | WebSocketHandler>
   onUnhandledRequest?: UnhandledRequestStrategy
+  /**
+   * Skip common asset requests (e.g. `*.html`, `*.css`, `*.js`, etc).
+   * This improves performance for certian projects.
+   * @default true
+   *
+   * @see https://mswjs.io/docs/api/is-common-asset-request
+   */
+  skipAssetRequests?: boolean
 }
 
 /**
@@ -61,6 +70,7 @@ export function createNetworkFixture(
     async ({ context }, use) => {
       const worker = new NetworkFixture({
         context,
+        skipAssetRequests: args?.skipAssetRequests ?? true,
         initialHandlers: args?.initialHandlers || [],
         onUnhandledRequest: args?.onUnhandledRequest,
       })
@@ -85,6 +95,7 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   constructor(
     protected args: {
       context: BrowserContext
+      skipAssetRequests: boolean
       initialHandlers: Array<RequestHandler | WebSocketHandler>
       onUnhandledRequest?: UnhandledRequestStrategy
     },
@@ -103,6 +114,16 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
           body: request.postDataBuffer() as ArrayBuffer | null,
         })
 
+        /**
+         * @note Skip common asset requests (default).
+         * Playwright seems to experience performance degradation when routing all
+         * requests through the matching logic below.
+         * @see https://github.com/mswjs/playwright/issues/13
+         */
+        if (this.args.skipAssetRequests && isCommonAssetRequest(fetchRequest)) {
+          return route.continue()
+        }
+
         const handlers = this.handlersController
           .currentHandlers()
           .filter((handler) => {
diff --git a/tests/requests.test.ts b/tests/requests.test.ts
@@ -1,5 +1,5 @@
 import { test as testBase, expect } from '@playwright/test'
-import { http } from 'msw'
+import { http, HttpResponse } from 'msw'
 import { createNetworkFixture, type NetworkFixture } from '../src/index.js'
 
 interface Fixtures {
diff --git a/tests/skip-asset-requests.test.ts b/tests/skip-asset-requests.test.ts
@@ -0,0 +1,53 @@
+import { test as testBase, expect } from '@playwright/test'
+import { http, HttpResponse } from 'msw'
+import { createNetworkFixture, type NetworkFixture } from '../src/index.js'
+
+interface Fixtures {
+  network: NetworkFixture
+}
+
+const test = testBase.extend<Fixtures>({
+  network: createNetworkFixture(),
+})
+
+test('skips asset requests by default', async ({ network, page }) => {
+  network.use(
+    http.get('/index.html', () => {
+      throw new Error('Must never see this')
+    }),
+  )
+
+  await page.goto('/')
+  const responseBody = await page.evaluate(async () => {
+    const res = await fetch('/index.html')
+    return res.text()
+  })
+
+  expect(responseBody).toContain('<!DOCTYPE html')
+})
+
+const testWithAssets = testBase.extend<Fixtures>({
+  network: createNetworkFixture({
+    skipAssetRequests: false,
+  }),
+})
+
+testWithAssets(
+  'intercepts asset requests when `skipAssetRequests` is set to false',
+  async ({ network, page }) => {
+    network.use(
+      http.get('/index.html', () => {
+        return HttpResponse.text('Mocked HTML')
+      }),
+    )
+
+    await page.goto('/')
+
+    const responseBody = await page.evaluate(async () => {
+      const response = await fetch('/index.html')
+      return response.text()
+    })
+
+    expect(responseBody).toBe('Mocked HTML')
+  },
+)
