chore: add cdp connection to cy prompt

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

@@ -8,7 +8,7 @@ import * as errors from '../errors'
 import type { CypressError } from '@packages/errors'
 import { CriClient, DEFAULT_NETWORK_ENABLE_OPTIONS } from './cri-client'
 import { serviceWorkerClientEventHandler, serviceWorkerClientEventHandlerName } from '@packages/proxy/lib/http/util/service-worker-manager'
-import type { ProtocolManagerShape } from '@packages/types'
+import type { CyPromptManagerShape, ProtocolManagerShape } from '@packages/types'
 import type { ServiceWorkerEventHandler } from '@packages/proxy/lib/http/util/service-worker-manager'
 
 const debug = Debug('cypress:server:browsers:browser-cri-client')
@@ -26,6 +26,7 @@ type BrowserCriClientOptions = {
   browserName: string
   onAsynchronousError: (err: CypressError) => void
   protocolManager?: ProtocolManagerShape
+  cyPromptManager?: CyPromptManagerShape
   fullyManageTabs?: boolean
   onServiceWorkerClientEvent: ServiceWorkerEventHandler
 }
@@ -38,6 +39,7 @@ type BrowserCriClientCreateOptions = {
   onReconnect?: (client: CriClient) => void
   port: number
   protocolManager?: ProtocolManagerShape
+  cyPromptManager?: CyPromptManagerShape
   onServiceWorkerClientEvent: ServiceWorkerEventHandler
 }
 
@@ -184,10 +186,12 @@ export class BrowserCriClient {
   private browserName: string
   private onAsynchronousError: (err: CypressError) => void
   private protocolManager?: ProtocolManagerShape
+  private cyPromptManager?: CyPromptManagerShape
   private fullyManageTabs?: boolean
   onServiceWorkerClientEvent: ServiceWorkerEventHandler
   currentlyAttachedTarget: CriClient | undefined
   currentlyAttachedProtocolTarget: CriClient | undefined
+  currentlyAttachedCyPromptTarget: CriClient | undefined
   // whenever we instantiate the instance we're already connected bc
   // we receive an underlying CRI connection
   // TODO: remove "connected" in favor of closing/closed or disconnected
@@ -207,6 +211,7 @@ export class BrowserCriClient {
     this.browserName = options.browserName
     this.onAsynchronousError = options.onAsynchronousError
     this.protocolManager = options.protocolManager
+    this.cyPromptManager = options.cyPromptManager
     this.fullyManageTabs = options.fullyManageTabs
     this.onServiceWorkerClientEvent = options.onServiceWorkerClientEvent
   }
@@ -223,6 +228,7 @@ export class BrowserCriClient {
    * @param options.onReconnect callback for when the browser cri client reconnects to the browser
    * @param options.port the port to which to connect
    * @param options.protocolManager the protocol manager to use with the browser cri client
+   * @param options.cyPromptManager the cy prompt manager to use with the browser cri client
    * @param options.onServiceWorkerClientEvent callback for when a service worker fetch event is received
    * @returns a wrapper around the chrome remote interface that is connected to the browser target
    */
@@ -235,6 +241,7 @@ export class BrowserCriClient {
       onReconnect,
       port,
       protocolManager,
+      cyPromptManager,
       onServiceWorkerClientEvent,
     } = options
 
@@ -259,6 +266,7 @@ export class BrowserCriClient {
         browserName,
         onAsynchronousError,
         protocolManager,
+        cyPromptManager,
         fullyManageTabs,
         onServiceWorkerClientEvent,
       })
@@ -568,6 +576,12 @@ export class BrowserCriClient {
         await this.protocolManager?.connectToBrowser(this.currentlyAttachedProtocolTarget)
       }
 
+      // Clone the cy prompt target here so that we separate the cy propt client and the main client.
+      if (!this.currentlyAttachedCyPromptTarget) {
+        this.currentlyAttachedCyPromptTarget = await this.currentlyAttachedTarget.clone()
+        await this.cyPromptManager?.connectToBrowser(this.currentlyAttachedCyPromptTarget)
+      }
+
       return this.currentlyAttachedTarget
     }, this.browserName, this.port)
   }

packages/server/lib/browsers/chrome.ts

@@ -21,7 +21,7 @@ import type { CriClient } from './cri-client'
 import type { Automation } from '../automation'
 import memory from './memory'
 
-import type { BrowserLaunchOpts, BrowserNewTabOpts, ProtocolManagerShape, RunModeVideoApi } from '@packages/types'
+import type { BrowserLaunchOpts, BrowserNewTabOpts, ProtocolManagerShape, CyPromptManagerShape, RunModeVideoApi } from '@packages/types'
 import type { CDPSocketServer } from '@packages/socket/lib/cdp-socket'
 import { DEFAULT_CHROME_FLAGS } from '../util/chromium_flags'
 
@@ -412,6 +412,18 @@ export = {
     await options.protocolManager?.connectToBrowser(browserCriClient.currentlyAttachedProtocolTarget)
   },
 
+  async connectCyPromptToBrowser (options: { cyPromptManager?: CyPromptManagerShape }) {
+    const browserCriClient = this._getBrowserCriClient()
+
+    if (!browserCriClient?.currentlyAttachedTarget) throw new Error('Missing pageCriClient in connectCyPromptToBrowser')
+
+    if (!browserCriClient.currentlyAttachedCyPromptTarget) {
+      browserCriClient.currentlyAttachedCyPromptTarget = await browserCriClient.currentlyAttachedTarget.clone()
+    }
+
+    await options.cyPromptManager?.connectToBrowser(browserCriClient.currentlyAttachedCyPromptTarget)
+  },
+
   async closeProtocolConnection () {
     const browserCriClient = this._getBrowserCriClient()
 

packages/server/lib/browsers/electron.ts

@@ -12,7 +12,7 @@ import type { Browser, BrowserInstance, GracefulShutdownOptions } from './types'
 // tslint:disable-next-line no-implicit-dependencies - electron dep needs to be defined
 import type { BrowserWindow } from 'electron'
 import type { Automation } from '../automation'
-import type { BrowserLaunchOpts, Preferences, ProtocolManagerShape, RunModeVideoApi } from '@packages/types'
+import type { BrowserLaunchOpts, Preferences, ProtocolManagerShape, CyPromptManagerShape, RunModeVideoApi } from '@packages/types'
 import type { CDPSocketServer } from '@packages/socket/lib/cdp-socket'
 import memory from './memory'
 import { BrowserCriClient } from './browser-cri-client'
@@ -276,7 +276,7 @@ export = {
     return this._launch(win, url, automation, electronOptions)
   },
 
-  async _launch (win: BrowserWindow, url: string, automation: Automation, options: ElectronOpts, videoApi?: RunModeVideoApi, protocolManager?: ProtocolManagerShape, cdpSocketServer?: CDPSocketServer) {
+  async _launch (win: BrowserWindow, url: string, automation: Automation, options: ElectronOpts, videoApi?: RunModeVideoApi, protocolManager?: ProtocolManagerShape, cyPromptManager?: CyPromptManagerShape, cdpSocketServer?: CDPSocketServer) {
     if (options.show) {
       menu.set({ withInternalDevTools: true })
     }
@@ -500,6 +500,19 @@ export = {
     await options.protocolManager?.connectToBrowser(browserCriClient.currentlyAttachedProtocolTarget)
   },
 
+  async connectCyPromptToBrowser (options: { cyPromptManager?: CyPromptManagerShape }) {
+    const browserCriClient = this._getBrowserCriClient()
+
+    if (!browserCriClient?.currentlyAttachedTarget) throw new Error('Missing pageCriClient in connectCyPromptToBrowser')
+
+    // Clone the target here so that we separate the cy prompt client and the main client.
+    if (!browserCriClient.currentlyAttachedCyPromptTarget) {
+      browserCriClient.currentlyAttachedCyPromptTarget = await browserCriClient.currentlyAttachedTarget.clone()
+    }
+
+    await options.cyPromptManager?.connectToBrowser(browserCriClient.currentlyAttachedCyPromptTarget)
+  },
+
   async closeProtocolConnection () {
     const browserCriClient = this._getBrowserCriClient()
 

packages/server/lib/browsers/firefox.ts

@@ -439,6 +439,10 @@ export function connectProtocolToBrowser (): Promise<void> {
   throw new Error('Protocol is not yet supported in firefox.')
 }
 
+export function connectCyPromptToBrowser (): Promise<void> {
+  throw new Error('CyPrompt is not yet supported in firefox.')
+}
+
 export function closeProtocolConnection (): Promise<void> {
   throw new Error('Protocol is not yet supported in firefox.')
 }

packages/server/lib/browsers/index.ts

@@ -7,7 +7,7 @@ import check from 'check-more-types'
 import { exec } from 'child_process'
 import util from 'util'
 import os from 'os'
-import { BROWSER_FAMILY, BrowserLaunchOpts, BrowserNewTabOpts, FoundBrowser, ProtocolManagerShape } from '@packages/types'
+import { BROWSER_FAMILY, BrowserLaunchOpts, BrowserNewTabOpts, FoundBrowser, ProtocolManagerShape, CyPromptManagerShape } from '@packages/types'
 import type { Browser, BrowserInstance, BrowserLauncher } from './types'
 import type { Automation } from '../automation'
 import type { DataContext } from '@packages/data-context'
@@ -147,6 +147,12 @@ export = {
     await browserLauncher.connectProtocolToBrowser(options)
   },
 
+  async connectCyPromptToBrowser (options: { browser: Browser, foundBrowsers?: FoundBrowser[], cyPromptManager?: CyPromptManagerShape }) {
+    const browserLauncher = await getBrowserLauncher(options.browser, options.foundBrowsers || [])
+
+    await browserLauncher.connectCyPromptToBrowser(options)
+  },
+
   async closeProtocolConnection (options: { browser: Browser, foundBrowsers?: FoundBrowser[] }) {
     const browserLauncher = await getBrowserLauncher(options.browser, options.foundBrowsers || [])
 

packages/server/lib/browsers/types.ts

@@ -1,4 +1,4 @@
-import type { FoundBrowser, BrowserLaunchOpts, BrowserNewTabOpts, ProtocolManagerShape } from '@packages/types'
+import type { FoundBrowser, BrowserLaunchOpts, BrowserNewTabOpts, ProtocolManagerShape, CyPromptManagerShape } from '@packages/types'
 import type { EventEmitter } from 'events'
 import type { Automation } from '../automation'
 import type { CDPSocketServer } from '@packages/socket/lib/cdp-socket'
@@ -45,6 +45,10 @@ export type BrowserLauncher = {
    * Used to connect the protocol to an existing browser.
    */
   connectProtocolToBrowser: (options: { protocolManager?: ProtocolManagerShape }) => Promise<void>
+  /**
+   * Used to connect the cy prompt to an existing browser.
+   */
+  connectCyPromptToBrowser: (options: { cyPromptManager?: CyPromptManagerShape }) => Promise<void>
   /**
    * Closes the protocol connection to the browser.
    */

packages/server/lib/browsers/webkit.ts

@@ -40,6 +40,10 @@ export function connectProtocolToBrowser (): Promise<void> {
   throw new Error('Protocol is not yet supported in WebKit.')
 }
 
+export function connectCyPromptToBrowser (): Promise<void> {
+  throw new Error('CyPrompt is not yet supported in WebKit.')
+}
+
 export function closeProtocolConnection (): Promise<void> {
   throw new Error('Protocol is not yet supported in WebKit.')
 }

packages/server/lib/cloud/cy-prompt/CyPromptManager.ts

@@ -1,4 +1,4 @@
-import type { CyPromptManagerShape, CyPromptStatus, CyPromptServerDefaultShape, CyPromptServerShape, CyPromptCloudApi } from '@packages/types'
+import type { CyPromptManagerShape, CyPromptStatus, CyPromptServerDefaultShape, CyPromptServerShape, CyPromptCloudApi, CyPromptCDPClient } from '@packages/types'
 import type { Router } from 'express'
 import Debug from 'debug'
 import { requireScript } from '../require_script'
@@ -40,7 +40,13 @@ export class CyPromptManager implements CyPromptManagerShape {
 
   async handleBackendRequest (eventName: string, ...args: any[]): Promise<any> {
     if (this._cyPromptServer) {
-      return this.invokeAsync('handleBackendRequest', { isEssential: true }, eventName, ...args)
+      return this.invokeAsync('handleBackendRequest', { isEssential: false }, eventName, ...args)
+    }
+  }
+
+  connectToBrowser (target: CyPromptCDPClient): void {
+    if (this._cyPromptServer) {
+      return this.invokeSync('connectToBrowser', { isEssential: true }, target)
     }
   }
 
@@ -54,6 +60,7 @@ export class CyPromptManager implements CyPromptManagerShape {
     }
 
     try {
+      // @ts-expect-error - TS not associating the method & args properly, even though we know it's correct
       return this._cyPromptServer[method].apply(this._cyPromptServer, args)
     } catch (error: unknown) {
       let actualError: Error

packages/server/lib/open_project.ts

@@ -235,6 +235,10 @@ export class OpenProject {
     await browsers.connectProtocolToBrowser(options)
   }
 
+  async connectCyPromptToBrowser (options) {
+    await browsers.connectCyPromptToBrowser(options)
+  }
+
   changeUrlToSpec (spec: Cypress.Spec) {
     if (!this.projectBase) {
       debug('No projectBase, cannot change url')

packages/server/lib/project-base.ts

@@ -17,7 +17,7 @@ import { SocketCt } from './socket-ct'
 import { SocketE2E } from './socket-e2e'
 import { ensureProp } from './util/class-helpers'
 import system from './util/system'
-import { BannersState, FoundBrowser, FoundSpec, OpenProjectLaunchOptions, ProtocolManagerShape, ReceivedCypressOptions, ResolvedConfigurationOptions, TestingType, VideoRecording, AutomationCommands, StudioMetricsTypes } from '@packages/types'
+import { BannersState, FoundBrowser, FoundSpec, OpenProjectLaunchOptions, ProtocolManagerShape, CyPromptManagerShape, ReceivedCypressOptions, ResolvedConfigurationOptions, TestingType, VideoRecording, AutomationCommands, StudioMetricsTypes } from '@packages/types'
 import { DataContext, getCtx } from '@packages/data-context'
 import { createHmac } from 'crypto'
 import { ServerBase } from './server-base'
@@ -515,6 +515,10 @@ export class ProjectBase extends EE {
         }
       },
 
+      onCyPromptReady: (cyPromptManager: CyPromptManagerShape) => {
+        browsers.connectCyPromptToBrowser({ browser: this.browser, foundBrowsers: this.options.browsers, cyPromptManager })
+      },
+
       onCaptureVideoFrames: (data: any) => {
         // TODO: move this to browser automation middleware
         this.emit('capture:video:frames', data)

packages/server/lib/socket-base.ts

@@ -154,6 +154,7 @@ export class SocketBase {
       onCaptureVideoFrames () {},
       onStudioInit () {},
       onStudioDestroy () {},
+      onCyPromptReady () {},
     })
 
     let automationClient
@@ -451,6 +452,7 @@ export class SocketBase {
         let cyPrompt: CyPromptManagerShape | undefined
 
         getCtx().coreData.cyPromptLifecycleManager?.registerCyPromptReadyListener((cp) => {
+          options.onCyPromptReady(cp)
           cyPrompt = cp
         })
 

packages/server/test/support/fixtures/cloud/cy-prompt/test-cy-prompt.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import type { CyPromptServerShape, CyPromptServerDefaultShape } from '@packages/types'
+import type { CyPromptServerShape, CyPromptServerDefaultShape, CyPromptCDPClient } from '@packages/types'
 import type { Router } from 'express'
 
 class CyPromptServer implements CyPromptServerShape {
@@ -11,6 +11,10 @@ class CyPromptServer implements CyPromptServerShape {
   handleBackendRequest (eventName: string, ...args: any[]): Promise<any> {
     return Promise.resolve()
   }
+
+  connectToBrowser (criClient: CyPromptCDPClient): void {
+    // This is a test implementation that does nothing
+  }
 }
 
 const cyPromptServerDefault: CyPromptServerDefaultShape = {