VALIDATION LAB•UI ELEMENTS
Core UI Testing · UI Elements
Start with Inputs
Follow the same order as the left menu. Begin with Inputs, practise one interaction at a time, and move to Forms when you are ready for complete journeys.
UI Elements
UI building blocks
Follow the recommended path, or filter the catalog by difficulty when you know what to practise next.
Inputs
Validate an email + password login form, surface a red error on invalid email, and assert the success state once both fields satisfy their rules.
Open module →
Buttons
Exercise pointer-first button semantics through clear, user-facing feedback messages: primary click, double-click isolation, secondary-click context menu, hover-then-confirm, disabled guards, and loading/busy paths.
Open module →
Keyboard Keys
Learn how typing, focus, selection, paste, masks, OTP fields, and keyboard navigation behave in real forms.
Open module →
Single Select
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 →
Searchable Select
Type-to-filter a country list, navigate suggestions with the keyboard, and pick by Enter.
Open module →
Checkboxes
Toggle individual and bulk checkboxes; verify indeterminate parent state when only some children are selected.
Open module →
Radio Buttons
Switch between radio options and validate that exactly one option is selected at any time.
Open module →
Slider Interaction Lab
Exercise slider changes through drag, track click, keyboard arrows, and direct numeric input while comparing visual, displayed, and submitted values.
Open module →
Notifications
Trigger success, info, warning, and error toasts; assert visibility/text; verify auto-dismiss and manual close behavior.
Open module →
Toast Messages
Practice clear, non-blocking status messages: show a successful profile save, handle a failed save, and verify each toast's lifetime and dismissal behavior.
Open module →
JavaScript Alerts
Handle native alert, confirm, and prompt dialogs with Playwright dialog listeners, accept/dismiss flows, and message assertions.
Open module →
Loader / Spinner
Trigger an async fetch, verify the spinner is visible during load, and confirm it disappears once the data arrives.
Open module →
Static Table
Practice deterministic table assertions against a fixed Name, Email, Role, Status grid and click an action button inside a specific row.
Open module →
Dynamic Table
Search generated users, sort by name, filter active users, paginate, validate row counts, and click edit/delete for a specific row.
Open module →
Date Picker
Set a time with the clock input, open the calendar, pick a day, and verify the readonly field matches `HH:MM - DD/MM/YYYY` (local calendar parts, stable for automation).
Open module →
Date Range Picker
Set start/end times, pick day span in two taps, and validate the pill shows `HH:MM - DD/MM/YYYY → …` including auto-swap.
Open module →
File Upload
Upload an image, verify size + type validation, and reject files that exceed the budget.
Open module →
File Download
Download TXT, PDF, and CSV files and assert that the browser download event, suggested filename, and saved artifact are correct.
Open module →
PDF Download
Validate a dedicated sample PDF export: the download starts, the filename ends with .pdf, and the saved file is not empty.
Open module →
Generate Text File
Type custom text into a textarea, generate a .txt file, download it, and validate both filename and downloaded content.
Open module →
Image Handling Lab
Validate working, broken, slow, unauthorized, and corrupted image states with fallbacks, loading indicators, retry actions, and layout stability checks.
Open module →
Drag & Drop
Reorder a Kanban card across columns using mouse events and verify the destination column owns it.
Open module →
Tabs
Switch between three tabs, verify only the active panel renders, and confirm the URL hash updates.
Open module →
New Tab / Window
Click a link that opens a new tab and assert against the content of the popup page.
Open module →
Iframes
Reach into an iframe, fill a form inside it, and verify the parent receives the submission via postMessage.
Open module →
Accordions
Expand a section, verify only one section is open at a time, and confirm the icon rotates.
Open module →
Infinite Scroll
Scroll a virtualized list until the target item appears, asserting the loader disappears between batches.
Open module →