🎛 UI Element Playground

Delayed loads, shifting IDs, alerts, iframes, drag & drop and a flaky button. Built for practising robust waits and selectors in Selenium, Playwright, or Cypress.

AutomationAdvanced

Every widget here carries a stable data-testid. Anything else on the page — ids, timings, success rates — is free to change.

1 · Delayed load

Fills after a random 1–5s. Wait on the result, not the clock.

state: idle

2 · Shifting id

The id changes; data-testid does not.

current id: btn-a1b2c3 · clicks: 0

3 · Flaky button

Fails about one click in three. Do not paper over it.

    4 · Native dialogs

    Register the handler before you click.

    result:

    5 · Drag and drop

    Reorder the list with HTML5 drag events.

    • 1. Plan
    • 2. Design
    • 3. Execute
    • 4. Report

    6 · Iframe

    A separate document — switch context to reach inside.

    Challenges

    Work through these before revealing anything. Answers are opinions worth arguing with, not gospel.

    1. 01

      The "Load data" button fills a table after a random 1–5 second delay. Write a wait that never flakes.

      sign in to track
    2. 02

      The "Regenerate" button gives the target button a new random id each time. Write a stable selector.

      sign in to track
    3. 03

      The flaky button fails roughly 1 in 3 clicks. Should your test retry it? Justify the answer.

      sign in to track
    4. 04

      Interact with the element inside the iframe. Why does a normal selector fail?

      sign in to track
    5. 05

      Handle the native confirm() dialog. What happens if you ignore it?

      sign in to track