Detect a Keyboard Press

The concept

Keyboard events go to whichever element has focus. A user tabs to or clicks a field, then presses a key, and the browser dispatches keydown, keypress (for character keys) and keyup to that element. Playwright mirrors this. locator.press('Escape') focuses the element and sends the key; page.keyboard.press() sends it to whatever is focused right now.

Key names follow the standard KeyboardEvent.key values: Enter, Escape, ArrowDown, Tab, single characters like a, and combinations such as Shift+A or Control+S.

Testing keyboard behaviour is also accessibility testing. If a feature only works with a mouse, keyboard users are locked out.

The fragile version

await page.keyboard.press('a');

Why it breaks: Nothing has been focused, so the key goes to the page body (or whatever happened to have focus) and the input never receives it.

A robust Playwright version

const field = page.getByRole('textbox', { name: 'Shortcut' });
await field.focus();
await page.keyboard.press('ArrowUp');
// or, in one step:
await field.press('ArrowUp');
await expect(page.getByText('Last key: ArrowUp')).toBeVisible();

Focus is explicit, the key name is valid, and the assertion checks what the page reports.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Pressing keys without focusing the target first.
• Using made-up key names like 'up' instead of 'ArrowUp'.
• Using fill() when the page listens for individual key events; use press() or pressSequentially().

FAQ