chore: adding viewport:changed to protocol (#26508)

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

@@ -15,6 +15,7 @@ import { getAutIframeModel } from '.'
 import { handlePausing } from './events/pausing'
 import { addTelemetryListeners } from './events/telemetry'
 import { telemetry } from '@packages/telemetry/src/browser'
+import { addCaptureProtocolListeners } from './events/capture-protocol'
 
 export type CypressInCypressMochaEvent = Array<Array<string | Record<string, any>>>
 
@@ -462,6 +463,7 @@ export class EventManager {
 
   _addListeners () {
     addTelemetryListeners(Cypress)
+    addCaptureProtocolListeners(Cypress)
 
     Cypress.on('message', (msg, data, cb) => {
       this.ws.emit('client:request', msg, data, cb)
@@ -503,7 +505,6 @@ export class EventManager {
       this._interceptStudio(displayProps)
 
       this.reporterBus.emit('reporter:log:add', displayProps)
-      Cypress.backend('protocol:command:log:added', displayProps)
     })
 
     Cypress.on('log:changed', (log) => {
@@ -517,7 +518,6 @@ export class EventManager {
       this._interceptStudio(displayProps)
 
       this.reporterBus.emit('reporter:log:state:changed', displayProps)
-      Cypress.backend('protocol:command:log:changed', displayProps)
     })
 
     // TODO: MOVE BACK INTO useEventManager. Verify this works
@@ -620,8 +620,6 @@ export class EventManager {
         })
       }
 
-      await Cypress.backend('protocol:test:before:run:async', attributes)
-
       Cypress.primaryOriginCommunicator.toAllSpecBridges('test:before:run:async', ...args)
     })
 
@@ -631,8 +629,6 @@ export class EventManager {
       if (this.studioStore.isOpen && attributes.state !== 'passed') {
         this.studioStore.testFailed()
       }
-
-      Cypress.backend('protocol:test:after:run', attributes)
     })
 
     handlePausing(this.getCypress, this.reporterBus)

packages/app/src/runner/events/capture-protocol.ts

@@ -0,0 +1,33 @@
+export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
+  Cypress.on('log:added', (log) => {
+    const displayProps = Cypress.runner.getDisplayPropsForLog(log)
+
+    Cypress.backend('protocol:command:log:added', displayProps)
+  })
+
+  Cypress.on('log:changed', (log) => {
+    const displayProps = Cypress.runner.getDisplayPropsForLog(log)
+
+    Cypress.backend('protocol:command:log:changed', displayProps)
+  })
+
+  Cypress.on('viewport:changed', (viewport) => {
+    const timestamp = performance.timeOrigin + performance.now()
+
+    Cypress.backend('protocol:viewport:changed', {
+      viewport: {
+        width: viewport.viewportWidth,
+        height: viewport.viewportHeight,
+      },
+      timestamp,
+    })
+  })
+
+  Cypress.on('test:before:run:async', async (attributes) => {
+    await Cypress.backend('protocol:test:before:run:async', attributes)
+  })
+
+  Cypress.on('test:after:run', (attributes) => {
+    Cypress.backend('protocol:test:after:run', attributes)
+  })
+}

packages/app/src/runner/events/telemetry.ts

@@ -1,6 +1,6 @@
 import { telemetry } from '@packages/telemetry/src/browser'
 
-export const addTelemetryListeners = (Cypress) => {
+export const addTelemetryListeners = (Cypress: Cypress.Cypress) => {
   Cypress.on('test:before:run', (attributes, test) => {
     // we emit the 'test:before:run' events within various driver tests
     try {

packages/driver/types/internal-types-lite.d.ts

@@ -4,6 +4,10 @@
 // All of the types needed by packages/app, without any of the additional APIs used in the driver only
 
 declare namespace Cypress {
+  interface Cypress {
+    runner: any
+  }
+
   interface Actions {
     (action: 'internal:window:load', fn: (details: InternalWindowLoadDetails) => void)
     (action: 'net:stubbing:event', frame: any)
@@ -15,6 +19,14 @@ declare namespace Cypress {
     (action: 'after:screenshot', config: {})
   }
 
+  interface Backend {
+    (task: 'protocol:command:log:added', log: any): Promise<void>
+    (task: 'protocol:command:log:changed', log: any): Promise<void>
+    (task: 'protocol:viewport:changed', input: any): Promise<void>
+    (task: 'protocol:test:before:run:async', attributes: any): Promise<void>
+    (task: 'protocol:test:after:run', attributes: any): Promise<void>
+  }
+
   interface cy {
     /**
      * If `as` is chained to the current command, return the alias name used.

packages/server/lib/cloud/protocol.ts

@@ -125,6 +125,14 @@ class ProtocolManagerImpl implements ProtocolManager {
 
     this.protocol?.commandLogChanged(log)
   }
+
+  viewportChanged (input: any): void {
+    if (!this.protocolEnabled()) {
+      return
+    }
+
+    this.protocol?.viewportChanged(input)
+  }
 }
 
 export default ProtocolManagerImpl

packages/server/lib/socket-base.ts

@@ -466,6 +466,8 @@ export class SocketBase {
               return this.protocolManager?.commandLogAdded(args[0])
             case 'protocol:command:log:changed':
               return this.protocolManager?.commandLogChanged(args[0])
+            case 'protocol:viewport:changed':
+              return this.protocolManager?.viewportChanged(args[0])
             case 'telemetry':
               return (telemetry.exporter() as OTLPTraceExporterCloud)?.send(args[0], () => {}, (err) => {
                 debug('error exporting telemetry data from browser %s', err)

packages/server/test/support/fixtures/cloud/protocol/test-protocol.js

@@ -11,6 +11,7 @@ const AppCaptureProtocol = class {
     this.beforeTest = this.beforeTest.bind(this)
     this.commandLogAdded = this.commandLogAdded.bind(this)
     this.commandLogChanged = this.commandLogChanged.bind(this)
+    this.viewportChanged = this.viewportChanged.bind(this)
   }
 
   connectToBrowser (cdpClient) {
@@ -22,6 +23,7 @@ const AppCaptureProtocol = class {
   beforeTest (test) {}
   commandLogAdded (log) {}
   commandLogChanged (log) {}
+  viewportChanged (input) {}
 }
 
 module.exports = {

packages/server/test/unit/cloud/protocol_spec.ts

@@ -167,4 +167,20 @@ describe('lib/cloud/protocol', () => {
 
     expect(protocol.commandLogChanged).to.be.calledWith(log)
   })
+
+  it('should be able to handle changing the viewport', () => {
+    sinon.stub(protocol, 'viewportChanged')
+
+    const input = {
+      viewport: {
+        width: 100,
+        height: 200,
+      },
+      timestamp: 1234,
+    }
+
+    protocolManager.viewportChanged(input)
+
+    expect(protocol.viewportChanged).to.be.calledWith(input)
+  })
 })

packages/types/src/protocol.ts

@@ -22,6 +22,7 @@ export interface AppCaptureProtocolInterface {
   afterTest(test: Record<string, any>): void
   commandLogAdded (log: any): void
   commandLogChanged (log: any): void
+  viewportChanged (input: any): void
 }
 
 export interface ProtocolManager {
@@ -35,4 +36,5 @@ export interface ProtocolManager {
   afterTest(test: Record<string, any>): void
   commandLogAdded (log: any): void
   commandLogChanged (log: any): void
+  viewportChanged (input: any): void
 }