Mouse & Keyboard Practice Challenges
Practice drag and drop, hovers, sliders, tooltips, right-click menus and key presses against stable ids and data-testids.
6 challenges
- The Ring Bearer · Drag and Drop
- House Sigils · Hovers
- Throttle Lever · Sliders
- The Speakeasy Door · Right-Click & Double-Click
- Night at the East Wing · Tooltips
- The Consent Gauntlet · Obscured Elements
Frequently asked questions
Why do drag-and-drop tests fail so often?
Because HTML5 drag-and-drop is driven by dragstart, dragover and drop events rather than by mouse movement. A framework that emulates a pointer path never fires them, so the honest fix is to dispatch the events with their dataTransfer payload.
How do I automate hover, right-click and double-click?
Use the dedicated actions rather than .click() — hover, context-click and double-click exist in every major framework. Where a hover reveals content, keyboard focus is the more reliable equivalent in headless runs, and these pages support both routes.
How do I set a slider to an exact value?
Send arrow keys to the focused control and assert the reported value — aria-valuenow on a custom slider, the mirrored value on a native range input. Pixel-accurate dragging lands near the value, not on it.
Other categories
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.