Pillar 01 · Practice Area
20 isolated UI primitives — practice without the auth detour
Every card is a focused interaction surface with stable data-testid selectors, a live widget, and a copy-pasteable Playwright spec. Designed so junior QA can build muscle and seniors can verify habits.
Forms
Mouse
Buttons
Click each button variant (primary / secondary / disabled) and verify the audit log records the right event.
Open module →
Double Click
Trigger a precise double click and assert the editing affordance opens, preventing single-click false positives.
Open module →
Right Click
Open a custom context menu via secondary click and assert the menu items are reachable via keyboard too.
Open module →
Drag & Drop
Reorder a Kanban card across columns using mouse events and verify the destination column owns it.
Open module →
Selection
Checkbox
Toggle individual and bulk checkboxes; verify indeterminate parent state when only some children are selected.
Open module →
Radio Button
Switch between radio options and validate that exactly one option is selected at any time.
Open module →
Select Dropdown
Select a value from a native dropdown and assert the downstream summary updates.
Open module →
Multi Select
Select several skills, verify chips render in selection order, and assert removal via chip × button.
Open module →
Date & Files
Tables
Overlays
Alerts
Trigger a native browser alert, accept it, and verify the on-page message updates accordingly.
Open module →
Popups / Modals
Open a focus-trapped modal, submit a form inside, and verify the body scroll lock + focus return on close.
Open module →
Toast Messages
Fire a success toast and verify it auto-dismisses; fire an error toast and verify it stays until dismissed.
Open module →