chore: add cdp connection to cy prompt

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

@@ -1,5 +1,10 @@
 describe('src/cy/commands/prompt', () => {
   it('executes the prompt command', () => {
+    // TODO: test the error messages
+    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,11 @@ 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: handle this better
+          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')
@@ -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.prompt() 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'
@@ -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',
                   }

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 = {