← Back to library
Playwrightselectorsintermediatev1.20+

Drag and drop

Drag an element to a drop target using Playwright's built-in dragTo API.

1test('drags a card to the done column', async ({ page }) => {
2  await page.goto('/kanban');
3
4  const card = page.locator('[data-testid="card-1"]');
5  const dropZone = page.locator('[data-testid="column-done"]');
6
7  // dragTo handles the full mousedown → mousemove → mouseup sequence
8  await card.dragTo(dropZone);
9
10  // Assert the card now lives inside the target column
11  await expect(dropZone.locator('[data-testid="card-1"]')).toBeVisible();
12});
#drag#drop#dragTo#mouse