Connect to Chrome Remote Interface when launching Chrome and record video

packages/server/__snapshots__/2_cdp_spec.ts.js

@@ -0,0 +1,30 @@
+exports['e2e cdp fails when remote debugging port cannot be connected to 1'] = `
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:    1.2.3                                                                              │
+  │ Browser:    FooBrowser 88                                                                      │
+  │ Specs:      1 found (spec.ts)                                                                  │
+  │ Searched:   cypress/integration/spec.ts                                                        │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  Running: spec.ts...                                                                      (1 of 1) 
+Cypress could not make a connection to the Chrome DevTools Protocol after 5 seconds.
+
+Without this, your tests can not run. Please check your Chrome installation and try again.
+
+The CDP port requested was 777.
+
+Error details:
+
+Error: connect ECONNREFUSED 127.0.0.1:777
+    at stack trace line
+
+
+`

packages/server/__snapshots__/protocol_spec.ts.js

@@ -1,4 +1,4 @@
-exports['lib/browsers/protocol ._getDelayMsForRetry retries as expected 1'] = [
+exports['lib/browsers/protocol ._getDelayMsForRetry retries as expected for up to 5 seconds 1'] = [
   100,
   100,
   100,
@@ -7,6 +7,14 @@ exports['lib/browsers/protocol ._getDelayMsForRetry retries as expected 1'] = [
   100,
   100,
   100,
+  100,
+  100,
+  500,
+  500,
+  500,
+  500,
+  500,
+  500,
   500,
   500
 ]

packages/server/lib/browsers/protocol.js

@@ -1,17 +1,18 @@
 const _ = require('lodash')
 const CRI = require('chrome-remote-interface')
 const { connect } = require('@packages/network')
+const errors = require('../errors')
 const Promise = require('bluebird')
 const la = require('lazy-ass')
 const is = require('check-more-types')
 const debug = require('debug')('cypress:server:protocol')
 
 function _getDelayMsForRetry (i) {
-  if (i < 8) {
+  if (i < 10) {
     return 100
   }
 
-  if (i < 10) {
+  if (i < 18) {
     return 500
   }
 }
@@ -23,6 +24,9 @@ function connectAsync (opts) {
       ...opts,
     }, cb)
   })
+  .catch((err) => {
+    errors.throw('CDP_COULD_NOT_CONNECT', opts.port, err)
+  })
 }
 
 /**

packages/server/lib/errors.coffee

@@ -842,6 +842,18 @@ getMsgByType = (type, arg1 = {}, arg2) ->
 
       Please do not modify CYPRESS_ENV value.
       """
+    when "CDP_COULD_NOT_CONNECT"
+      """
+      Cypress could not make a connection to the Chrome DevTools Protocol after 5 seconds.
+
+      Without this, your tests can not run. Please check your Chrome installation and try again.
+
+      The CDP port requested was #{chalk.yellow(arg1)}.
+
+      Error details:
+
+      #{arg2.stack}
+      """
 
 get = (type, arg1, arg2) ->
   msg = getMsgByType(type, arg1, arg2)

packages/server/package.json

@@ -151,6 +151,7 @@
     "@cypress/debugging-proxy": "2.0.1",
     "@cypress/json-schemas": "5.32.2",
     "@cypress/sinon-chai": "1.1.0",
+    "@types/chai-as-promised": "7.1.2",
     "babel-plugin-add-module-exports": "1.0.2",
     "babelify": "10.0.0",
     "bin-up": "1.2.2",

packages/server/test/e2e/2_cdp_spec.ts

@@ -0,0 +1,21 @@
+const e2e = require('../support/helpers/e2e')
+const Fixtures = require('../support/helpers/fixtures')
+
+describe('e2e cdp', function () {
+  e2e.setup()
+
+  it('fails when remote debugging port cannot be connected to', function () {
+    return e2e.exec(this, {
+      project: Fixtures.projectPath('remote-debugging-port-removed'),
+      spec: 'spec.ts',
+      browser: 'chrome',
+      expectedExitCode: 1,
+      snapshot: true,
+      onStdout: (stdout: string) => {
+        return stdout
+        .replace(/(port requested was )(\d+)/, '$1777')
+        .replace(/(127\.0\.0\.1:)(\d+)/, '$1777')
+      },
+    })
+  })
+})

packages/server/test/support/fixtures/projects/remote-debugging-port-removed/cypress.json

@@ -0,0 +1 @@
+{}

packages/server/test/support/fixtures/projects/remote-debugging-port-removed/cypress/integration/spec.ts

@@ -0,0 +1,3 @@
+describe('passes', () => {
+  it('passes', () => {})
+})

packages/server/test/support/fixtures/projects/remote-debugging-port-removed/cypress/plugins.js

@@ -0,0 +1,14 @@
+const la = require('lazy-ass')
+
+module.exports = (on) => {
+  on('before:browser:launch', (browser = {}, args) => {
+    la(browser.family === 'chrome', 'this test can only be run with a chrome-family browser')
+
+    // remove debugging port so that the browser connection fails
+    const newArgs = args.filter((arg) => !arg.startsWith('--remote-debugging-port='))
+
+    la(newArgs.length === args.length - 1, 'exactly one argument should have been removed')
+
+    return newArgs
+  })
+}

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

@@ -1,14 +1,19 @@
 import '../../spec_helper'
+import _ from 'lodash'
+import 'chai-as-promised' // for the types!
+import chalk from 'chalk'
 import { connect } from '@packages/network'
 import CRI from 'chrome-remote-interface'
 import { expect } from 'chai'
+import humanInterval from 'human-interval'
 import protocol from '../../../lib/browsers/protocol'
 import sinon from 'sinon'
 import snapshot from 'snap-shot-it'
+import { stripIndents } from 'common-tags'
 
 describe('lib/browsers/protocol', function () {
   context('._getDelayMsForRetry', function () {
-    it('retries as expected', function () {
+    it('retries as expected for up to 5 seconds', function () {
       let delays = []
       let delay : number
       let i = 0
@@ -18,16 +23,32 @@ describe('lib/browsers/protocol', function () {
         i++
       }
 
+      expect(_.sum(delays)).to.eq(humanInterval('5 seconds'))
+
       snapshot(delays)
     })
   })
 
   context('.getWsTargetFor', function () {
     it('rejects if CDP connection fails', function () {
-      sinon.stub(connect, 'createRetryingSocket').callsArgWith(1, new Error('cdp connection failure'))
+      const innerErr = new Error('cdp connection failure')
+
+      sinon.stub(connect, 'createRetryingSocket').callsArgWith(1, innerErr)
       const p = protocol.getWsTargetFor(12345)
 
+      const expectedError = stripIndents`
+        Cypress could not make a connection to the Chrome DevTools Protocol after 5 seconds.
+
+        Without this, your tests can not run. Please check your Chrome installation and try again.
+
+        The CDP port requested was ${chalk.yellow('12345')}.
+
+        Error details:
+      `
+
       return expect(p).to.eventually.be.rejected
+      .and.property('message').include(expectedError)
+      .and.include(innerErr.message)
     })
 
     it('returns the debugger URL of the first about:blank tab', function () {