feat(har): include `WebSocket` in `.har` by dcrousso · Pull Request #41015 · microsoft/playwright

dcrousso · 2026-05-26T22:54:19Z

add an entry for each WebSocket when generating a .har

also include data for each sent/received frame in a custom property _webSocketMessages (for more info see https://developer.chrome.com/blog/new-in-devtools-76#websocket)

both Chrome and WebKit already capture the wallTime for the initial request and a timestamp for each subsequent message (i.e. diff the timestamp relative to the initial timestamp and add the wallTime in order to determine the current wallTime)

unfortunately Firefox does not have this so fall back to Date.now() / 1000

fixes #30315

dcrousso · 2026-05-26T22:55:36Z

@microsoft-github-policy-service agree company="Microsoft"

yury-s · 2026-05-26T23:18:53Z

+    this._requestTimestamp = timestamp;
+  }
+
+  private _normalizeTimestamp(timestamp: number | undefined): number {


rename to _toWalltime?

yury-s · 2026-05-26T23:25:49Z

  }

+  setTimestampBaseline(wallTime: number, timestamp: number) {
+    this._requestWallTime = wallTime;


In createHarEntry we only use startedDateTime and _monotonicTime both of which are computed on the playwright end at the moment the entry is created. Maybe it's good enough to have the same for the websocket frames?

i figured since both Chromium and WebKit already have these values we might as well use them

but yeah if you feel strongly that we shouldn't then i absolutely can remove

yury-s · 2026-05-26T23:30:26Z

+  const wsEntry = log.entries.find(e => e.request.url === wsUrl)!;
+  expect(wsEntry).toBeTruthy();
+  expect(wsEntry.response.status).toBe(101);
+  expect((wsEntry as any)._resourceType).toBe('websocket');


cast the entry once to the har type to avoid repetitive as any

yury-s

In case of content: 'attach' we need to store the content as external resources, let's also add a test for that.

yury-s · 2026-05-26T23:32:30Z

+      return;
+
+    const pageEntry = this._createPageEntryIfNeeded(page);
+    const harEntry = createHarEntry(pageEntry?.id, 'GET', url, page.mainFrame().guid, this._options);


we'll need to populate headers too

yeah i realized that after i uploaded this PR 😅

working on that right now

yury-s · 2026-05-28T22:50:20Z

      frameId: this._frameId,
      wsid: webSocketSerialID + '',
      opcode: frame.opCode,
      data: frame.opCode !== 1 ? btoa(frame.payload) : frame.payload,


this should go into playwright-browsers

yury-s · 2026-05-28T22:52:29Z

      wsid: string;
      opcode: number;
      data: string;
+      timestamp: number;


this file is regenerated during firefox rolls, no manual changes please

yury-s · 2026-05-28T22:55:33Z

  }

  private _buildSessionListeners(session: WVSession): RegisteredListener[] {
+    const setCookieSeparator = process.platform === 'darwin' ? ',' : 'playwright-set-cookie-separator';


I don't think this will work in stock webkit as the constant is a part of our patch: https://wksearch.azurewebsites.net/?path=%2Fhome%2Fjoe%2Fwebkit%2FSource%2FWebCore%2Fplatform%2Fnetwork%2FHTTPHeaderMap.cpp&line=242 We can probably address it later, but let's reuse it in WVInterceptableRequest, simular to WKPage.

ooohhh good point this is using system WebKit

yury-s · 2026-05-28T23:06:52Z

    }
    (request as any)[this._entrySymbol] = harEntry;
+    // In Firefox, WebSockets have additional events once opened.
+    // In Chromium and WebKit, WebSockets have an entirely different lifecycle and won't reach this.


We should unify this logic across browsers, either add a synthetic opened event or merge opened logic into onWebSocketResponse or something else. We should be able to hide this specifics from the clients. Or maybe I don't understand why this comment is here despite the code being the same for all browsers.

yury-s · 2026-05-28T23:19:09Z

  };

-  constructor(context: contexts.BrowserContext, frame: frames.Frame | null, serviceWorker: pages.Worker | null, redirectedFrom: Request | null, documentId: string | undefined,
+  constructor(context: contexts.BrowserContext, frame: frames.Frame | null, serviceWorker: pages.Worker | null, redirectedFrom: Request | null, requestId: string, documentId: string | undefined,


Since requestId is a required parameter, let's place it before all optional ones.

technically none of these are actually optional as they explicitly state the allowed types instead of using ? (e.g. documentId: string | undefined vs documentId?: string)

regardless, i wasnt sure about the ordering here since there are other required properties (e.g. url, resourceType, method, etc.) that come after the optional ones

i figured id put it near the other ID parameter but i can move it earlier if you think that would read better

yury-s · 2026-05-29T22:19:41Z

+
+    const pageEntry = this._createPageEntryIfNeeded(page);
+    const harEntry = createHarEntry(pageEntry?.id, 'GET', url, page.mainFrame().guid, this._options);
+    harEntry._resourceType = 'websocket';


Should we populate it for other types from Request.resourceType and maybe place to harEntry.request._resourceType (to match playwright api) or is it not worth it?

i can do that in a followup

yury-s · 2026-05-29T22:25:52Z

+        }),
+        eventsHelper.addEventListener(webSocket, network.WebSocket.Events.Close, () => {
+          if (this._started)
+            this._delegate.onEntryFinished(harEntry);


do we need to remove listeners on this event? my concern is the case when the page creates/closes many web sockets, all these listeners will stay in _eventListeners map till har stops, buy perhaps it's fine.

yury-s · 2026-05-29T22:29:38Z

+
+export type WebSocketMessage = {
+  type: 'send' | 'receive';
+  time: number;


timestamp? there is already time field in har that means duration which might be confusing.

i agree that it's confusing, but this matches how Chrome does it <https://developer.chrome.com/blog/new-in-devtools-76#websocket>

yury-s · 2026-05-29T22:33:12Z

  });
 });
+
+it.describe('WebSocket', () => {


nit: consider putting it in a separate file

add an entry for each `WebSocket` when generating a `.har` also include data for each sent/received frame in a custom property `_webSocketMessages` (for more info see <https://developer.chrome.com/blog/new-in-devtools-76#websocket>) both Chrome and WebKit already capture the `wallTime` for the initial request and a `timestamp` for each subsequent message (i.e. diff the `timestamp` relative to the initial `timestamp` and add the `wallTime` in order to determine the current `wallTime`) unfortunately Firefox does not have this so fall back to `Date.now() / 1000`

github-actions · 2026-05-30T18:05:36Z

Test results for "MCP"

7233 passed, 1113 skipped

Merge workflow run.

github-actions · 2026-05-30T18:10:35Z

Test results for "tests 1"

1 failed
❌ [firefox-library] › library/har-websocket.spec.ts:96 › should include websocket messages @firefox-ubuntu-22.04-node20

1 flaky

⚠️ [chromium-library] › library/beforeunload.spec.ts:130 › should support dismissing the dialog multiple times `@chromium-ubuntu-22.04-node24`

44068 passed, 864 skipped

Merge workflow run.

yury-s reviewed May 26, 2026

View reviewed changes