Optimistic UI Update

Network & API Optimistic Intermediate Nice to Try

Hands-on

Interactive Sandbox

Static partial

Try this

  1. Open page
  2. Interact control
  3. Read result

Assert this

  • Visible elements
  • Text matches
  • Button state toggles

API Simulation / Optimistic

Optimistic UI Update

Update UI immediately, then confirm or rollback.

Idle

Feed

    Learning & behavior

    User flow

    1. Open page
    2. Interact control
    3. 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='optimistic-ui-update-primary']
    • [data-test-id='optimistic-ui-update-secondary']
    • [data-test-id='optimistic-ui-update-action']
    • [aria-label='Optimistic UI Update']
    • getByRole('button', { name: 'Optimistic' })

    Fallback

    • section.optimistic-ui-update-container :nth-of-type(1)
    • .card.optimistic_ui_update button:nth-of-type(1)
    • form.optimistic-ui-update-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
    Prev API Cancellation
    Rate Limit Simulation Next