Practice fixture
Inputs
Native, masked, validated, debounced and suggested fields.
Component Lab · Stable contracts
Component Lab for Playwright
Learn one browser interaction at a time against deterministic, documented fixtures, then carry the same contract into a realistic application or challenge.
Choose a focused contract
Practice by component family
Each page names its fixture ID, intended behavior, automation tasks, locator guidance, and passing examples. Intentionally awkward states are isolated and labelled.
Practice fixture
Buttons
Clicks, delays, replacement, gestures and scoped duplicate labels.
Practice fixture
Choices
Checkbox, radio, hierarchy, generated and conditional states.
Practice fixture
Dropdowns
Native and ARIA selection with dependent and paged options.
Practice fixture
Forms
Six realistic workflows with client and API validation.
Practice fixture
Tables
Sorting, filtering, pagination, editing and virtualized rows.
Practice fixture
Search and lists
Debounce, autocomplete, pagination and infinite scroll.
Practice fixture
Dynamic DOM
Generated selectors, reordering, duplicates and replacement.
Practice fixture
Dialogs
Browser dialogs, accessible modals and semantic toasts.
Practice fixture
Interactions
Hover, gestures, scroll, focus, shortcuts and listboxes.
Practice fixture
Date, time and ranges
Calendars, timezones, sliders and async progress.
Practice fixture
Frames and windows
Same-origin frames, nested documents, tabs and popups.
Practice fixture
Shadow DOM
Open, closed, nested and slotted component boundaries with documented browser behavior.
Practice fixture
Visual Testing
Paired frozen baselines for screenshot comparison across responsive layouts.
Practice fixture
Files
Safe uploads, previews, rejection paths and downloads.
Practice fixture
Drag and drop
Cards, sorting, safe file drops and a Kanban board.
Practice fixture
Browser context
Cookies, storage, permissions, offline and responsive states.
Practice fixture
Accessibility
Keyboard, names, live regions and isolated accessibility anti-patterns.
A repeatable method
Observe, locate, act, assert
- Read the fixture contract and identify the user-visible state.
- Choose a role, label, text, or documented technical locator.
- Perform the smallest action that produces the target outcome.
- Assert the observable result and the exact intended edge case.
Learning objective
What you will be able to do
Choose one component family, understand its stable and intentionally awkward states, and automate only observable behavior.
Continue learning