Learn to find anything in the DOM.
A practice sandbox built for hands-on learning with Playwright, Selenium, Cypress, Tosca, and AccelQ — realistic, deliberately awkward UI patterns across forms, tables, dialogs, drag-and-drop, iframes, and shadow DOM, so your locators get tested against more than a tutorial page.
Written for engineers who already know what a flaky selector costs.
Practice categories
Every page ships with intentionally awkward markup so your locators actually get tested — pick a category below.
Data-Driven Practice Suite (shared login & data vault across every scenario below)
Login System (Data-Driven)
7 real test users — happy path, locked account, password-expired reset, and a 3-strikes lockout timer.
Auto Insurance Quote
A live-recalculating premium, an eligibility rule that blocks the quote outright, an add-on disabled by coverage level, and a claims flow.
Mobile Plan Signup
Three independent conditional-field pairs in one flow: BYOD vs. new device, physical SIM vs. eSIM, new number vs. port-in.
Hotel Booking
Date-range validation, rooms disabled by guest count, and a cancellation refund computed from the actual check-in date.
Vegetable Ordering
Zip serviceability check, weight-priced items, delivery slots → checkout → a claim flow that fails on an invalid order ID.
Laptop Ordering
Cross-field compatibility rules, an OTP step, simulated financing approval → the account this whole suite's profile data comes from.
Personal Loan Application
A deterministic decline case on demand, an employment rule that blocks the flow outright, and a real amortization formula on the offer.
Healthcare Appointment
A provider list filtered by visit reason, and a payment step that changes shape entirely between insured and self-pay.
Flight Booking
A seat map that requires exactly the right seat count, a passenger form generated per traveler, and a departure-driven refund rule.
Power Bill Payment
A bill amount deterministically derived from the account number, plus a custom-amount field that has to stay inside the real balance.
Pickleball Court Booking
A capacity rule enforced by an inline error on click rather than a disabled button, plus per-player equipment rental pricing.
Dashboards
Credit Card & Bank Info
Inputs & Files
Autocomplete
Suggestions that don't exist in the DOM until you type.
Lists & Dropdowns
Custom single- and multi-select, not native <select>.
File Upload & Download
A native file input and a client-generated download, filename and contents timestamped fresh each click.
Key Presses
Special keys and modifiers, echoed back so you can confirm send-keys works.
WYSIWYG Editor
A contenteditable rich-text box — no value attribute, state lives in innerHTML.
Tables & Data
Dynamic Tables
Add, delete, search, and edit rows — locate by stable data attributes.
Pagination
Only the current page's rows exist in the DOM.
Sortable Tables
Column sort flips order and the aria-sort indicator.
Table Reading & Lookups
Six ways to read a table before acting — count, last row, search, grid lookup, criteria dropdown, near-duplicates.
Find the Changed Cell
Diff two table states and report exactly which cell changed, and to what.
Dialogs & Feedback
Direct Manipulation
Drag & Drop
Native HTML5 drag events, plus a keyboard path.
Sliders
A range input whose ARIA value updates on every move.
Mouse Hover & Tooltips
Content revealed by hover — and by keyboard focus.
Context Menus
A custom right-click menu, not the browser's native one.
Calendars
Five date-picker types: native, datetime, popup, inline, and range.
Ordered Task List
Drag tasks to Completed, but only in ascending ID order — out-of-order drops get rejected.
DOM Structure
iFrames
Two levels of nested frames to switch context into.
Shadow DOM
An open shadow root regular selectors won't pierce.
Challenging DOM
IDs and classes that regenerate on every page load.
Add/Remove Elements
Identical buttons with no id, class, or distinguishing text.
Large & Deep DOM
A 320-cell table and a 20-level-deep div chain — find the target directly.
Complex Scenarios
Content & Rendering
A/B Testing
One of two random variants on every "visit" — assert on either, not one.
Broken Images
An img tag in the DOM proves nothing — check naturalWidth instead.
Dynamic Content
Stable structure, randomized text — assert on shape, not the exact sentence.
Shifting Content
A list that reorders, and a banner that pushes your target down mid-flow.
Typos
A visual typo and a homoglyph swap — both invisible to a screenshot.
Conditional Logic & Loops
If/Else Conditions
A conditionally-rendered field, and an outcome that branches every run.
While & Loops
A progress bar to poll and a counter to click until threshold.
Control Flow Lab
5 gradeable scenarios with a real pass/fail verdict — if/else, else-if, while (a genuine 6-minute run), do-while, and for.
Dynamic Controls
A remove/add checkbox and an enable/disable input, both delayed ~1s.
Error-Handling Loop
Count to 10, but ~30% of clicks throw an error your loop has to detect and clear.
Bubble Sort
A real comparison-driven loop — Swap or Next depending on the highlighted pair, until it's actually sorted.
Timing & Flakiness
Stale Element Reference
A DOM node swapped out from under a cached element handle.
Disappearing Elements
A nav item randomly missing from the DOM on every reload.
Dynamic Loading
Hidden-until-ready vs. not-created-until-ready — two different waits.
Slow Resources
A random 2–6s load time — a hardcoded sleep passes only by luck.