fix(browser): support non US key input (#6873)

Author: hi-ogawa

packages/browser/src/node/commands/keyboard.ts

@@ -72,6 +72,10 @@ export const keyboardCleanup: UserEventCommand<(state: KeyboardState) => Promise
   }
 }
 
+// fallback to insertText for non US key
+// https://github.com/microsoft/playwright/blob/50775698ae13642742f2a1e8983d1d686d7f192d/packages/playwright-core/src/server/input.ts#L95
+const VALID_KEYS = new Set(['Escape', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Backquote', '`', '~', 'Digit1', '1', '!', 'Digit2', '2', '@', 'Digit3', '3', '#', 'Digit4', '4', '$', 'Digit5', '5', '%', 'Digit6', '6', '^', 'Digit7', '7', '&', 'Digit8', '8', '*', 'Digit9', '9', '(', 'Digit0', '0', ')', 'Minus', '-', '_', 'Equal', '=', '+', 'Backslash', '\\', '|', 'Backspace', 'Tab', 'KeyQ', 'q', 'Q', 'KeyW', 'w', 'W', 'KeyE', 'e', 'E', 'KeyR', 'r', 'R', 'KeyT', 't', 'T', 'KeyY', 'y', 'Y', 'KeyU', 'u', 'U', 'KeyI', 'i', 'I', 'KeyO', 'o', 'O', 'KeyP', 'p', 'P', 'BracketLeft', '[', '{', 'BracketRight', ']', '}', 'CapsLock', 'KeyA', 'a', 'A', 'KeyS', 's', 'S', 'KeyD', 'd', 'D', 'KeyF', 'f', 'F', 'KeyG', 'g', 'G', 'KeyH', 'h', 'H', 'KeyJ', 'j', 'J', 'KeyK', 'k', 'K', 'KeyL', 'l', 'L', 'Semicolon', ';', ':', 'Quote', '\'', '"', 'Enter', '\n', '\r', 'ShiftLeft', 'Shift', 'KeyZ', 'z', 'Z', 'KeyX', 'x', 'X', 'KeyC', 'c', 'C', 'KeyV', 'v', 'V', 'KeyB', 'b', 'B', 'KeyN', 'n', 'N', 'KeyM', 'm', 'M', 'Comma', ',', '<', 'Period', '.', '>', 'Slash', '/', '?', 'ShiftRight', 'ControlLeft', 'Control', 'MetaLeft', 'Meta', 'AltLeft', 'Alt', 'Space', ' ', 'AltRight', 'AltGraph', 'MetaRight', 'ContextMenu', 'ControlRight', 'PrintScreen', 'ScrollLock', 'Pause', 'PageUp', 'PageDown', 'Insert', 'Delete', 'Home', 'End', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'NumLock', 'NumpadDivide', 'NumpadMultiply', 'NumpadSubtract', 'Numpad7', 'Numpad8', 'Numpad9', 'Numpad4', 'Numpad5', 'Numpad6', 'NumpadAdd', 'Numpad1', 'Numpad2', 'Numpad3', 'Numpad0', 'NumpadDecimal', 'NumpadEnter'])
+
 export async function keyboardImplementation(
   pressed: Set<string>,
   provider: BrowserProvider,
@@ -91,7 +95,9 @@ export async function keyboardImplementation(
       // together, and call `type` once for all non special keys,
       // and then `press` for special keys
       if (pressed.has(key)) {
-        await page.keyboard.up(key)
+        if (VALID_KEYS.has(key)) {
+          await page.keyboard.up(key)
+        }
         pressed.delete(key)
       }
 
@@ -102,11 +108,18 @@ export async function keyboardImplementation(
         }
 
         for (let i = 1; i <= repeat; i++) {
-          await page.keyboard.down(key)
+          if (VALID_KEYS.has(key)) {
+            await page.keyboard.down(key)
+          }
+          else {
+            await page.keyboard.insertText(key)
+          }
         }
 
         if (releaseSelf) {
-          await page.keyboard.up(key)
+          if (VALID_KEYS.has(key)) {
+            await page.keyboard.up(key)
+          }
         }
         else {
           pressed.add(key)
@@ -116,7 +129,9 @@ export async function keyboardImplementation(
 
     if (!skipRelease && pressed.size) {
       for (const key of pressed) {
-        await page.keyboard.up(key)
+        if (VALID_KEYS.has(key)) {
+          await page.keyboard.up(key)
+        }
       }
     }
   }

test/browser/fixtures/user-event/keyboard.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from 'vitest'
+import { userEvent, page, server } from '@vitest/browser/context'
+
+test('non US keys', async () => {
+  document.body.innerHTML = `
+    <input placeholder="type-#7396" />
+    <input placeholder="fill-#7396" />
+    <input placeholder="type-emoji" />
+    <input placeholder="fill-emoji" />
+  `;
+
+  await userEvent.type(page.getByPlaceholder("type-#7396"), 'éèù')
+  await expect.element(page.getByPlaceholder("type-#7396")).toHaveValue('éèù')
+  await userEvent.fill(page.getByPlaceholder("fill-#7396"), 'éèù')
+  await expect.element(page.getByPlaceholder("fill-#7396")).toHaveValue('éèù')
+
+  // playwright: garbled characters
+  // webdriverio: error: invalid argument: missing command parameters
+  // preview: ok
+  try {
+    await userEvent.type(page.getByPlaceholder("type-emoji"), '😊😍')
+    await expect.element(page.getByPlaceholder("type-emoji")).toHaveValue('😊😍')
+  } catch (e) {
+    console.error(e)
+  }
+
+  // playwright: ok
+  // webdriverio: error: ChromeDriver only supports characters in the BMP
+  // preview: ok
+  try {
+    await userEvent.fill(page.getByPlaceholder("fill-emoji"), '😊😍')
+    await expect.element(page.getByPlaceholder("fill-emoji")).toHaveValue('😊😍')
+  } catch (e) {
+    console.error(e)
+  }
+})

test/browser/specs/runner.test.ts

@@ -147,6 +147,7 @@ test('user-event', async () => {
       "cleanup-retry.test.ts": "pass",
       "cleanup1.test.ts": "pass",
       "cleanup2.test.ts": "pass",
+      "keyboard.test.ts": "pass",
     }
   `)
 })