feat: swap websocket transport with cdp add binding/evaluate (#27592)

Co-authored-by: Brian Mann <brian.mann86@gmail.com>

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -178,63 +178,6 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
         expect(ctx.actions.project.initializeActiveProject).to.be.called
       })
     })
-
-    it('moves away from runner and back, disconnects websocket and reconnects it correctly', () => {
-      cy.openProject('cypress-in-cypress')
-      cy.startAppServer('component')
-
-      cy.visitApp()
-      cy.contains('TestComponent.spec').click()
-      cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
-      cy.get('.passed > .num').should('contain', 1)
-      cy.get('.failed > .num').should('contain', '--')
-
-      cy.findByTestId('sidebar-link-runs-page').click()
-      cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
-
-      cy.findByTestId('sidebar-link-specs-page').click()
-      cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
-
-      cy.contains('TestComponent.spec').click()
-      cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
-
-      cy.window().then((win) => {
-        const connected = () => win.ws?.connected
-
-        win.ws?.close()
-
-        cy.wrap({
-          connected,
-        }).invoke('connected').should('be.false')
-
-        win.ws?.connect()
-
-        cy.wrap({
-          connected,
-        }).invoke('connected').should('be.true')
-      })
-
-      cy.withCtx(async (ctx, o) => {
-        await ctx.actions.file.writeFileInProject(o.path, `
-  import React from 'react'
-  import { mount } from 'cypress/react'
-
-  describe('TestComponent', () => {
-    it('renders the new test component', () => {
-      mount(<div>Component Test</div>)
-
-      cy.contains('Component Test').should('be.visible')
-    })
-  })
-  `)
-      }, { path: getPathForPlatform('src/TestComponent.spec.jsx') })
-
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the new test component')
-      cy.get('.passed > .num').should('contain', 1)
-      cy.get('.failed > .num').should('contain', '--')
-    })
   })
 
   context('custom config', () => {

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -231,55 +231,6 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.get('[data-model-state="passed"]').should('contain', 'expected true to be true')
   })
 
-  it('moves away from runner and back, disconnects websocket and reconnects it correctly', () => {
-    cy.visitApp()
-    cy.contains('dom-content.spec').click()
-    cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-    cy.get('.passed > .num').should('contain', 1)
-    cy.get('.failed > .num').should('contain', '--')
-
-    cy.findByTestId('sidebar-link-runs-page').click()
-    cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
-
-    cy.findByTestId('sidebar-link-specs-page').click()
-    cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
-
-    cy.contains('dom-content.spec').click()
-    cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-
-    cy.window().then((win) => {
-      const connected = () => win.ws?.connected
-
-      win.ws?.close()
-
-      cy.wrap({
-        connected,
-      }).invoke('connected').should('be.false')
-
-      win.ws?.connect()
-
-      cy.wrap({
-        connected,
-      }).invoke('connected').should('be.true')
-    })
-
-    cy.withCtx(async (ctx, o) => {
-      await ctx.actions.file.writeFileInProject(o.path, `
-describe('Dom Content', () => {
-  it('renders the new test content', () => {
-    cy.visit('cypress/e2e/dom-content.html')
-  })
-})
-`)
-    }, { path: getPathForPlatform('cypress/e2e/dom-content.spec.js') })
-
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the new test content')
-    cy.get('.passed > .num').should('contain', 1)
-    cy.get('.failed > .num').should('contain', '--')
-  })
-
   describe('accessibility', () => {
     it('has no axe violations in specs list panel', () => {
       cy.visitApp()

packages/app/cypress/e2e/cypress-in-cypress.cy.ts

@@ -27,7 +27,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.waitForSpecToFinish()
 
       cy.withCtx((ctx) => {
-        ctx.coreData.servers.appSocketServer?.emit('automation:disconnected')
+        ctx.coreData.servers.cdpSocketServer?.emit('automation:disconnected')
       })
 
       cy.contains('h3', 'The Cypress extension has disconnected')
@@ -403,7 +403,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.withCtx(async (ctx) => {
         const currentProject = ctx.currentProject?.replaceAll('\\', '/')
         const specPath = `${currentProject}/cypress/e2e/dom-content.spec.js`
-        const url = `http://127.0.0.1:${ctx.gqlServerPort}/__launchpad/graphql?`
+        const url = `http://127.0.0.1:${ctx.coreData.servers.gqlServerPort}/__launchpad/graphql?`
         const payload = `{"query":"mutation{\\nrunSpec(specPath:\\"${specPath}\\"){\\n__typename\\n... on RunSpecResponse{\\ntestingType\\nbrowser{\\nid\\nname\\n}\\nspec{\\nid\\nname\\n}\\n}\\n}\\n}","variables":null}`
 
         ctx.coreData.app.browserStatus = 'open'

packages/app/cypress/e2e/runs.cy.ts

@@ -1,4 +1,5 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+
 import type { SinonStub } from 'sinon'
 
 function moveToRunsPage (): void {
@@ -616,26 +617,26 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('displays a copy button and copies correct command in Component Testing', () => {
       scaffoldTestingTypeAndVisitRunsPage('component')
       cy.withCtx(async (ctx, o) => {
-        o.sinon.stub(ctx.electronApi, 'copyTextToClipboard')
+        o.sinon.stub(ctx.config.electronApi, 'copyTextToClipboard')
       })
 
       cy.get('[data-cy="copy-button"]').click()
       cy.contains('Copied!')
       cy.withRetryableCtx((ctx) => {
-        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('npx cypress run --component --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
+        expect(ctx.config.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('npx cypress run --component --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
       })
     })
 
     it('displays a copy button and copies correct command in E2E', () => {
       scaffoldTestingTypeAndVisitRunsPage('e2e')
       cy.withCtx(async (ctx, o) => {
-        o.sinon.stub(ctx.electronApi, 'copyTextToClipboard')
+        o.sinon.stub(ctx.config.electronApi, 'copyTextToClipboard')
       })
 
       cy.get('[data-cy="copy-button"]').click()
       cy.contains('Copied!')
       cy.withRetryableCtx((ctx) => {
-        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('npx cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
+        expect(ctx.config.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('npx cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
       })
     })
   })

packages/app/cypress/e2e/settings.cy.ts

@@ -28,7 +28,7 @@ describe('App: Settings', () => {
   describe('Cloud Settings', () => {
     it('shows the projectId section when there is a projectId and shows override from CLI', () => {
       cy.withCtx(async (ctx, o) => {
-        o.sinon.stub(ctx.electronApi, 'copyTextToClipboard')
+        o.sinon.stub(ctx.config.electronApi, 'copyTextToClipboard')
       })
 
       cy.startAppServer('e2e')
@@ -40,7 +40,7 @@ describe('App: Settings', () => {
       cy.findByText('Copy').click()
       cy.findByText('Copied!').should('be.visible')
       cy.withRetryableCtx((ctx) => {
-        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('fromCli')
+        expect(ctx.config.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('fromCli')
       })
     })
 

packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts

@@ -1,4 +1,5 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+
 import type { SinonStub } from 'sinon'
 
 describe('CreateCloudOrgModalSubscription', { viewportWidth: 1200 }, () => {
@@ -51,7 +52,7 @@ describe('CreateCloudOrgModalSubscription', { viewportWidth: 1200 }, () => {
       })
 
       cy.withCtx(async (ctx) => {
-        await ctx.util.fetch(`http://127.0.0.1:${ctx.gqlServerPort}/cloud-notification?operationName=orgCreated`)
+        await ctx.util.fetch(`http://127.0.0.1:${ctx.coreData.servers.gqlServerPort}/cloud-notification?operationName=orgCreated`)
       })
 
       cy.findByText(defaultMessages.runs.connect.modal.selectProject.manageOrgs)

packages/app/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../driver/types/internal-types-lite.d.ts" />
 
-import type { Socket } from '@packages/socket/lib/browser'
+import type { SocketShape } from '@packages/socket/lib/types'
 import type MobX from 'mobx'
 import type { EventManager } from './src/runner/event-manager'
 
@@ -21,7 +21,7 @@ export {}
  */
 declare global {
   interface Window {
-    ws?: Socket
+    ws?: SocketShape
     getEventManager: () => EventManager
     UnifiedRunner: {
       /**

packages/app/src/runner/event-manager.ts

@@ -7,7 +7,7 @@ import type { LocalBusEmitsMap, LocalBusEventMap, DriverToLocalBus, SocketToDriv
 import type { RunState, CachedTestState, AutomationElementId, FileDetails, ReporterStartInfo, ReporterRunState } from '@packages/types'
 
 import { logger } from './logger'
-import type { Socket } from '@packages/socket/lib/browser'
+import type { SocketShape } from '@packages/socket/lib/types'
 import { automation, useRunnerUiStore, useSpecStore } from '../store'
 import { useScreenshotStore } from '../store/screenshot-store'
 import { useStudioStore } from '../store/studio-store'
@@ -57,7 +57,7 @@ export class EventManager {
   selectorPlaygroundModel: any
   cypressInCypressMochaEvents: CypressInCypressMochaEvent[] = []
   // Used for testing the experimentalSingleTabRunMode experiment. Ensures AUT is correctly destroyed between specs.
-  ws: Socket
+  ws: SocketShape
   specStore: ReturnType<typeof useSpecStore>
   studioStore: ReturnType<typeof useStudioStore>
 
@@ -68,7 +68,7 @@ export class EventManager {
     private Mobx: typeof MobX,
     // selectorPlaygroundModel singleton
     selectorPlaygroundModel: any,
-    ws: Socket,
+    ws: SocketShape,
   ) {
     this.selectorPlaygroundModel = selectorPlaygroundModel
     this.ws = ws
@@ -134,7 +134,7 @@ export class EventManager {
       telemetry.setRootContext(context)
     })
 
-    this.ws.on('automation:push:message', (msg, data = {}) => {
+    this.ws.on('automation:push:message', (msg, data: any = {}) => {
       if (!Cypress) return
 
       switch (msg) {

packages/data-context/src/DataActions.ts

@@ -10,6 +10,7 @@ import {
   BrowserActions,
   DevActions,
   AuthActions,
+  ServersActions,
   CohortsActions,
   CodegenActions,
   CloudProjectActions,
@@ -78,6 +79,11 @@ export class DataActions {
     return new BrowserActions(this.ctx)
   }
 
+  @cached
+  get servers () {
+    return new ServersActions(this.ctx)
+  }
+
   @cached
   get versions () {
     return new VersionsActions(this.ctx)