QA PRACTICE•UI ELEMENTS
QA Practice · UI testing fundamentals
Learn how interfaces behave
Practise browser behaviours, then automate each check with Playwright.
Forms
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.
Forms
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.
Forms
Keyboard Keys
Learn how typing, focus, selection, paste, masks, OTP fields, and keyboard navigation behave in real forms.
Selection
Single Select
Select a value from a native dropdown and assert the downstream summary updates.
Selection
Multi Select
Select several skills, verify chips render in selection order, and assert removal via chip × button.
Selection
Searchable Select
Type-to-filter a country list, navigate suggestions with the keyboard, and pick by Enter.
Selection
Checkboxes
Toggle individual and bulk checkboxes; verify indeterminate parent state when only some children are selected.
Selection
Radio Buttons
Switch between radio options and validate that exactly one option is selected at any time.
Selection
Slider Interaction Lab
Exercise slider changes through drag, track click, keyboard arrows, and direct numeric input while comparing visual, displayed, and submitted values.
Overlays
Notifications
Trigger success, info, warning, and error toasts; assert visibility/text; verify auto-dismiss and manual close behavior.
Overlays
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.
Overlays
JavaScript Alerts
Handle native alert, confirm, and prompt dialogs with Playwright dialog listeners, accept/dismiss flows, and message assertions.
Async
Loader / Spinner
Trigger an async fetch, verify the spinner is visible during load, and confirm it disappears once the data arrives.
Tables
Static Table
Practice deterministic table assertions against a fixed Name, Email, Role, Status grid and click an action button inside a specific row.
Tables
Dynamic Table
Search generated users, sort by name, filter active users, paginate, validate row counts, and click edit/delete for a specific row.
Tables
Pagination
Practice moving through a paginated result set and verify that each page shows the correct records.
Date & Files
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).
Date & Files
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.
Date & Files
File Upload
Upload an image, verify size + type validation, and reject files that exceed the budget.
Date & Files
File Download
Download TXT, PDF, and CSV files and assert that the browser download event, suggested filename, and saved artifact are correct.
Date & Files
PDF Download
Validate a dedicated sample PDF export: the download starts, the filename ends with .pdf, and the saved file is not empty.
Date & Files
Generate Text File
Type custom text into a textarea, generate a .txt file, download it, and validate both filename and downloaded content.
Date & Files
Image Handling Lab
Validate working, broken, slow, unauthorized, and corrupted image states with fallbacks, loading indicators, retry actions, and layout stability checks.
Mouse
Drag & Drop
Reorder a Kanban card across columns using mouse events and verify the destination column owns it.
Navigation
Tabs
Switch between three tabs, verify only the active panel renders, and confirm the URL hash updates.
Navigation
New Tab / Window
Click a link that opens a new tab and assert against the content of the popup page.
Embed
Iframes
Reach into an iframe, fill a form inside it, and verify the parent receives the submission via postMessage.
Navigation
Accordions
Expand a section, verify only one section is open at a time, and confirm the icon rotates.
Async
Infinite Scroll
Scroll a virtualized list until the target item appears, asserting the loader disappears between batches.