misc: Replace `chrome-remote-interface` with `puppeteer` for CDP communication

[AtofStryker]

Overview

We should replace the current chrome-remote-interface dependency with Puppeteer for CDP (Chrome DevTools Protocol) communication. This would allow us to use the --remote-debugging-pipe option instead of --remote-debugging-port, providing a more secure and reliable connection method.

Current Behavior

Currently, Cypress uses chrome-remote-interface (v0.33.3) for CDP communication, which:

• Requires a WebSocket connection over a network port (--remote-debugging-port)
• Is susceptible to WebSocket connection issues (as seen in the error handling code)
• Has reconnection logic to handle WebSocket disconnections

Desired Behavior

Replace chrome-remote-interface with Puppeteer's CDP implementation to:

1. Use --remote-debugging-pipe for communication instead of --remote-debugging-port
2. Leverage Puppeteer's built-in CDP session management
3. Use the low-level CDPSession.send() API for direct protocol communication

Implementation Details

Files to Modify

• packages/server/package.json: Replace chrome-remote-interface with puppeteer
• packages/server/lib/browsers/cdp-connection.ts: Main CDP connection implementation
• packages/server/lib/browsers/browser-cri-client.ts: Browser CDP client
• Related test files

Proposed Changes

1. Add Puppeteer as a dependency:

{
  "dependencies": {
    "puppeteer": "^22.0.0"  // Latest stable version
  }
}

2. Update the CDP connection implementation to use Puppeteer:

import { CDPSession, connect } from 'puppeteer';

export class CDPConnection {
  private _connection: CDPSession;

  async connect(): Promise<void> {
    // Connect using pipe instead of WebSocket
    const browser = await connect({
      transport: 'pipe'
    });
    
    const target = await browser.target();
    this._connection = await target.createCDPSession();
    
    // Set up event handling
    this._connection.on('*', this._broadcastEvent);
  }

  async send<T extends CdpCommand>(
    command: T,
    data?: ProtocolMapping.Commands[T]['paramsType'][0],
    sessionId?: string,
  ): Promise<ProtocolMapping.Commands[T]['returnType']> {
    return this._connection.send(command, data);
  }
}

Benefits

1. Security: Using pipes instead of network ports reduces attack surface
2. Reliability: Direct pipe communication is more stable than WebSocket
3. Maintenance: Puppeteer is well-maintained and follows Chrome releases closely
4. Features: Access to additional Puppeteer features if needed in the future

Potential Challenges

1. Migration effort to update all CDP-related code
2. Need to ensure all current CDP functionality is preserved
3. Possible changes needed in error handling and reconnection logic
4. Testing implications across different environments

Questions to Consider

1. Should we maintain backward compatibility with --remote-debugging-port?
   • We likely want to keep backwards capability as 3rd party libraries like cypress-real-events using the Cypress.automation remote:debugger:protocol working https://github.com/dmtrKovalenko/cypress-real-events/blob/main/src/fireCdpCommand.ts#L5

References

• Puppeteer CDPSession API
• Chrome DevTools Protocol
• Current implementation: packages/server/lib/browsers/cdp-connection.ts