chore: adding support for page:loading event (#26779)

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

@@ -46,4 +46,10 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
 
     Cypress.backend('protocol:url:changed', { url, timestamp })
   })
+
+  Cypress.on('page:loading', (loading) => {
+    const timestamp = performance.timeOrigin + performance.now()
+
+    Cypress.backend('protocol:page:loading', { loading, timestamp })
+  })
 }

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

@@ -19,6 +19,7 @@ declare namespace Cypress {
     (action: 'before:screenshot', fn: (config: {}, fn: () => void) => void)
     (action: 'after:screenshot', config: {})
     (action: 'command:failed', fn: (command: CommandQueue, error: Error) => void): Cypress
+    (action: 'page:loading', fn: (loading: boolean) => void)
   }
 
   interface Backend {
@@ -28,6 +29,7 @@ declare namespace Cypress {
     (task: 'protocol:test:before:run:async', attributes: any): Promise<void>
     (task: 'protocol:test:after:run', attributes: any): Promise<void>
     (task: 'protocol:url:changed', input: any): Promise<void>
+    (task: 'protocol:page:loading', input: any): Promise<void>
   }
 
   interface cy {

packages/server/lib/cloud/protocol.ts

@@ -154,6 +154,10 @@ export class ProtocolManager implements ProtocolManagerShape {
     this.invokeSync('urlChanged', input)
   }
 
+  pageLoading (input: any): void {
+    this.invokeSync('pageLoading', input)
+  }
+
   async uploadCaptureArtifact (uploadUrl: string) {
     const dbPath = this._dbPath
 

packages/server/lib/socket-base.ts

@@ -470,6 +470,8 @@ export class SocketBase {
               return this.protocolManager?.viewportChanged(args[0])
             case 'protocol:url:changed':
               return this.protocolManager?.urlChanged(args[0])
+            case 'protocol:page:loading':
+              return this.protocolManager?.pageLoading(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.ts

@@ -31,6 +31,7 @@ export class AppCaptureProtocol implements ProtocolManagerShape {
   commandLogChanged = (log) => {}
   viewportChanged = (input) => {}
   urlChanged = (input) => {}
+  pageLoading = (input) => {}
   sendErrors (errors) {
     return Promise.resolve()
   }

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

@@ -235,4 +235,17 @@ describe('lib/cloud/protocol', () => {
 
     expect(protocol.urlChanged).to.be.calledWith(input)
   })
+
+  it('should be able to handle the page loading', () => {
+    sinon.stub(protocol, 'pageLoading')
+
+    const input = {
+      loading: true,
+      timestamp: 1234,
+    }
+
+    protocolManager.pageLoading(input)
+
+    expect(protocol.pageLoading).to.be.calledWith(input)
+  })
 })

packages/types/src/protocol.ts

@@ -23,6 +23,7 @@ export interface AppCaptureProtocolCommon {
   afterTest(test: Record<string, any>): void
   afterSpec (): Promise<void>
   connectToBrowser (cdpClient: CDPClient): Promise<void>
+  pageLoading (input: any): void
 }
 
 export interface AppCaptureProtocolInterface extends AppCaptureProtocolCommon {

system-tests/lib/protocolStub.ts

@@ -31,6 +31,7 @@ export class AppCaptureProtocol implements ProtocolManagerShape {
   commandLogChanged = (log) => {}
   viewportChanged = (input) => {}
   urlChanged = (input) => {}
+  pageLoading = (input) => {}
   sendErrors (errors) {
     return Promise.resolve()
   }