Practice UI Automation

Three levels — Basic, Intermediate, Advanced. Each control shows a verification label you can assert in automation. The checklist ticks off as you complete each step.

Verification checklist Basic

Steps tick when the matching label on the left updates. Click a step to jump to that control.

  • Enter text in the text field
  • Select Option 2 in dropdown
  • Select Radio 2
  • Check Checkbox 1 (label shows selected)
  • Click Submit
  • Click Reset
  • Pick a date (label shows date picked)
  • Enter a valid email (e.g. you@example.com)
  • Move range away from 50
  • Turn switch ON
  • Upload a file
  • Click Click me in table
  • Check table checkbox (selected + cell text)
  • Filter table with Gamma
  • Click a table row
  • Open modal and click Confirm
  • Show toast
  • Show inline alert
  • Native confirm dialog
  • Toggle spinner visible
  • Open content tab Section 2
  • Expand accordion Item 2
  • Enable the disabled button
  • Drag item to drop zone
Basic — forms

Text entered: (empty)

Dropdown selected: Option 1

Radio selected: radio1

Checkbox 1: unselected

Checkbox 2: unselected

Submit clicked: (not yet)

Intermediate — inputs & tables

Date picked: (none)

Email: (empty)

File uploaded: (no file)

Range value: 50

Switch: OFF

Interactive table
H1H2H3H4H5
1,11,21,31,41,5
2,1 Click me 2,3 2,42,5
3,1 3,43,5
4,14,24,34,44,5

Table checkbox: unselected

Filterable table

Filter: "" — visible rows: 3

IDNameStatus
1Alpha ModuleActive
2Beta ModuleActive
3Gamma ModuleInactive

Row selected: (none)

Advanced — dialogs & feedback

Modal: closed

Toast: hidden

Inline alert: hidden

Native confirm: (not used)

Inline alert is visible.

Spinner: hidden

Content tabs & accordion

These tabs are for practice only (not the data table modules below).

Section 1 content
Section 2 content
Section 3 content

Active tab: Section 1

Panel 1

Panel 2

Accordion item 2: collapsed

Drag & drop, disabled button

Submit button: disabled


Drag me
Drop zone

Drop zone: empty

Practice UI