Add playwright test

Author: huchenlei

browser_tests/ComfyPage.ts

@@ -6,7 +6,8 @@ import dotenv from 'dotenv'
 dotenv.config()
 import * as fs from 'fs'
 import { NodeBadgeMode } from '../src/types/nodeSource'
-import { NodeId } from '../src/types/comfyWorkflow'
+import type { NodeId } from '../src/types/comfyWorkflow'
+import type { KeyCombo } from '../src/types/keyBindingTypes'
 import { ManageGroupNode } from './helpers/manageGroupNode'
 import { ComfyTemplates } from './helpers/templates'
 
@@ -488,6 +489,34 @@ export class ComfyPage {
     return `./browser_tests/assets/${fileName}`
   }
 
+  async registerKeybinding(keyCombo: KeyCombo, command: () => void) {
+    await this.page.evaluate(
+      ({ keyCombo, commandStr }) => {
+        const app = window['app']
+        const randomSuffix = Math.random().toString(36).substring(2, 8)
+        const extensionName = `TestExtension_${randomSuffix}`
+        const commandId = `TestCommand_${randomSuffix}`
+
+        app.registerExtension({
+          name: extensionName,
+          keybindings: [
+            {
+              combo: keyCombo,
+              commandId: commandId
+            }
+          ],
+          commands: [
+            {
+              id: commandId,
+              function: eval(commandStr)
+            }
+          ]
+        })
+      },
+      { keyCombo, commandStr: command.toString() }
+    )
+  }
+
   async setSetting(settingId: string, settingValue: any) {
     return await this.page.evaluate(
       async ({ id, value }) => {

browser_tests/keybindings.spec.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Keybindings', () => {
+  test('Should not trigger non-modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k' }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('k')
+    await expect(textBox).toHaveValue('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      undefined
+    )
+  })
+
+  test('Should not trigger modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k', ctrl: true }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('q')
+    await textBox.press('Control+k')
+    await expect(textBox).toHaveValue('q')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+})

src/extensions/core/keybinds.ts

@@ -11,6 +11,9 @@ app.registerExtension({
       if (!app.vueAppReady) return
 
       const keyCombo = KeyComboImpl.fromEvent(event)
+      if (keyCombo.isModifier) {
+        return
+      }
 
       // Ignore non-modifier keybindings if typing in input fields
       const target = event.composedPath()[0] as HTMLElement

src/stores/keybindingStore.ts

@@ -80,6 +80,10 @@ export class KeyComboImpl implements KeyCombo {
   get hasModifier(): boolean {
     return this.ctrl || this.alt || this.shift
   }
+
+  get isModifier(): boolean {
+    return ['Control', 'Meta', 'Alt', 'Shift'].includes(this.key)
+  }
 }
 
 export const useKeybindingStore = defineStore('keybinding', () => {