PRACTICE

Drag and Drop Circles

Drag any circle into the can. Great for practicing drag-and-drop automation in Selenium/Playwright/Cypress.

Practice Panel

Drag a circle (example #circle-1) and drop it into #dropzone. After drop, verify #dropped changes from -- to the dropped circle id.

1

2

3

4

DROP ZONE

Drop here

Dropped circle:

Tip: Drag a circle into the can. For keyboard users, focus a circle and use automation tool drag actions.

Automation hints:

• Drag a circle (example #circle-1) and drop into #dropzone.
• After drop, verify [data-testid="dropped"] updates from -- to the dropped id.
• The dropped circle is marked with data-dropped="true" for stable assertions.