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

…nnect (#29210)

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

* add test

* add changelog

* Update cli/CHANGELOG.md

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update CHANGELOG.md

---------

Co-authored-by: Bill Glesias <bglesias@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

cli/CHANGELOG.md

@@ -11,6 +11,7 @@ _Released 4/2/2024 (PENDING)_
 
 - Fixed an issue where Cypress was not executing beyond the first spec in `cypress run` for versions of Firefox 124 and up when a custom user agent was provided. Fixes [#29190](https://github.com/cypress-io/cypress/issues/29190).
 - Fixed a bug where fields using arrays in `cypress.config` are not correctly processed. Fixes [#27103](https://github.com/cypress-io/cypress/issues/27103). Fixed in [#27312](https://github.com/cypress-io/cypress/pull/27312).
+- Fixed a hang where Cypress would run indefinitely while recording to the cloud when CDP disconnects during the middle of a test. Fixes [#29209](https://github.com/cypress-io/cypress/issues/29209).
 - Fixed a bug where option values containing quotation marks could not be selected. Fixes [#29213](https://github.com/cypress-io/cypress/issues/29213)
 
 ## 13.7.1

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

@@ -317,6 +317,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