chore(webkit): add video recording

circle.yml

@@ -178,6 +178,14 @@ commands:
                   mv ~/cypress/system-tests/node_modules /tmp/node_modules_cache/system-tests_node_modules
                   mv ~/cypress/globbed_node_modules /tmp/node_modules_cache/globbed_node_modules
 
+  install-webkit-deps:
+    steps:
+      - run:
+          name: Install WebKit dependencies
+          command: |
+            npx playwright install webkit
+            npx playwright install-deps webkit
+
   build-and-persist:
     description: Save entire folder as artifact for other jobs to run without reinstalling
     steps:
@@ -462,6 +470,11 @@ commands:
             - install-chrome:
                 channel: <<parameters.install-chrome-channel>>
                 version: $(node ./scripts/get-browser-version.js chrome:<<parameters.install-chrome-channel>>)
+      - when:
+          condition:
+            equal: [ webkit, << parameters.browser >> ]
+          steps:
+            - install-webkit-deps
       - run:
           name: Run driver tests in Cypress
           environment:
@@ -470,11 +483,6 @@ commands:
             echo Current working directory is $PWD
             echo Total containers $CIRCLE_NODE_TOTAL
 
-            if [[ "<<parameters.browser>>" = "webkit" ]]; then
-              npx playwright install webkit
-              npx playwright install-deps webkit
-            fi
-
             if [[ -v MAIN_RECORD_KEY ]]; then
               # internal PR
               if <<parameters.experimentalSessionAndOrigin>>; then
@@ -610,6 +618,11 @@ commands:
     steps:
       - restore_cached_workspace
       - restore_cached_system_tests_deps
+      - when:
+          condition:
+            equal: [ webkit, << parameters.browser >> ]
+          steps:
+            - install-webkit-deps
       - run:
           name: Run system tests
           command: |
@@ -1448,6 +1461,13 @@ jobs:
       - run-system-tests:
           browser: firefox
 
+  system-tests-webkit:
+    <<: *defaults
+    parallelism: 8
+    steps:
+      - run-system-tests:
+          browser: webkit
+
   system-tests-non-root:
     <<: *defaults
     steps:
@@ -2363,6 +2383,10 @@ linux-x64-workflow: &linux-x64-workflow
         context: test-runner:performance-tracking
         requires:
           - system-tests-node-modules-install
+    - system-tests-webkit:
+        context: test-runner:performance-tracking
+        requires:
+          - system-tests-node-modules-install
     - system-tests-non-root:
         context: test-runner:performance-tracking
         executor: non-root-docker-user

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

@@ -15,12 +15,11 @@ import { fs } from '../util/fs'
 import { CdpAutomation, screencastOpts } from './cdp_automation'
 import * as protocol from './protocol'
 import utils from './utils'
-import type { Browser } from './types'
+import type { Browser, BrowserInstance } from './types'
 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, RunModeVideoApi } from '@packages/types'
 
 const debug = debugModule('cypress:server:browsers:chrome')
 
@@ -249,22 +248,12 @@ 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, videoOptions: RunModeVideoApi, browserMajorVersion: number) {
+  const screencastOptions = 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))
+  const { writeVideoFrame } = await videoOptions.newFfmpegVideoController()
 
-  return client
+  await cdpAutomation.startVideoRecording(writeVideoFrame, screencastOptions)
 }
 
 // a utility function that navigates to the given URL
@@ -434,7 +423,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 +439,7 @@ export = {
 
   _removeRootExtension,
 
-  _maybeRecordVideo,
+  _recordVideo,
 
   _navigateUsingCRI,
 
@@ -468,7 +459,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')
 
@@ -562,10 +553,10 @@ export = {
 
     if (!options.url) throw new Error('Missing url in connectToNewSpec')
 
-    await this.attachListeners(browser, options.url, pageCriClient, automation, options)
+    await this.attachListeners(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 +571,19 @@ export = {
     await this._setAutomation(pageCriClient, automation, browserCriClient.resetBrowserTargets, options)
   },
 
-  async attachListeners (browser: Browser, url: string, pageCriClient, automation: Automation, options: BrowserLaunchOpts & { onInitializeNewBrowserTab?: () => void }) {
+  async attachListeners (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)
+    debug('attaching listeners to chrome %o', { url, 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.videoApi && this._recordVideo(cdpAutomation, options.videoApi, Number(options.browser.majorVersion)),
       this._handleDownloads(pageCriClient, options.downloadsFolder, automation),
     ])
 
@@ -600,9 +593,11 @@ export = {
       await this._handlePausedRequests(pageCriClient)
       _listenForFrameTreeChanges(pageCriClient)
     }
+
+    return cdpAutomation
   },
 
-  async open (browser: Browser, url, options: BrowserLaunchOpts, automation: Automation): Promise<LaunchedBrowser> {
+  async open (browser: Browser, url, options: BrowserLaunchOpts, automation: Automation): Promise<BrowserInstance> {
     const { isTextTerminal } = options
 
     const userDir = utils.getProfileDir(browser, isTextTerminal)
@@ -654,7 +649,7 @@ export = {
     // first allows us to connect the remote interface,
     // start video recording and then
     // we will load the actual page
-    const launchedBrowser = await launch(browser, 'about:blank', port, args) as LaunchedBrowser & { browserCriClient: BrowserCriClient}
+    const launchedBrowser = await launch(browser, 'about:blank', port, args) as unknown as BrowserInstance & { browserCriClient: BrowserCriClient}
 
     la(launchedBrowser, 'did not get launched browser instance')
 
@@ -681,7 +676,6 @@ export = {
 
     launchedBrowser.browserCriClient = browserCriClient
 
-    /* @ts-expect-error */
     launchedBrowser.kill = (...args) => {
       debug('closing remote interface client')
 
@@ -696,7 +690,7 @@ export = {
 
     const pageCriClient = await browserCriClient.attachToTargetUrl('about:blank')
 
-    await this.attachListeners(browser, url, pageCriClient, automation, options)
+    await this.attachListeners(url, pageCriClient, automation, options)
 
     // return the launched browser process
     // with additional method to close the remote connection