diff --git a/packages/browser/src/node/commands/keyboard.ts b/packages/browser/src/node/commands/keyboard.ts index ebe2e425519b..c0be014d0804 100644 --- a/packages/browser/src/node/commands/keyboard.ts +++ b/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, 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) + } } } } diff --git a/test/browser/fixtures/user-event/keyboard.test.ts b/test/browser/fixtures/user-event/keyboard.test.ts new file mode 100644 index 000000000000..372eecd62a0a --- /dev/null +++ b/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 = ` + + + + + `; + + 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) + } +}) diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts index 0347d9be2d42..15820327d6b2 100644 --- a/test/browser/specs/runner.test.ts +++ b/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", } `) })