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",
  }
  `)
 })