refactor: move more of video capture into browser automations

packages/resolve-dist/lib/index.ts

@@ -33,7 +33,5 @@ export const getPathToIndex = (pkg: RunnerPkg) => {
 }
 
 export const getPathToDesktopIndex = (graphqlPort: number) => {
- // For now, if we see that there's a CYPRESS_INTERNAL_VITE_DEV
- // we assume we're running Cypress targeting that (dev server)
  return `http://localhost:${graphqlPort}/__launchpad/index.html`
 }

packages/server/lib/browsers/cdp_automation.ts

@@ -10,6 +10,7 @@ import { URL } from 'url'
 
 import type { Automation } from '../automation'
 import type { ResourceType, BrowserPreRequest, BrowserResponseReceived } from '@packages/proxy'
+import type { WriteVideoFrame } from '@packages/types'
 
 export type CdpCommand = keyof ProtocolMapping.Commands
 
@@ -168,9 +169,9 @@ export const normalizeResourceType = (resourceType: string | undefined): Resourc
  return ffToStandardResourceTypeMap[resourceType] || 'other'
 }
 
-type SendDebuggerCommand = (message: CdpCommand, data?: any) => Promise<any>
+type SendDebuggerCommand = <T extends CdpCommand>(message: T, data?: any) => Promise<ProtocolMapping.Commands[T]['returnType']>
 type SendCloseCommand = (shouldKeepTabOpen: boolean) => Promise<any> | void
-type OnFn = (eventName: CdpEvent, cb: Function) => void
+type OnFn = <T extends CdpEvent>(eventName: T, cb: (data: ProtocolMapping.Events[T][0]) => void) => void
 
 // the intersection of what's valid in CDP and what's valid in FFCDP
 // Firefox: https://searchfox.org/mozilla-central/rev/98a9257ca2847fad9a19631ac76199474516b31e/remote/cdp/domains/parent/Network.jsm#22
@@ -188,6 +189,15 @@ export class CdpAutomation {
  onFn('Network.responseReceived', this.onResponseReceived)
  }
 
+ async startVideoRecording (writeVideoFrame: WriteVideoFrame, screencastOpts?) {
+ this.onFn('Page.screencastFrame', async (e) => {
+ writeVideoFrame(Buffer.from(e.data, 'base64'))
+ await this.sendDebuggerCommandFn('Page.screencastFrameAck', { sessionId: e.sessionId })
+ })
+
+ await this.sendDebuggerCommandFn('Page.startScreencast', screencastOpts)
+ }
+
  static async create (sendDebuggerCommandFn: SendDebuggerCommand, onFn: OnFn, sendCloseCommandFn: SendCloseCommand, automation: Automation, experimentalSessionAndOrigin: boolean): Promise<CdpAutomation> {
  const cdpAutomation = new CdpAutomation(sendDebuggerCommandFn, onFn, sendCloseCommandFn, automation, experimentalSessionAndOrigin)
 

packages/server/lib/browsers/chrome.ts

@@ -20,7 +20,7 @@ import { BrowserCriClient } from './browser-cri-client'
 import type { LaunchedBrowser } from '@packages/launcher/lib/browsers'
 import type { CriClient } from './cri-client'
 import type { Automation } from '../automation'
-import type { BrowserLaunchOpts, BrowserNewTabOpts } from '@packages/types'
+import type { BrowserLaunchOpts, BrowserNewTabOpts, WriteVideoFrame } from '@packages/types'
 
 const debug = debugModule('cypress:server:browsers:chrome')
 
@@ -249,22 +249,10 @@ const _disableRestorePagesPrompt = function (userDir) {
  .catch(() => { })
 }
 
-const _maybeRecordVideo = async function (client, options, browserMajorVersion) {
- if (!options.onScreencastFrame) {
- debug('options.onScreencastFrame is false')
+async function _recordVideo (cdpAutomation: CdpAutomation, writeVideoFrame: WriteVideoFrame, browserMajorVersion: number) {
+ const opts = browserMajorVersion >= CHROME_VERSION_WITH_FPS_INCREASE ? screencastOpts() : screencastOpts(1)
 
- return client
- }
-
- debug('starting screencast')
- client.on('Page.screencastFrame', (meta) => {
- options.onScreencastFrame(meta)
- client.send('Page.screencastFrameAck', { sessionId: meta.sessionId })
- })
-
- await client.send('Page.startScreencast', browserMajorVersion >= CHROME_VERSION_WITH_FPS_INCREASE ? screencastOpts() : screencastOpts(1))
-
- return client
+ await cdpAutomation.startVideoRecording(writeVideoFrame, opts)
 }
 
 // a utility function that navigates to the given URL
@@ -434,7 +422,9 @@ const _handlePausedRequests = async (client) => {
 const _setAutomation = async (client: CriClient, automation: Automation, resetBrowserTargets: (shouldKeepTabOpen: boolean) => Promise<void>, options: BrowserLaunchOpts) => {
  const cdpAutomation = await CdpAutomation.create(client.send, client.on, resetBrowserTargets, automation, !!options.experimentalSessionAndOrigin)
 
- return automation.use(cdpAutomation)
+ automation.use(cdpAutomation)
+
+ return cdpAutomation
 }
 
 export = {
@@ -448,7 +438,7 @@ export = {
 
  _removeRootExtension,
 
- _maybeRecordVideo,
+ _recordVideo,
 
  _navigateUsingCRI,
 
@@ -468,7 +458,7 @@ export = {
  return browserCriClient
  },
 
- async _writeExtension (browser: Browser, options) {
+ async _writeExtension (browser: Browser, options: BrowserLaunchOpts) {
  if (browser.isHeadless) {
  debug('chrome is running headlessly, not installing extension')
 
@@ -565,7 +555,7 @@ export = {
  await this.attachListeners(browser, options.url, pageCriClient, automation, options)
  },
 
- async connectToExisting (browser: Browser, options: BrowserLaunchOpts, automation) {
+ async connectToExisting (browser: Browser, options: BrowserLaunchOpts, automation: Automation) {
  const port = await protocol.getRemoteDebuggingPort()
 
  debug('connecting to existing chrome instance with url and debugging port', { url: options.url, port })
@@ -580,17 +570,17 @@ export = {
  await this._setAutomation(pageCriClient, automation, browserCriClient.resetBrowserTargets, options)
  },
 
- async attachListeners (browser: Browser, url: string, pageCriClient, automation: Automation, options: BrowserLaunchOpts & { onInitializeNewBrowserTab?: () => void }) {
+ async attachListeners (browser: Browser, url: string, pageCriClient: CriClient, automation: Automation, options: BrowserLaunchOpts | BrowserNewTabOpts) {
  if (!browserCriClient) throw new Error('Missing browserCriClient in attachListeners')
 
- await this._setAutomation(pageCriClient, automation, browserCriClient.resetBrowserTargets, options)
+ const cdpAutomation = await this._setAutomation(pageCriClient, automation, browserCriClient.resetBrowserTargets, options)
 
  await pageCriClient.send('Page.enable')
 
- await options.onInitializeNewBrowserTab?.()
+ await options['onInitializeNewBrowserTab']?.()
 
  await Promise.all([
- this._maybeRecordVideo(pageCriClient, options, browser.majorVersion),
+ options.writeVideoFrame && this._recordVideo(cdpAutomation, options.writeVideoFrame, browser.majorVersion),
  this._handleDownloads(pageCriClient, options.downloadsFolder, automation),
  ])
 

packages/server/lib/browsers/electron.ts

@@ -8,9 +8,13 @@ import { CdpAutomation, screencastOpts, CdpCommand, CdpEvent } from './cdp_autom
 import * as savedState from '../saved_state'
 import utils from './utils'
 import * as errors from '../errors'
-import type { BrowserInstance } from './types'
+import type { Browser, BrowserInstance } from './types'
 import type { BrowserWindow, WebContents } from 'electron'
 import type { Automation } from '../automation'
+import type { BrowserLaunchOpts, Preferences } from '@packages/types'
+
+// TODO: unmix these two types
+type ElectronOpts = Windows.WindowOptions & BrowserLaunchOpts
 
 const debug = Debug('cypress:server:browsers:electron')
 const debugVerbose = Debug('cypress-verbose:server:browsers:electron')
@@ -68,7 +72,7 @@ const _getAutomation = async function (win, options, parent) {
  // after upgrading to Electron 8, CDP screenshots can hang if a screencast is not also running
  // workaround: start and stop screencasts between screenshots
  // @see https://github.com/cypress-io/cypress/pull/6555#issuecomment-596747134
- if (!options.onScreencastFrame) {
+ if (!options.writeVideoFrame) {
  await sendCommand('Page.startScreencast', screencastOpts())
  const ret = await fn(message, data)
 
@@ -105,37 +109,18 @@ function _installExtensions (win: BrowserWindow, extensionPaths: string[], optio
  }))
 }
 
-const _maybeRecordVideo = async function (webContents, options) {
- const { onScreencastFrame } = options
-
- debug('maybe recording video %o', { onScreencastFrame })
-
- if (!onScreencastFrame) {
- return
- }
-
- webContents.debugger.on('message', (event, method, params) => {
- if (method === 'Page.screencastFrame') {
- onScreencastFrame(params)
- webContents.debugger.sendCommand('Page.screencastFrameAck', { sessionId: params.sessionId })
- }
- })
-
- await webContents.debugger.sendCommand('Page.startScreencast', screencastOpts())
-}
-
 export = {
- _defaultOptions (projectRoot, state, options, automation) {
+ _defaultOptions (projectRoot: string | undefined, state: Preferences, options: BrowserLaunchOpts, automation: Automation): ElectronOpts {
  const _this = this
 
- const defaults = {
- x: state.browserX,
- y: state.browserY,
+ const defaults: Windows.WindowOptions = {
+ x: state.browserX || undefined,
+ y: state.browserY || undefined,
  width: state.browserWidth || 1280,
  height: state.browserHeight || 720,
- devTools: state.isBrowserDevToolsOpen,
  minWidth: 100,
  minHeight: 100,
+ devTools: state.isBrowserDevToolsOpen || undefined,
  contextMenu: true,
  partition: this._getPartition(options),
  trackState: {
@@ -148,8 +133,21 @@ export = {
  webPreferences: {
  sandbox: true,
  },
+ show: !options.browser.isHeadless,
+ // prevents a tiny 1px padding around the window
+ // causing screenshots/videos to be off by 1px
+ resizable: !options.browser.isHeadless,
+ onCrashed () {
+ const err = errors.get('RENDERER_CRASHED')
+
+ errors.log(err)
+
+ if (!options.onError) throw new Error('Missing onError in onCrashed')
+
+ options.onError(err)
+ },
  onFocus () {
- if (options.show) {
+ if (!options.browser.isHeadless) {
  return menu.set({ withInternalDevTools: true })
  }
  },
@@ -176,18 +174,12 @@ export = {
  },
  }
 
- if (options.browser.isHeadless) {
- // prevents a tiny 1px padding around the window
- // causing screenshots/videos to be off by 1px
- options.resizable = false
- }
-
  return _.defaultsDeep({}, options, defaults)
  },
 
  _getAutomation,
 
- async _render (url: string, automation: Automation, preferences, options: { projectRoot: string, isTextTerminal: boolean }) {
+ async _render (url: string, automation: Automation, preferences, options: { projectRoot?: string, isTextTerminal: boolean }) {
  const win = Windows.create(options.projectRoot, preferences)
 
  if (preferences.browser.isHeadless) {
@@ -212,21 +204,25 @@ export = {
 
  const [parentX, parentY] = parent.getPosition()
 
- options = this._defaultOptions(projectRoot, state, options, automation)
+ const electronOptions = this._defaultOptions(projectRoot, state, options, automation)
 
- _.extend(options, {
+ _.extend(electronOptions, {
  x: parentX + 100,
  y: parentY + 100,
  trackState: false,
+ // in run mode, force new windows to automatically open with show: false
+ // this prevents window.open inside of javascript client code to cause a new BrowserWindow instance to open
+ // https://github.com/cypress-io/cypress/issues/123
+ show: !options.isTextTerminal,
  })
 
- const win = Windows.create(projectRoot, options)
+ const win = Windows.create(projectRoot, electronOptions)
 
  // needed by electron since we prevented default and are creating
  // our own BrowserWindow (https://electron.atom.io/docs/api/web-contents/#event-new-window)
  e.newGuest = win
 
- return this._launch(win, url, automation, options)
+ return this._launch(win, url, automation, electronOptions)
  },
 
  async _launch (win: BrowserWindow, url: string, automation: Automation, options) {
@@ -278,7 +274,7 @@ export = {
 
  automation.use(cdpAutomation)
  await Promise.all([
- _maybeRecordVideo(win.webContents, options),
+ options.writeVideoFrame && cdpAutomation.startVideoRecording(options.writeVideoFrame),
  this._handleDownloads(win, options.downloadsFolder, automation),
  ])
 
@@ -459,30 +455,26 @@ export = {
  throw new Error('Attempting to connect to existing browser for Cypress in Cypress which is not yet implemented for electron')
  },
 
- async open (browser, url, options, automation) {
- const { projectRoot, isTextTerminal } = options
-
+ async open (browser: Browser, url: string, options: BrowserLaunchOpts, automation: Automation) {
  debug('open %o', { browser, url })
 
- const State = await savedState.create(projectRoot, isTextTerminal)
+ const State = await savedState.create(options.projectRoot, options.isTextTerminal)
  const state = await State.get()
 
  debug('received saved state %o', state)
 
  // get our electron default options
- // TODO: this is bad, don't mutate the options object
- options = this._defaultOptions(projectRoot, state, options, automation)
-
- // get the GUI window defaults now
- options = Windows.defaults(options)
+ const electronOptions: ElectronOpts = Windows.defaults(
+ this._defaultOptions(options.projectRoot, state, options, automation),
+ )
 
- debug('browser window options %o', _.omitBy(options, _.isFunction))
+ debug('browser window options %o', _.omitBy(electronOptions, _.isFunction))
 
  const defaultLaunchOptions = utils.getDefaultLaunchOptions({
- preferences: options,
+ preferences: electronOptions,
  })
 
- const launchOptions = await utils.executeBeforeBrowserLaunch(browser, defaultLaunchOptions, options)
+ const launchOptions = await utils.executeBeforeBrowserLaunch(browser, defaultLaunchOptions, electronOptions)
 
  const { preferences } = launchOptions
 
@@ -493,7 +485,7 @@ export = {
  isTextTerminal: options.isTextTerminal,
  })
 
- await _installExtensions(win, launchOptions.extensions, options)
+ await _installExtensions(win, launchOptions.extensions, electronOptions)
 
  // cause the webview to receive focus so that
  // native browser focus + blur events fire correctly

packages/server/lib/browsers/firefox.ts

@@ -1,5 +1,4 @@
 import _ from 'lodash'
-import Bluebird from 'bluebird'
 import fs from 'fs-extra'
 import Debug from 'debug'
 import getPort from 'get-port'
@@ -21,6 +20,7 @@ import type { BrowserCriClient } from './browser-cri-client'
 import type { Automation } from '../automation'
 import { getCtx } from '@packages/data-context'
 import { getError } from '@packages/errors'
+import type { BrowserLaunchOpts, BrowserNewTabOpts } from '@packages/types'
 
 const debug = Debug('cypress:server:browsers:firefox')
 
@@ -371,15 +371,15 @@ export function _createDetachedInstance (browserInstance: BrowserInstance, brows
  return detachedInstance
 }
 
-export async function connectToNewSpec (browser: Browser, options: any = {}, automation: Automation) {
+export async function connectToNewSpec (browser: Browser, options: BrowserNewTabOpts, automation: Automation) {
  await firefoxUtil.connectToNewSpec(options, automation, browserCriClient)
 }
 
 export function connectToExisting () {
  getCtx().onWarning(getError('UNEXPECTED_INTERNAL_ERROR', new Error('Attempting to connect to existing browser for Cypress in Cypress which is not yet implemented for firefox')))
 }
 
-export async function open (browser: Browser, url, options: any = {}, automation): Promise<BrowserInstance> {
+export async function open (browser: Browser, url: string, options: BrowserLaunchOpts, automation: Automation): Promise<BrowserInstance> {
  // see revision comment here https://wiki.mozilla.org/index.php?title=WebDriver/RemoteProtocol&oldid=1234946
  const hasCdp = browser.majorVersion >= 86
  const defaultLaunchOptions = utils.getDefaultLaunchOptions({
@@ -441,7 +441,7 @@ export async function open (browser: Browser, url, options: any = {}, automation
  const [
  foxdriverPort,
  marionettePort,
- ] = await Bluebird.all([getPort(), getPort()])
+ ] = await Promise.all([getPort(), getPort()])
 
  defaultLaunchOptions.preferences['devtools.debugger.remote-port'] = foxdriverPort
  defaultLaunchOptions.preferences['marionette.port'] = marionettePort
@@ -452,7 +452,7 @@ export async function open (browser: Browser, url, options: any = {}, automation
  cacheDir,
  extensionDest,
  launchOptions,
- ] = await Bluebird.all([
+ ] = await Promise.all([
  utils.ensureCleanCache(browser, options.isTextTerminal),
  utils.writeExtension(browser, options.isTextTerminal, options.proxyUrl, options.socketIoRoute),
  utils.executeBeforeBrowserLaunch(browser, defaultLaunchOptions, options),