Learn to find anything in the DOM.
A practice sandbox for test automation locator strategies — 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.
End-to-End Scenarios
Order a Shirt
Size → shipping with a cascading country/state dropdown → payment → a real order number.
Order a Desktop
Configure with live-priced radios/checkboxes → cart → checkout → order confirmation.
Order Vegetables
Quantity steppers → cart + promo code → a blocking Terms & Conditions gate → shipping/payment → order number.
Book a Flight
Trip type, route, dates → generated results → a passenger form whose field count depends on your input → payment → PNR.
Forms & Login
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.
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.