fix: re-initialize DOM subscriptions from a full snapshot on cdp reconnect

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 3/26/2024 (PENDING)_
 
+**Bugfixes:**
+
+- Fixed a hang in the test runner where Cypress would run indefinitely in record mode when CDP disconnects during the middle of a test. Fixes [#29209].
+
 **Dependency Updates:**
 
 - Updated jose from `4.11.2` to `4.15.5`. Addressed in [#29086](/~https://github.com/cypress-io/cypress/pull/29086).

packages/server/lib/browsers/cri-client.ts

@@ -208,6 +208,11 @@ export const create = async ({
     if (onReconnect) {
       onReconnect(client)
     }
+
+    // When CDP disconnects, it will automatically reconnect and re-apply various subscriptions
+    // (e.g. DOM.enable, Network.enable, etc.). However, we need to restart tracking DOM mutations
+    // from scratch. We do this by capturing a brand new full snapshot of the DOM.
+    await protocolManager?.cdpReconnect()
   }
 
   const retryReconnect = async () => {

packages/server/lib/cloud/protocol.ts

@@ -380,6 +380,10 @@ export class ProtocolManager implements ProtocolManagerShape {
     }
   }
 
+  async cdpReconnect () {
+    await this.invokeAsync('cdpReconnect', { isEssential: true })
+  }
+
   async reportNonFatalErrors (context?: {
     osName: string
     projectSlug: string

packages/server/test/unit/browsers/cri-client_spec.ts

@@ -1,5 +1,6 @@
 import EventEmitter from 'events'
 import { create } from '../../../lib/browsers/cri-client'
+import { ProtocolManagerShape } from '@packages/types'
 
 const { expect, proxyquire, sinon } = require('../../spec_helper')
 
@@ -23,7 +24,7 @@ describe('lib/browsers/cri-client', function () {
     _notifier: EventEmitter
   }
   let onError: sinon.SinonStub
-  let getClient: (options?: { host?: string, fullyManageTabs?: boolean }) => ReturnType<typeof create>
+  let getClient: (options?: { host?: string, fullyManageTabs?: boolean, protocolManager?: ProtocolManagerShape }) => ReturnType<typeof create>
 
   beforeEach(function () {
     send = sinon.stub()
@@ -49,8 +50,8 @@ describe('lib/browsers/cri-client', function () {
       'chrome-remote-interface': criImport,
     })
 
-    getClient = ({ host, fullyManageTabs } = {}) => {
-      return criClient.create({ target: DEBUGGER_URL, host, onAsynchronousError: onError, fullyManageTabs })
+    getClient = ({ host, fullyManageTabs, protocolManager } = {}) => {
+      return criClient.create({ target: DEBUGGER_URL, host, onAsynchronousError: onError, fullyManageTabs, protocolManager })
     }
   })
 
@@ -134,10 +135,16 @@ describe('lib/browsers/cri-client', function () {
   })
 
   describe('on reconnect', () => {
-    it('resends *.enable commands', async () => {
+    it('resends *.enable commands and notifies protocol manager', async () => {
       criStub._notifier.on = sinon.stub()
 
-      const client = await getClient()
+      const protocolManager = {
+        cdpReconnect: sinon.stub(),
+      } as ProtocolManagerShape
+
+      const client = await getClient({
+        protocolManager,
+      })
 
       client.send('Page.enable')
       // @ts-ignore
@@ -157,6 +164,7 @@ describe('lib/browsers/cri-client', function () {
       expect(criStub.send).to.be.calledTwice
       expect(criStub.send).to.be.calledWith('Page.enable')
       expect(criStub.send).to.be.calledWith('Network.enable')
+      expect(protocolManager.cdpReconnect).to.be.called
     })
 
     it('errors if reconnecting fails', async () => {

packages/types/src/protocol.ts

@@ -18,6 +18,7 @@ export interface CDPClient {
 // TODO(protocol): This is basic for now but will evolve as we progress with the protocol work
 
 export interface AppCaptureProtocolCommon {
+  cdpReconnect (): Promise<void>
   addRunnables (runnables: any): void
   commandLogAdded (log: any): void
   commandLogChanged (log: any): void