chore: add cdp connection to cy prompt

packages/driver/cypress/e2e/commands/prompt.cy.ts

@@ -1,5 +1,12 @@
 describe('src/cy/commands/prompt', () => {
   it('executes the prompt command', () => {
+    // TODO: (cy.prompt) We will look into supporting other browsers
+    // as this is rolled out. We will add error messages for other browsers
+    // and add tests if necessary
+    if (Cypress.isBrowser('webkit') || Cypress.isBrowser('firefox')) {
+      return
+    }
+
     cy.visit('/fixtures/dom.html')
 
     // TODO: add more tests when cy.prompt is built out, but for now this just

packages/driver/src/cy/commands/prompt/index.ts

@@ -43,6 +43,12 @@ export default (Commands, Cypress, cy) => {
   if (Cypress.config('experimentalPromptCommand')) {
     Commands.addAll({
       async prompt (message: string) {
+        if (Cypress.browser.family !== 'chromium' && Cypress.browser.name !== 'electron') {
+          // TODO: (cy.prompt) We will look into supporting other browsers (and testing them)
+          // as this is rolled out
+          throw new Error('`cy.prompt()` is not supported in this browser.')
+        }
+
         try {
           let cloud = initializedCyPrompt
 

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')
@@ -38,6 +38,7 @@ type BrowserCriClientCreateOptions = {
   onReconnect?: (client: CriClient) => void
   port: number
   protocolManager?: ProtocolManagerShape
+  cyPromptManager?: CyPromptManagerShape
   onServiceWorkerClientEvent: ServiceWorkerEventHandler
 }
 
@@ -184,10 +185,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
@@ -466,8 +469,9 @@ export class BrowserCriClient {
     // otherwise it means the the browser itself was closed
 
     // always close the connection to the page target because it was destroyed
-    browserCriClient.currentlyAttachedTarget.close().catch(() => { }),
-    browserCriClient.currentlyAttachedProtocolTarget?.close().catch(() => {})
+    browserCriClient.currentlyAttachedTarget.close().catch(() => { })
+    browserCriClient.currentlyAttachedProtocolTarget?.close().catch(() => { })
+    browserCriClient.currentlyAttachedCyPromptTarget?.close().catch(() => { })
 
     new Bluebird((resolve) => {
       // this event could fire either expectedly or unexpectedly
@@ -565,9 +569,10 @@ export class BrowserCriClient {
       // which we do when we exit out of studio in open mode.
       if (!this.currentlyAttachedProtocolTarget) {
         this.currentlyAttachedProtocolTarget = await this.currentlyAttachedTarget.clone()
-        await this.protocolManager?.connectToBrowser(this.currentlyAttachedProtocolTarget)
       }
 
+      await this.protocolManager?.connectToBrowser(this.currentlyAttachedProtocolTarget)
+
       return this.currentlyAttachedTarget
     }, this.browserName, this.port)
   }
@@ -606,8 +611,11 @@ export class BrowserCriClient {
 
       debug('target closed', this.currentlyAttachedTarget.targetId)
 
-      await this.currentlyAttachedTarget.close().catch(() => {})
-      await this.currentlyAttachedProtocolTarget?.close().catch(() => {})
+      await Promise.all([
+        this.currentlyAttachedTarget.close().catch(() => {}),
+        this.currentlyAttachedProtocolTarget?.close().catch(() => {}),
+        this.currentlyAttachedCyPromptTarget?.close().catch(() => {}),
+      ])
 
       debug('target client closed', this.currentlyAttachedTarget.targetId)
     }
@@ -620,6 +628,10 @@ export class BrowserCriClient {
       this.browserClient.off(subscription.eventName, subscription.cb as any)
     })
 
+    this.currentlyAttachedCyPromptTarget?.queue.subscriptions.forEach((subscription) => {
+      this.browserClient.off(subscription.eventName, subscription.cb as any)
+    })
+
     if (target) {
       this.currentlyAttachedTarget = await CriClient.create({
         target: target.targetId,
@@ -631,13 +643,24 @@ export class BrowserCriClient {
         browserClient: this.browserClient,
       })
 
-      // Clone the target here so that we separate the protocol client and the main client.
-      // This allows us to close the protocol client independently of the main client
-      // which we do when we exit out of studio in open mode.
-      this.currentlyAttachedProtocolTarget = await this.currentlyAttachedTarget.clone()
+      const currentTarget = this.currentlyAttachedTarget
+
+      const createProtocolTarget = async () => {
+        this.currentlyAttachedProtocolTarget = await currentTarget.clone()
+      }
+
+      const createCyPromptTarget = async () => {
+        this.currentlyAttachedCyPromptTarget = await currentTarget.clone()
+      }
+
+      await Promise.all([
+        createProtocolTarget(),
+        createCyPromptTarget(),
+      ])
     } else {
       this.currentlyAttachedTarget = undefined
       this.currentlyAttachedProtocolTarget = undefined
+      this.currentlyAttachedCyPromptTarget = undefined
     }
 
     this.resettingBrowserTargets = false
@@ -696,8 +719,11 @@ export class BrowserCriClient {
     this.connected = false
 
     if (this.currentlyAttachedTarget) {
-      await this.currentlyAttachedTarget.close()
-      await this.currentlyAttachedProtocolTarget?.close()
+      await Promise.all([
+        this.currentlyAttachedTarget.close(),
+        this.currentlyAttachedProtocolTarget?.close(),
+        this.currentlyAttachedCyPromptTarget?.close(),
+      ])
     }
 
     await this.browserClient.close()

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'
@@ -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/api/cy-prompt/get_cy_prompt_bundle.ts

@@ -10,7 +10,7 @@ import { verifySignatureFromFile } from '../../encryption'
 const pkg = require('@packages/root')
 const _delay = linearDelay(500)
 
-export const getCyPromptBundle = async ({ cyPromptUrl, projectId, bundlePath }: { cyPromptUrl: string, projectId: string, bundlePath: string }) => {
+export const getCyPromptBundle = async ({ cyPromptUrl, projectId, bundlePath }: { cyPromptUrl: string, projectId?: string, bundlePath: string }) => {
   let responseSignature: string | null = null
 
   await (asyncRetry(async () => {

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

@@ -30,7 +30,7 @@ export class CyPromptLifecycleManager {
     cloudDataSource,
     ctx,
   }: {
-    projectId: string
+    projectId?: string
     cloudDataSource: CloudDataSource
     ctx: DataContext
   }): void {
@@ -88,7 +88,7 @@ export class CyPromptLifecycleManager {
     projectId,
     cloudDataSource,
   }: {
-    projectId: string
+    projectId?: string
     cloudDataSource: CloudDataSource
   }): Promise<CyPromptManager> {
     const cyPromptSession = await postCyPromptSession({

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/cloud/cy-prompt/ensure_cy_prompt_bundle.ts

@@ -7,7 +7,7 @@ import path from 'path'
 interface EnsureCyPromptBundleOptions {
   cyPromptPath: string
   cyPromptUrl: string
-  projectId: string
+  projectId?: string
   bundlePath: string
 }
 

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'
@@ -158,7 +158,7 @@ export class ProjectBase extends EE {
     process.chdir(this.projectRoot)
 
     this._server = new ServerBase(cfg)
-    if (cfg.projectId && cfg.experimentalPromptCommand) {
+    if (cfg.experimentalPromptCommand) {
       const cyPromptLifecycleManager = new CyPromptLifecycleManager()
 
       cyPromptLifecycleManager.initializeCyPromptManager({
@@ -514,6 +514,10 @@ export class ProjectBase extends EE {
         }
       },
 
+      onCyPromptReady: async (cyPromptManager: CyPromptManagerShape) => {
+        await 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
@@ -545,7 +546,9 @@ export class SocketBase {
               case 'close:extra:targets':
                 return options.closeExtraTargets()
               case 'wait:for:cy:prompt:ready':
-                return getCtx().coreData.cyPromptLifecycleManager?.getCyPrompt().then((cyPrompt) => {
+                return getCtx().coreData.cyPromptLifecycleManager?.getCyPrompt().then(async (cyPrompt) => {
+                  await options.onCyPromptReady(cyPrompt)
+
                   return {
                     success: cyPrompt && cyPrompt.status === 'INITIALIZED',
                   }