Components Gym
The tricky widgets that break naive automation — modals, tabs, tables, toasts, autocomplete, dynamic IDs, and more. Each card has a practice task. Every element has a stable data-test hook.
1 · Modal / dialog
Task: open the modal, assert its heading, then close it and assert it's gone.
Confirm your action
This dialog is rendered on top of the page. Wait for it before asserting.
2 · Tabs
Task: click "Shipping", assert the panel shows the shipping text.
3 · Accordion
Task: expand the FAQ item and assert the answer becomes visible.
4 · Checkboxes & radios
Task: tick "Gift wrap", pick "Express", assert the summary updates.
Shipping: Standard
5 · Quantity stepper (bounds 1–10)
Task: the boundaries. "−" disables at 1, "+" disables at 10.
6 · Search filter
Task: type "a", assert only matching items remain.
0 shown
7 · Data table — sort & paginate
Task: sort by price ascending, then go to page 2 and read the first row.
| Product ▲▼ | Price ▲▼ |
|---|
8 · Autocomplete
Task: type "de", wait for suggestions, pick "Delhi", assert selection.
9 · Toast (auto-dismiss)
Task: it appears, then vanishes after 3s. Use auto-retrying assertions, not sleeps.
10 · Dynamic ID
Task: the button's id changes every load — target it by data-test, not id.
current id:
11 · Delayed render
Task: click load; the content appears after ~3s. Web-first assertions handle it.
12 · Disabled until valid
Task: assert the button is disabled, tick the box, assert it's enabled.
13 · File upload
Task: use setInputFiles, assert the chosen file name shows.