Add/Remove Elements

Handle dynamic DOM changes

What you will learn

After add: assert by role + accessible name, not by index — a second add doesn't guarantee the new element is at position N+1
After remove: use .not.toBeAttached() (DOM absent), not .not.toBeVisible() (may be display:none but still in DOM)
Test idempotency: clicking Remove twice must not crash or remove a different element — common off-by-one bug

Add Elements

Click to add new elements dynamically

Total elements: 0

List Management

Add and remove items from a list

Item 1
Item 2
Item 3

Items in list: 3

Checkbox Delete Pattern

Select items with checkboxes and delete them

Task 1Task 2Task 3

Dynamic Table Rows

Add and remove rows from a table

ID	Name	Email	Action
1	John	john@example.com
2	Jane	jane@example.com

Rows: 2

Testing Tips

Automation hints

✓ Use waitFor() to verify element count after add/remove operations
✓ Check #elements-count and #items-count for dynamic counters
✓ Verify .added-element and .list-item classes for new items
✓ Test #btn-clear-all with empty state verification (#empty-list-message)
✓ Validate checkbox selection before #btn-delete-selected is enabled

Related Challenges

Add/Remove Elements

Handle dynamic DOM changes

What you will learn

After add: assert by role + accessible name, not by index — a second add doesn't guarantee the new element is at position N+1
After remove: use .not.toBeAttached() (DOM absent), not .not.toBeVisible() (may be display:none but still in DOM)
Test idempotency: clicking Remove twice must not crash or remove a different element — common off-by-one bug

Add Elements

Click to add new elements dynamically

Total elements: 0

List Management

Add and remove items from a list

Item 1
Item 2
Item 3

Items in list: 3

Checkbox Delete Pattern

Select items with checkboxes and delete them

Task 1Task 2Task 3

Dynamic Table Rows

Add and remove rows from a table

ID	Name	Email	Action
1	John	john@example.com
2	Jane	jane@example.com

Rows: 2

Testing Tips

Automation hints

✓ Use waitFor() to verify element count after add/remove operations
✓ Check #elements-count and #items-count for dynamic counters
✓ Verify .added-element and .list-item classes for new items
✓ Test #btn-clear-all with empty state verification (#empty-list-message)
✓ Validate checkbox selection before #btn-delete-selected is enabled

Related Challenges

Dynamic Content

Medium

Dynamic Loading

Medium

Dynamic Controls

Medium

Add/Remove Elements

What you will learn

Add Elements

List Management

Checkbox Delete Pattern

Dynamic Table Rows

Testing Tips

Timer

Need Help?

Related Challenges

Dynamic Content

Dynamic Loading

Dynamic Controls

Add/Remove Elements

What you will learn

Add Elements

List Management

Checkbox Delete Pattern

Dynamic Table Rows

Testing Tips

Timer

Need Help?

Related Challenges

Dynamic Content

Dynamic Loading

Dynamic Controls