Selenium WebDriver 4

Drag and drop an element

Hard120 pts~45 min
  • Actions API
  • Drag and drop
  • HTML5 DnD
Practice app · Board Planner

Hover menus, drag and drop, context menu, click-and-hold and keyboard shortcuts.

Test URL
/lab/selenium-drag-and-drop-an-element

Your starter code already declares TEST_URL — never hardcode a host.

Objective

Drag the “Task A” card into the Done column and verify the drop registered.

Your task

  1. 1Locate the source #draggable and the target #drop-zone.
  2. 2Drag the source onto the target with Actions dragAndDrop (or clickAndHold → moveToElement → release).
  3. 3Assert #drop-zone reads “Dropped!” and has the class “has-item”.

Acceptance criteria

  • The drag is performed with Actions (or a scripted HTML5 drag fallback)
  • #drop-zone shows “Dropped!”
  • At least 1 assertion passes

Constraints

  • Do not use the “Move to Done” button.

Selenium WebDriver 4 · Selenium · Mouse & keyboard actions