Expandable Row Table
Tables & Data Lists Expandable Intermediate Should HaveHands-on
Interactive Sandbox
Try this
- Open page
- Interact control
- Read result
Assert this
- Visible elements
- Text matches
- Button state toggles
Tables / Expandable
Expandable Row Table
Toggle row details and ensure only one open.
| Case | State | |
|---|---|---|
| C-1 | Open | |
| Investigation in progress. | ||
| C-2 | Pending | |
| Waiting on customer reply. | ||
| C-3 | Closed | |
| Resolved last week. | ||
No row expanded
Learning & behavior
User flow
- Open page
- Interact control
- Read result
Learning objectives
- Pick solid locators
- Time waits
- Assert state
Suggested assertions
- Visible elements
- Text matches
- Button state toggles
Selector tips
Good
- [data-test-id='expandable-row-table-primary']
- [data-test-id='expandable-row-table-secondary']
- [data-test-id='expandable-row-table-action']
- [aria-label='Expandable Row Table']
- getByRole('button', { name: 'Expandable' })
Fallback
- section.expandable-row-table-container :nth-of-type(1)
- .card.expandable_row_table button:nth-of-type(1)
- form.expandable-row-table-form .field-group:nth-child(1)
Avoid
- .mt-4.mb-2.flex.items-center > input:nth-child(1)
- .css-1a2b3c4
- div[class*='temp-'][class*='hover']
Notes
- Some parts delay render
- Icon buttons need aria-label
- Layout classes may shift