How do you test drag-and-drop functionality?

The Answer

Use `locator.dragTo(target)` for standard HTML5 drag-and-drop. For complex custom drag implementations (using mouse events), use the lower-level `page.mouse` API.

Deep Dive Explanation

The `steps` parameter in `mouse.move()` is crucial for custom DnD — it breaks the move into multiple intermediate steps, simulating a real mouse drag. Without steps, some drag handlers may not trigger properly as they expect incremental position events.

example.spec.ts

// Standard HTML5 drag-and-drop
await page.locator('#source-item').dragTo(page.locator('#target-zone'));

// With position offsets for precise targeting
await page.locator('#card').dragTo(page.locator('#column-done'), {
  sourcePosition: { x: 10, y: 10 },
  targetPosition: { x: 100, y: 50 },
});

// Custom drag using mouse API (for non-HTML5 DnD)
const source = page.locator('#draggable');
const target = page.locator('#droppable');

const sourceBox = await source.boundingBox();
const targetBox = await target.boundingBox();

await page.mouse.move(sourceBox!.x + 5, sourceBox!.y + 5);
await page.mouse.down();
await page.mouse.move(targetBox!.x + 5, targetBox!.y + 5, { steps: 10 });
await page.mouse.up();

// Assert result
await expect(page.locator('#droppable')).toContainText('Dropped!');