VALIDATION LAB•KEYBOARD KEYS

Keyboard Keys

Intermediate

Learn how typing, focus, selection, paste, masks, OTP fields, and keyboard navigation behave in real forms.

Test instructions

Playground debounce flips validation after pause

Do this: Playground debounce flips validation after pauseExpected: The page starts with one simple typing exercise, then moves through OTP, search, password, phone mask, and disabled-input examples. Finish the guided challenge to confirm the key behaviors.

Live test area · interact here

Step 1 · Start with typing

Type, select text, and use your keyboard

Learn one basic keyboard flow before moving to the advanced examples.

1. Type abc123456789.
2. Select part of the text and press Backspace.
3. Press Tab and observe where focus moves.

Show live keyboard details

Characters typed0

Last key pressed—

Caret position0

Selection length0 chars

Paste detectedNo

Debounce triggeredIdle (fires: 0)

Validation stateEmpty

Step 2 · Practice common inputs

Try one pattern at a time

These small examples represent keyboard behaviors found in real forms. Complete them from left to right, then compare what happened with the test cases.

1. OTP input

Six boxes · auto-advance on digit

2. Search bar

Debounced fetch · spinner while “loading”

3. Password field

Strength meter · caps lock probe

Too weak · score 0/4 (challenge needs ≥3)

4. Phone input mask

Formats as you type · US-style demo

Digits captured: 0/10

5. Disabled input

Cannot type — verify focus skips and screen readers don’t lie.

Step 3 · Know what to check

Common keyboard bugs

Backspace skips OTP field
Paste blocked unexpectedly
Search spams API requests
Cursor jumps in masked input
Tab order broken
Enter submits too early

Step 4 · Automate the behavior

The same actions in Playwright

await page.keyboard.type('Playwright');
await page.keyboard.press('Tab');
await page.keyboard.press('Control+A');

Copy selected text

await page.keyboard.press('Control+A');
await page.keyboard.press('Control+C');

What it does: Selects everything in the focused field, then copies it.

When to use it: Use it when testing keyboard shortcuts inside an editor or input.

What to verify: Confirm the focused control keeps the expected selection and copy behavior.

Submit with Enter

await page.getByRole('button', { name: 'Submit' }).press('Enter');

What it does: Sends an Enter key press to a specific control.

When to use it: Use it when Enter should activate a focused button or form action.

What to verify: Assert the expected submit result, validation message, or navigation.

Use a modifier key

await page.keyboard.down('Shift');
await page.keyboard.press('Enter');
await page.keyboard.up('Shift');

What it does: Holds Shift while pressing Enter, then releases the modifier.

When to use it: Use it for shortcuts that depend on a modifier key.

What to verify: Check that the modified action happened and Shift was not left active.

Assert focus

await expect(page.getByLabel('Email')).toBeFocused();

What it does: Checks which control currently owns keyboard focus.

When to use it: Use it after Tab, validation, auto-advance, or a modal opens.

What to verify: Confirm focus lands on the next logical and accessible control.

Move through a form

await page.keyboard.press('Tab');
await expect(page.getByLabel('Password')).toBeFocused();

What it does: Moves focus forward without using the mouse.

When to use it: Use it to verify keyboard-only form navigation.

What to verify: Check that focus order follows the visual and logical order.

Step 5 · Check your learning

Complete the keyboard challenge

Complete all four — reflects how multi-field forms are really tested.

Fill OTP — all six digits
Search — type something containing "Playwright" and wait for results
Password — reach strong (≥3/4 on meter)
Phone — full ten-digit mask

Knowledge check

Quick knowledge check

1. Which event fires when a key is pressed?

Reference

Keyboard glossary

Focus: The element that currently receives keyboard input.
Focus ring: The visible outline that shows the focused element.
Keyboard event: A browser event created by a keyboard action.
keydown: Fires when a key is pressed down.
keyup: Fires when a pressed key is released.
key: The logical value of the key, such as a or Enter.
code: The physical key position, such as KeyA or Enter.
Modifier key: A key such as Shift, Control, Alt, or Meta.
Shortcut: A key combination that triggers a specific action.
Keyboard-only navigation: Using a product without a mouse or touch input.

Progress

Keyboard interactions completed

Completed activities: 0/5Checklist: 0/10Quiz score: 0/5Scenario: Not completed

Interact with the widget aboveStatus updates as you test

Understand the behavior

Manual test guide

Test it before writing code

Practice manually, then automate what you just tested.

Related practice

Ready to practise another UI behavior?

Move to the next module whenever you are ready, or browse the full UI Elements catalog.

Continue to Checkboxes →Explore Forms

Keyboard Keys

Copy selected text

Submit with Enter

Use a modifier key

Assert focus

Move through a form

Keyboard testing checklist

Manual test guide

Playground debounce flips validation after pause

OTP advances focus on each digit; backspace moves backward

Search shows loading then results (not one request per key)

Password meter reacts; caps warning can appear with Caps Lock

Phone mask keeps cursor sane while digits append

Disabled field rejects typing and looks inert

Ready to practise another UI behavior?