misc: add automation command to cdp for forthcoming tab key

cacieprins · cacieprins · commit d369dd5406ea · 2025-03-19T12:32:34.000-04:00
diff --git a/packages/driver/cypress/e2e/commands/actions/press.cy.ts b/packages/driver/cypress/e2e/commands/actions/press.cy.ts
@@ -0,0 +1,12 @@
+describe('__placeholder__/commands/actions/press', () => {
+  it('dispatches the tab keypress to the AUT', () => {
+    cy.visit('/fixtures/input_events.html')
+    cy.get('#focus').focus().then(() => {
+      return Cypress.automation('key:press', { key: 'Tab' })
+    })
+
+    cy.get('#keyup').should('have.value', 'Tab')
+
+    cy.get('#keydown').should('have.value', 'Tab')
+  })
+})
diff --git a/packages/driver/cypress/fixtures/input_events.html b/packages/driver/cypress/fixtures/input_events.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<head>
+  <title>Input Event Monitor</title>
+  <script defer>
+    ['keydown', 'keyup'].forEach((ev) => {
+      document.addEventListener(ev, (data) => {
+        document.body.appendChild(document.createTextNode(`${ev}:${data.key}`))
+        document.getElementById(ev).value = data.key
+      })
+    })
+  </script>
+</head>
+
+<body>
+  <input type="text" id="focus" />
+  <input type="text" id="keyup" />
+  <input type="text" id="keydown" />
+</body>
diff --git a/packages/server/lib/automation/automation.ts b/packages/server/lib/automation/automation.ts
@@ -130,6 +130,8 @@ export class Automation {
   }
 
   normalize<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType'], automate?): Promise<AutomationCommands[T]['returnType']> {
+    debug('normalize', message)
+
     return Bluebird.try(() => {
       switch (message) {
         case 'take:screenshot':
@@ -184,6 +186,7 @@ export class Automation {
   }
 
   async push<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType']) {
+    debug('push', message)
     const result = await this.normalize(message, data)
 
     if (result) {
@@ -192,6 +195,7 @@ export class Automation {
   }
 
   async request<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType'], fn) {
+    debug('request', message)
     // curry in the message + callback function
     // for obtaining the external automation data
     const automate = this.automationValve(message, fn)
diff --git a/packages/server/lib/automation/commands/key_press.ts b/packages/server/lib/automation/commands/key_press.ts
@@ -1,28 +1,41 @@
-import type { KeyPressSupportedKeys } from '@packages/types'
+import type { KeyPressParams, KeyPressSupportedKeys } from '@packages/types'
 import type { SendDebuggerCommand } from '../../browsers/cdp_automation'
+import Debug from 'debug'
+
+const debug = Debug('cypress:server:automation:command:keypress')
 
 interface KeyCodeLookup extends Record<KeyPressSupportedKeys, string> {}
 
 export const CDP_KEYCODE: KeyCodeLookup = {
-  'TAB': 'U+000009',
+  'Tab': 'U+000009',
 }
 
-/*
-const BIDI_KEYCODE: KeyCodeLookup = {
-  'TAB': '\uE004',
-}
-*/
+export async function cdpKeyPress ({ key }: KeyPressParams, send: SendDebuggerCommand): Promise<void> {
+  debug('cdp keypress', { key })
+  if (!CDP_KEYCODE[key]) {
+    throw new Error(`${key} is not supported by 'cy.press()'.`)
+  }
 
-export async function cdpKeyPress ({ key }: { key: KeyPressSupportedKeys }, send: SendDebuggerCommand): Promise<void> {
   const keyIdentifier = CDP_KEYCODE[key]
 
-  await send('Input.dispatchKeyEvent', {
-    type: 'keyDown',
-    keyIdentifier,
-  })
+  try {
+    await send('Input.dispatchKeyEvent', {
+      type: 'rawKeyDown',
+      key,
+      code: key,
+      keyIdentifier,
+    })
+
+    await new Promise((resolve) => setTimeout(resolve, 20))
 
-  await send('Input.dispatchKeyEvent', {
-    type: 'keyUp',
-    keyIdentifier,
-  })
+    await send('Input.dispatchKeyEvent', {
+      type: 'keyUp',
+      key,
+      code: key,
+      keyIdentifier,
+    })
+  } catch (e) {
+    debug(e)
+    throw e
+  }
 }
diff --git a/packages/server/lib/browsers/cdp_automation.ts b/packages/server/lib/browsers/cdp_automation.ts
@@ -14,6 +14,7 @@ import type { CDPClient, ProtocolManagerShape, WriteVideoFrame, AutomationMiddle
 import type { Automation } from '../automation'
 import { cookieMatches, CyCookie, CyCookieFilter } from '../automation/util'
 import { DEFAULT_NETWORK_ENABLE_OPTIONS, CriClient } from './cri-client'
+import { cdpKeyPress } from '../automation/commands/key_press'
 
 export type CdpCommand = keyof ProtocolMapping.Commands
 
@@ -586,6 +587,8 @@ export class CdpAutomation implements CDPClient, AutomationMiddleware {
         return this.sendDebuggerCommandFn('Runtime.evaluate', { expression: 'performance.memory.jsHeapSizeLimit' })
       case 'collect:garbage':
         return this.sendDebuggerCommandFn('HeapProfiler.collectGarbage')
+      case 'key:press':
+        return cdpKeyPress(data, this.sendDebuggerCommandFn)
       default:
         throw new Error(`No automation handler registered for: '${message}'`)
     }
diff --git a/packages/server/lib/browsers/cri-client.ts b/packages/server/lib/browsers/cri-client.ts
@@ -250,6 +250,7 @@ export class CriClient implements ICriClient {
     params?: CmdParams<TCmd>,
     sessionId?: string,
   ): Promise<ProtocolMapping.Commands[TCmd]['returnType']> => {
+    debug('preparing to send command %s to target %s', command, this.targetId)
     if (this._crashed) {
       return Promise.reject(new Error(`${command} will not run as the target browser or tab CRI connection has crashed`))
     }
diff --git a/packages/server/lib/open_project.ts b/packages/server/lib/open_project.ts
@@ -127,6 +127,8 @@ export class OpenProject {
 
             return data
           }
+
+          return
         },
       })
     }
diff --git a/packages/server/lib/socket-base.ts b/packages/server/lib/socket-base.ts
@@ -19,11 +19,11 @@ import { cookieJar, SameSiteContext, automationCookieToToughCookie, Serializable
 import runEvents from './plugins/run_events'
 import type { OTLPTraceExporterCloud } from '@packages/telemetry'
 import { telemetry } from '@packages/telemetry'
-import type { Automation, AutomationCommands } from './automation'
+import type { Automation } from './automation'
 // eslint-disable-next-line no-duplicate-imports
 import type { Socket } from '@packages/socket'
 
-import type { RunState, CachedTestState, ProtocolManagerShape } from '@packages/types'
+import type { RunState, CachedTestState, ProtocolManagerShape, AutomationCommands } from '@packages/types'
 import memory from './browsers/memory'
 import { privilegedCommandsManager } from './privileged-commands/privileged-commands-manager'
 
@@ -95,6 +95,7 @@ export class SocketBase {
   }
 
   onAutomation (socket, message, data, id) {
+    debug('onAutomation', message)
     // instead of throwing immediately here perhaps we need
     // to make this more resilient by automatically retrying
     // up to 1 second in the case where our automation room
diff --git a/packages/server/test/unit/automation/commands/key_press.spec.ts b/packages/server/test/unit/automation/commands/key_press.spec.ts
@@ -12,16 +12,25 @@ describe('key:press automation command', () => {
     })
 
     it('dispaches a keydown followed by a keyup event to the provided send fn with the tab keycode', async () => {
-      await cdpKeyPress({ key: 'TAB' }, sendFn)
+      await cdpKeyPress({ key: 'Tab' }, sendFn)
 
       expect(sendFn).to.have.been.calledWith('Input.dispatchKeyEvent', {
         type: 'keyDown',
-        keyIdentifier: CDP_KEYCODE.TAB,
+        keyIdentifier: CDP_KEYCODE.Tab,
       })
 
       expect(sendFn).to.have.been.calledWith('Input.dispatchKeyEvent', {
         type: 'keyUp',
-        keyIdentifier: CDP_KEYCODE.TAB,
+        keyIdentifier: CDP_KEYCODE.Tab,
+      })
+    })
+
+    describe('when supplied an invalid key', () => {
+      it('errors', async () => {
+        // typescript would keep this from happening, but it hasn't yet
+        // been checked for correctness since being received by automation
+        // @ts-expect-error
+        await expect(cdpKeyPress({ key: 'foo' })).to.be.rejectedWith('foo is not supported by \'cy.press()\'.')
       })
     })
   })
diff --git a/packages/types/src/server.ts b/packages/types/src/server.ts
@@ -58,7 +58,42 @@ export interface LaunchArgs {
 
 type NullableMiddlewareHook = ((message: unknown, data: unknown) => void) | null
 
-export type OnRequestEvent = (eventName: string, data: any) => void
+export type KeyPressSupportedKeys = 'Tab'
+
+interface CommandSignature<P = any, R = any> {
+  dataType: P
+  returnType: R
+}
+
+export interface KeyPressParams {
+  key: KeyPressSupportedKeys
+}
+
+export interface AutomationCommands {
+  'take:screenshot': CommandSignature
+  'get:cookies': CommandSignature
+  'get:cookie': CommandSignature
+  'set:cookie': CommandSignature
+  'set:cookies': CommandSignature
+  'add:cookies': CommandSignature
+  'clear:cookies': CommandSignature
+  'clear:cookie': CommandSignature
+  'change:cookie': CommandSignature
+  'create:download': CommandSignature
+  'canceled:download': CommandSignature
+  'complete:download': CommandSignature
+  'get:heap:size:limit': CommandSignature
+  'collect:garbage': CommandSignature
+  'reset:browser:tabs:for:next:spec': CommandSignature
+  'reset:browser:state': CommandSignature
+  'focus:browser:window': CommandSignature
+  'is:automation:client:connected': CommandSignature
+  'remote:debugger:protocol': CommandSignature
+  'response:received': CommandSignature
+  'key:press': CommandSignature<KeyPressParams, Promise<void>>
+}
+
+export type OnRequestEvent = <T extends keyof AutomationCommands>(eventName: T, data: AutomationCommands[T]['dataType']) => void
 
 export type OnServiceWorkerRegistrationUpdated = (data: Protocol.ServiceWorker.WorkerRegistrationUpdatedEvent) => void
 

Original file line number	Diff line number	Diff line change
`@@ -130,6 +130,8 @@ export class Automation {`
`130`	`130`	`}`
`131`	`131`
`132`	`132`	`normalize<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType'], automate?): Promise<AutomationCommands[T]['returnType']> {`
	`133`	`+ debug('normalize', message)`
	`134`	`+`
`133`	`135`	`return Bluebird.try(() => {`
`134`	`136`	`switch (message) {`
`135`	`137`	`case 'take:screenshot':`
`@@ -184,6 +186,7 @@ export class Automation {`
`184`	`186`	`}`
`185`	`187`
`186`	`188`	`async push<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType']) {`
	`189`	`+ debug('push', message)`
`187`	`190`	`const result = await this.normalize(message, data)`
`188`	`191`
`189`	`192`	`if (result) {`
`@@ -192,6 +195,7 @@ export class Automation {`
`192`	`195`	`}`
`193`	`196`
`194`	`197`	`async request<T extends keyof AutomationCommands> (message: T, data: AutomationCommands[T]['dataType'], fn) {`
	`198`	`+ debug('request', message)`
`195`	`199`	`// curry in the message + callback function`
`196`	`200`	`// for obtaining the external automation data`
`197`	`201`	`const automate = this.automationValve(message, fn)`
Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ export class CriClient implements ICriClient {`
`250`	`250`	`params?: CmdParams<TCmd>,`
`251`	`251`	`sessionId?: string,`
`252`	`252`	`): Promise<ProtocolMapping.Commands[TCmd]['returnType']> => {`
	`253`	`+ debug('preparing to send command %s to target %s', command, this.targetId)`
`253`	`254`	`if (this._crashed) {`
`254`	`255`	return Promise.reject(new Error(`${command} will not run as the target browser or tab CRI connection has crashed`))
`255`	`256`	`}`
Original file line number	Diff line number	Diff line change
`@@ -127,6 +127,8 @@ export class OpenProject {`
`127`	`127`
`128`	`128`	`return data`
`129`	`129`	`}`
	`130`	`+`
	`131`	`+ return`
`130`	`132`	`},`
`131`	`133`	`})`
`132`	`134`	`}`