Testing a Custom Combobox Without Sleeps
Test debounced ARIA comboboxes through observable states, keyboard behavior and selected outcomes without fixed sleeps.
Debounce, keyboard focus and asynchronous options make typeahead widgets a compact flakiness laboratory.
A custom combobox is not a native select. It combines an input, a popup, asynchronous filtering and a focus model. Treating it like one opaque control produces brittle tests.
Follow observable states
- Fill the input with the query.
- Wait for
aria-expanded="true"or the listbox to appear. - Assert the expected option exists.
- Select it by keyboard or click.
- Assert the committed value or result, not only that the popup closed.
Test the keyboard contract
Arrow keys should move the active option, Enter should commit it and Escape should close the popup without inventing a value. When the widget uses aria-activedescendant, focus remains on the input; do not wait for DOM focus to move to an option.
The Apothecary Index challenge exposes each of those signals and includes a short debounce so a fixed sleep feels tempting. Resist it—the state is a better clock.
Keep reading
- Practice this topic
- Five Stable-Locator Anti-Patterns
- Network Idle Is Not “Ready”
- Deterministic Test Data Without Boring Tests
- Visibility vs. Presence: The Wait Condition Bug
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.