fix(browser): dispose CDP listeners when tester disconnects (fix #10810)

packages/browser/src/node/cdp.ts

@@ -51,4 +51,12 @@ export class BrowserServerCDPHandler {
   once(event: string, listener: string): void {
     this.on(event, listener, true)
   }
+
+  dispose(): void {
+    for (const [event, listener] of Object.entries(this.listeners)) {
+      this.session.off(event as any, listener)
+    }
+    this.listenerIds = {}
+    this.listeners = {}
+  }
 }

packages/browser/src/node/projectParent.ts

@@ -216,8 +216,9 @@ export class ParentBrowserProject {
     return handler
   }
 
-  removeCDPHandler(sessionId: string): void {
-    this.cdps.delete(sessionId)
+  removeCDPHandler(rpcId: string): void {
+    this.cdps.get(rpcId)?.dispose()
+    this.cdps.delete(rpcId)
   }
 
   async formatScripts(scripts: BrowserScript[] | undefined): Promise<HtmlTagDescriptor[]> {

test/browser/specs/cdp.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from 'vitest'
+import { instances, provider, runInlineBrowserTests } from './utils'
+
+test.runIf(provider.name === 'playwright')('removes CDP listeners when a tester disconnects', async () => {
+  const chromium = instances.find(instance => instance.browser === 'chromium')
+
+  expect.assert(chromium)
+
+  const { stderr, testTree } = await runInlineBrowserTests(
+    {
+      'a.test.ts': `
+        import { test } from 'vitest'
+        import { cdp } from 'vitest/browser'
+
+        test('subscribes to console events', async () => {
+          await cdp().send('Console.enable')
+          cdp().on('Console.messageAdded', () => {})
+
+          await cdp().send('Runtime.evaluate', { expression: 'undefined' })
+        })
+      `,
+      'b.test.ts': `
+        import { expect, test } from 'vitest'
+
+        test('runs after the subscribed file', async () => {
+          console.log('TRIGGER STALE CDP LISTENER')
+          await new Promise(resolve => setTimeout(resolve, 50))
+          expect(1).toBe(1)
+        })
+      `,
+    },
+    {
+      fileParallelism: false,
+      browser: {
+        instances: [chromium],
+      },
+    },
+  )
+
+  expect(stderr).toBe('')
+  expect(testTree()).toMatchInlineSnapshot(`
+    {
+      "a.test.ts": {
+        "subscribes to console events": "passed",
+      },
+      "b.test.ts": {
+        "runs after the subscribed file": "passed",
+      },
+    }
+  `)
+})

test/core/test/browser-cdp-handler.test.ts

@@ -0,0 +1,68 @@
+import type { CDPSession } from 'vitest/node'
+import type { WebSocketBrowserRPC } from '../../../packages/browser/src/types'
+import { describe, expect, test, vi } from 'vitest'
+import { BrowserServerCDPHandler } from '../../../packages/browser/src/node/cdp'
+
+function createSession() {
+  const listeners = new Map<string, (payload: unknown) => void>()
+  return {
+    send: vi.fn(),
+    on: vi.fn((event: string, listener: (payload: unknown) => void) => {
+      listeners.set(event, listener)
+    }),
+    off: vi.fn((event: string) => {
+      listeners.delete(event)
+    }),
+    once: vi.fn(),
+    emit(event: string, payload: unknown) {
+      listeners.get(event)?.(payload)
+    },
+  } as unknown as CDPSession & { emit: (event: string, payload: unknown) => void }
+}
+
+function createTester() {
+  return {
+    cdpEvent: vi.fn(),
+  } as unknown as WebSocketBrowserRPC
+}
+
+describe('BrowserServerCDPHandler', () => {
+  test('forwards session events to the tester while subscribed', () => {
+    const session = createSession()
+    const tester = createTester()
+    const handler = new BrowserServerCDPHandler(session, tester)
+
+    handler.on('Console.messageAdded', 'listener-1')
+    session.emit('Console.messageAdded', { text: 'hello' })
+
+    expect(tester.cdpEvent).toHaveBeenCalledWith('Console.messageAdded', { text: 'hello' })
+  })
+
+  test('dispose() removes every registered listener from the session', () => {
+    const session = createSession()
+    const tester = createTester()
+    const handler = new BrowserServerCDPHandler(session, tester)
+
+    handler.on('Console.messageAdded', 'listener-1')
+    handler.on('Debugger.scriptParsed', 'listener-2')
+
+    handler.dispose()
+
+    expect(session.off).toHaveBeenCalledWith('Console.messageAdded', expect.any(Function))
+    expect(session.off).toHaveBeenCalledWith('Debugger.scriptParsed', expect.any(Function))
+  })
+
+  test('dispose() stops forwarding events that fire after teardown', () => {
+    const session = createSession()
+    const tester = createTester()
+    const handler = new BrowserServerCDPHandler(session, tester)
+
+    handler.on('Console.messageAdded', 'listener-1')
+    handler.dispose()
+
+    // simulates a stale CDP event arriving after the tester's RPC channel closed
+    session.emit('Console.messageAdded', { text: 'stale' })
+
+    expect(tester.cdpEvent).not.toHaveBeenCalled()
+  })
+})