Barista Keypad · Inputs & Key Presses

Q: How do I test a number input's min, max and step?

input#inputs-shots is type=number with min=1, max=6, step=1. Send arrow keys to step it and assert the value clamps at both ends, rather than assigning the value directly — direct assignment bypasses the constraint under test.

Q: How do I assert that a maxlength field truncates input?

Type 30 characters into #inputs-note (maxlength 20) and assert exactly 20 stick, with #inputs-note-count showing the live count. The page has no debounce and no timers, so a failure here is the test, not a race.

A number input with min/max/step, a key-press echo, and a maxlength order-note field. Small controls, endless flaky tests.

Number inputs with opinions, a key logger, and a 20-character order note.

Inputs & Key Presses is an easy Forms & Inputs challenge on Fun UI Playground. A number input with min/max/step, a key-press echo, and a maxlength order-note field. Small controls, endless flaky tests. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “inputs-”, and the techniques it exercises are number inputs, arrow-key stepping, keyboard events, maxlength behavior.

At a glance

Category: Forms & Inputs
Difficulty: easy
Teaches: number inputs · arrow-key stepping · keyboard events · maxlength behavior
Backend: None — runs entirely in the browser
Locators: Stable id and data-testid, prefixed inputs-

Selectors on this page

Locator	What it is
`input#inputs-shots`	Shots: input#inputs-shots (type=number, min=1, max=6, step=1)
`#inputs-keys` `#inputs-key-result`	Key echo: focus #inputs-keys, press anything — the last key lands in #inputs-key-result as "You pressed: ARROWUP"
`#inputs-note` `#inputs-note-count`	Order note: #inputs-note has maxlength=20 — type 30 chars, assert only 20 stick (#inputs-note-count shows the live count)

Frequently asked questions

How do I test a number input's min, max and step?

input#inputs-shots is type=number with min=1, max=6, step=1. Send arrow keys to step it and assert the value clamps at both ends, rather than assigning the value directly — direct assignment bypasses the constraint under test.

How do I assert that a maxlength field truncates input?

Type 30 characters into #inputs-note (maxlength 20) and assert exactly 20 stick, with #inputs-note-count showing the live count. The page has no debounce and no timers, so a failure here is the test, not a race.

More Forms & Inputs

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.