Skip to content
QA Knowledge Hub

Drag and drop

Intermediate

Drag items into two drop zones. There are also buttons that do the same, so the page works without a mouse.

Practice area

Item 1
Item 2
Item 3

Zone A

    Zone B

      Tasks to automate

      1. Drag Item 1 into Zone A and assert that Zone A lists it.
      2. Drag Item 2 into Zone B, then move it to Zone A.
      3. Reset and assert that all items are back in the list.
      4. Do the same with the keyboard-accessible buttons and compare which approach is more stable.

      Model solutions

      Try the tasks first. These show one good way, not the only way.

      Selenium (Java)
      WebElement item = driver.findElement(By.id("pg-drag-1"));
WebElement zone = driver.findElement(By.id("pg-zone-a"));
new Actions(driver).dragAndDrop(item, zone).perform();
assertTrue(zone.getText().contains("Item 1"));
// Note: some browsers do not fire HTML5 drag events for synthetic Selenium drags.
// If this fails, use clickAndHold + moveToElement + release, or the buttons as a fallback.
      Playwright (TypeScript)
      await page.locator('#pg-drag-1').dragTo(page.locator('#pg-zone-a'));
await expect(page.locator('#pg-zone-a')).toContainText('Item 1');

      Element IDs on this page are stable and will not change. Nothing you do here is sent to a server.