Elements Playground
Every widget below reports what happened in an "output" box so
you can verify your automation actually landed. Selectors: prefer data-testid,
falling back to id/name.
Text Inputs
Standard input types, plus readonly and disabled states.
Checkboxes
A single checkbox and a group with a "select all" controller.
Radio Buttons
Only one option in the group can be selected.
Dropdowns
A single-select and a multi-select native dropdown.
Sliders
Range inputs with live value read-outs.
Buttons
Standard, disabled, toggle, and native-dialog-triggering buttons.
Date, Color & File
Toggle Switch
A custom-styled checkbox commonly used for on/off settings.
offProgress Bar
Click start to animate progress from 0 to 100.
Drag and Drop
Drag the block into the drop zone.
Modal Dialog
Tooltip
Hover over the button to reveal a tooltip.
I'm a tooltip!Autocomplete
Text input backed by a native datalist of suggestions.
Enable / Disable Dependency
Checking the box enables the button and input below.
Scrollable List
A fixed-height list with repeated labels — useful for testing index-based vs. text-based element selection.
Sortable Data Table
Click a column header to sort — good for data-extraction tests.
| Name | Role | Score |
|---|---|---|
| Ada | Engineer | 92 |
| Grace | Analyst | 85 |
| Linus | Engineer | 78 |
| Margaret | Manager | 95 |
| Alan | Analyst | 88 |
Iframe
An embedded frame with its own button, for frame-switching tests.
Form Submission
A small form to test full submit/reset workflows.