1# Drag and Drop Testing
2 
3## Table of Contents
4 
51. [Kanban Board (Cross-Column Movement)](#kanban-board-cross-column-movement)
62. [Sortable Lists (Reordering)](#sortable-lists-reordering)
73. [Native HTML5 Drag and Drop](#native-html5-drag-and-drop)
84. [File Drop Zone](#file-drop-zone)
95. [Canvas Coordinate-Based Dragging](#canvas-coordinate-based-dragging)
106. [Custom Drag Preview](#custom-drag-preview)
117. [Variations](#variations)
128. [Tips](#tips)
13 
14> **When to use**: Testing drag-and-drop interactions — sortable lists, kanban boards, file drop zones, or repositionable elements.
15 
16---
17 
18## Kanban Board (Cross-Column Movement)
19 
20```typescript
21import { test, expect } from '@playwright/test';
22 
23test('moves card between columns', async ({ page }) => {
24  await page.goto('/board');
25 
26  const backlog = page.locator('[data-column="backlog"]');
27  const active = page.locator('[data-column="active"]');
28 
29  const ticket = backlog.getByText('Update API docs');
30  await expect(ticket).toBeVisible();
31 
32  const backlogCountBefore = await backlog.getByRole('article').count();
33  const activeCountBefore = await active.getByRole('article').count();
34 
35  await ticket.dragTo(active);
36 
37  await expect(active.getByText('Update API docs')).toBeVisible();
38  await expect(backlog.getByText('Update API docs')).not.toBeVisible();
39 
40  await expect(backlog.getByRole('article')).toHaveCount(backlogCountBefore - 1);
41  await expect(active.getByRole('article')).toHaveCount(activeCountBefore + 1);
42});
43 
44test('progresses card through workflow stages', async ({ page }) => {
45  await page.goto('/board');
46 
47  const cols = {
48    backlog: page.locator('[data-column="backlog"]'),
49    active: page.locator('[data-column="active"]'),
50    review: page.locator('[data-column="review"]'),
51    complete: page.locator('[data-column="complete"]'),
52  };
53 
54  await cols.backlog.getByText('Update API docs').dragTo(cols.active);
55  await expect(cols.active.getByText('Update API docs')).toBeVisible();
56 
57  await cols.active.getByText('Update API docs').dragTo(cols.review);
58  await expect(cols.review.getByText('Update API docs')).toBeVisible();
59 
60  await cols.review.getByText('Update API docs').dragTo(cols.complete);
61  await expect(cols.complete.getByText('Update API docs')).toBeVisible();
62 
63  await expect(cols.backlog.getByText('Update API docs')).not.toBeVisible();
64  await expect(cols.active.getByText('Update API docs')).not.toBeVisible();
65  await expect(cols.review.getByText('Update API docs')).not.toBeVisible();
66});
67 
68test('reorders cards within same column', async ({ page }) => {
69  await page.goto('/board');
70 
71  const backlog = page.locator('[data-column="backlog"]');
72 
73  const itemX = backlog.getByRole('article').filter({ hasText: 'Item X' });
74  const itemZ = backlog.getByRole('article').filter({ hasText: 'Item Z' });
75 
76  await itemZ.dragTo(itemX);
77 
78  const cards = await backlog.getByRole('article').allTextContents();
79  expect(cards.indexOf('Item Z')).toBeLessThan(cards.indexOf('Item X'));
80});
81 
82test('verifies drag persists via API', async ({ page }) => {
83  await page.goto('/board');
84 
85  const backlog = page.locator('[data-column="backlog"]');
86  const active = page.locator('[data-column="active"]');
87 
88  const responsePromise = page.waitForResponse(
89    (r) => r.url().includes('/api/tickets') && r.request().method() === 'PATCH'
90  );
91 
92  await backlog.getByText('Update API docs').dragTo(active);
93 
94  const response = await responsePromise;
95  expect(response.status()).toBe(200);
96 
97  const body = await response.json();
98  expect(body.column).toBe('active');
99 
100  await page.reload();
101  await expect(active.getByText('Update API docs')).toBeVisible();
102});
103```
104 
105---
106 
107## Sortable Lists (Reordering)
108 
109```typescript
110import { test, expect } from '@playwright/test';
111 
112test('reorders list items', async ({ page }) => {
113  await page.goto('/priorities');
114 
115  const list = page.getByRole('list', { name: 'Priority list' });
116 
117  const initial = await list.getByRole('listitem').allTextContents();
118  expect(initial[0]).toContain('Priority A');
119  expect(initial[1]).toContain('Priority B');
120  expect(initial[2]).toContain('Priority C');
121 
122  const priorityC = list.getByRole('listitem').filter({ hasText: 'Priority C' });
123  const priorityA = list.getByRole('listitem').filter({ hasText: 'Priority A' });
124 
125  await priorityC.dragTo(priorityA);
126 
127  const reordered = await list.getByRole('listitem').allTextContents();
128  expect(reordered[0]).toContain('Priority C');
129  expect(reordered[1]).toContain('Priority A');
130  expect(reordered[2]).toContain('Priority B');
131});
132 
133test('reorders via drag handle', async ({ page }) => {
134  await page.goto('/priorities');
135 
136  const list = page.getByRole('list', { name: 'Priority list' });
137 
138  const handle = list
139    .getByRole('listitem')
140    .filter({ hasText: 'Priority C' })
141    .getByRole('button', { name: /drag|reorder|grip/i });
142 
143  const target = list.getByRole('listitem').filter({ hasText: 'Priority A' });
144 
145  await handle.dragTo(target);
146 
147  const items = await list.getByRole('listitem').allTextContents();
148  expect(items[0]).toContain('Priority C');
149});
150 
151test('reorder persists after reload', async ({ page }) => {
152  await page.goto('/priorities');
153 
154  const list = page.getByRole('list', { name: 'Priority list' });
155 
156  const priorityC = list.getByRole('listitem').filter({ hasText: 'Priority C' });
157  const priorityA = list.getByRole('listitem').filter({ hasText: 'Priority A' });
158 
159  await priorityC.dragTo(priorityA);
160 
161  await page.waitForResponse((response) =>
162    response.url().includes('/api/priorities/reorder') && response.status() === 200
163  );
164 
165  await page.reload();
166 
167  const items = await list.getByRole('listitem').allTextContents();
168  expect(items[0]).toContain('Priority C');
169  expect(items[1]).toContain('Priority A');
170  expect(items[2]).toContain('Priority B');
171});
172```
173 
174### Incremental Mouse Movement for Custom Libraries
175 
176Some drag libraries (react-beautiful-dnd, dnd-kit) require incremental mouse movements:
177 
178```typescript
179test('reorders with incremental mouse movements', async ({ page }) => {
180  await page.goto('/priorities');
181 
182  const list = page.getByRole('list', { name: 'Priority list' });
183  const source = list.getByRole('listitem').filter({ hasText: 'Priority C' });
184  const target = list.getByRole('listitem').filter({ hasText: 'Priority A' });
185 
186  const sourceBox = await source.boundingBox();
187  const targetBox = await target.boundingBox();
188 
189  await source.hover();
190  await page.mouse.down();
191 
192  const steps = 10;
193  for (let i = 1; i <= steps; i++) {
194    await page.mouse.move(
195      sourceBox!.x + sourceBox!.width / 2,
196      sourceBox!.y + (targetBox!.y - sourceBox!.y) * (i / steps),
197      { steps: 1 }
198    );
199  }
200 
201  await page.mouse.up();
202 
203  const items = await list.getByRole('listitem').allTextContents();
204  expect(items[0]).toContain('Priority C');
205});
206```
207 
208---
209 
210## Native HTML5 Drag and Drop
211 
212```typescript
213import { test, expect } from '@playwright/test';
214 
215test('drags item to drop zone', async ({ page }) => {
216  await page.goto('/drag-example');
217 
218  const source = page.getByText('Movable Element');
219  const dropArea = page.locator('#target-zone');
220 
221  await expect(source).toBeVisible();
222  await expect(dropArea).not.toContainText('Movable Element');
223 
224  await source.dragTo(dropArea);
225 
226  await expect(dropArea).toContainText('Movable Element');
227});
228 
229test('drags between zones', async ({ page }) => {
230  await page.goto('/drag-example');
231 
232  const item = page.locator('[data-testid="element-1"]');
233  const areaA = page.locator('[data-testid="area-a"]');
234  const areaB = page.locator('[data-testid="area-b"]');
235 
236  await expect(areaA).toContainText('Element 1');
237 
238  await item.dragTo(areaB);
239 
240  await expect(areaB).toContainText('Element 1');
241  await expect(areaA).not.toContainText('Element 1');
242 
243  await areaB.getByText('Element 1').dragTo(areaA);
244 
245  await expect(areaA).toContainText('Element 1');
246  await expect(areaB).not.toContainText('Element 1');
247});
248 
249test('verifies drag visual feedback', async ({ page }) => {
250  await page.goto('/drag-example');
251 
252  const source = page.getByText('Movable Element');
253  const dropArea = page.locator('#target-zone');
254 
255  await source.hover();
256  await page.mouse.down();
257 
258  const dropBox = await dropArea.boundingBox();
259  await page.mouse.move(dropBox!.x + dropBox!.width / 2, dropBox!.y + dropBox!.height / 2);
260 
261  await expect(dropArea).toHaveClass(/drag-over|highlight/);
262 
263  await page.mouse.up();
264 
265  await expect(dropArea).not.toHaveClass(/drag-over|highlight/);
266  await expect(dropArea).toContainText('Movable Element');
267});
268```
269 
270---
271 
272## File Drop Zone
273 
274```typescript
275import { test, expect } from '@playwright/test';
276import path from 'path';
277 
278test('uploads file via drop zone', async ({ page }) => {
279  await page.goto('/upload');
280 
281  const dropZone = page.locator('[data-testid="file-drop-zone"]');
282 
283  await expect(dropZone).toContainText('Drag files here');
284 
285  const fileInput = page.locator('input[type="file"]');
286 
287  await fileInput.setInputFiles(path.resolve(__dirname, '../fixtures/report.pdf'));
288 
289  await expect(page.getByText('report.pdf')).toBeVisible();
290  await expect(page.getByText(/\d+ KB/)).toBeVisible();
291});
292 
293test('simulates drag-over visual feedback', async ({ page }) => {
294  await page.goto('/upload');
295 
296  const dropZone = page.locator('[data-testid="file-drop-zone"]');
297 
298  await dropZone.dispatchEvent('dragenter', {
299    dataTransfer: { types: ['Files'] },
300  });
301 
302  await expect(dropZone).toHaveClass(/drag-active|drop-highlight/);
303  await expect(dropZone).toContainText(/drop.*here|release.*upload/i);
304 
305  await dropZone.dispatchEvent('dragleave');
306 
307  await expect(dropZone).not.toHaveClass(/drag-active|drop-highlight/);
308});
309 
310test('rejects invalid file types', async ({ page }) => {
311  await page.goto('/upload');
312 
313  const fileInput = page.locator('input[type="file"]');
314 
315  await fileInput.setInputFiles({
316    name: 'script.exe',
317    mimeType: 'application/x-msdownload',
318    buffer: Buffer.from('fake-content'),
319  });
320 
321  await expect(page.getByRole('alert')).toContainText(/not allowed|invalid file type/i);
322  await expect(page.getByText('script.exe')).not.toBeVisible();
323});
324```
325 
326---
327 
328## Canvas Coordinate-Based Dragging
329 
330```typescript
331import { test, expect } from '@playwright/test';
332 
333test('drags element to specific coordinates', async ({ page }) => {
334  await page.goto('/design-tool');
335 
336  const canvas = page.locator('#editor-canvas');
337  const shape = page.locator('[data-testid="shape-1"]');
338 
339  const canvasBox = await canvas.boundingBox();
340  const targetX = canvasBox!.x + 300;
341  const targetY = canvasBox!.y + 200;
342 
343  await shape.hover();
344  await page.mouse.down();
345  await page.mouse.move(targetX, targetY, { steps: 10 });
346  await page.mouse.up();
347 
348  const newBox = await shape.boundingBox();
349  expect(newBox!.x).toBeCloseTo(targetX - newBox!.width / 2, -1);
350  expect(newBox!.y).toBeCloseTo(targetY - newBox!.height / 2, -1);
351});
352 
353test('snaps element to grid', async ({ page }) => {
354  await page.goto('/design-tool');
355 
356  const shape = page.locator('[data-testid="shape-1"]');
357  const canvas = page.locator('#editor-canvas');
358 
359  const canvasBox = await canvas.boundingBox();
360 
361  await shape.hover();
362  await page.mouse.down();
363  await page.mouse.move(canvasBox!.x + 147, canvasBox!.y + 83, { steps: 10 });
364  await page.mouse.up();
365 
366  const snappedBox = await shape.boundingBox();
367  expect(snappedBox!.x % 20).toBeCloseTo(0, 0);
368  expect(snappedBox!.y % 20).toBeCloseTo(0, 0);
369});
370 
371test('constrains drag within boundaries', async ({ page }) => {
372  await page.goto('/design-tool');
373 
374  const shape = page.locator('[data-testid="bounded-shape"]');
375  const container = page.locator('#bounds-container');
376 
377  const containerBox = await container.boundingBox();
378 
379  await shape.hover();
380  await page.mouse.down();
381  await page.mouse.move(containerBox!.x + containerBox!.width + 500, containerBox!.y - 200, {
382    steps: 10,
383  });
384  await page.mouse.up();
385 
386  const shapeBox = await shape.boundingBox();
387 
388  expect(shapeBox!.x).toBeGreaterThanOrEqual(containerBox!.x);
389  expect(shapeBox!.y).toBeGreaterThanOrEqual(containerBox!.y);
390  expect(shapeBox!.x + shapeBox!.width).toBeLessThanOrEqual(
391    containerBox!.x + containerBox!.width
392  );
393  expect(shapeBox!.y + shapeBox!.height).toBeLessThanOrEqual(
394    containerBox!.y + containerBox!.height
395  );
396});
397 
398test('resizes element via handle', async ({ page }) => {
399  await page.goto('/design-tool');
400 
401  const shape = page.locator('[data-testid="shape-1"]');
402  await shape.click();
403 
404  const resizeHandle = shape.locator('.resize-handle-se');
405  const handleBox = await resizeHandle.boundingBox();
406 
407  const initialBox = await shape.boundingBox();
408 
409  await resizeHandle.hover();
410  await page.mouse.down();
411  await page.mouse.move(handleBox!.x + 100, handleBox!.y + 80, { steps: 5 });
412  await page.mouse.up();
413 
414  const newBox = await shape.boundingBox();
415  expect(newBox!.width).toBeCloseTo(initialBox!.width + 100, -1);
416  expect(newBox!.height).toBeCloseTo(initialBox!.height + 80, -1);
417});
418```
419 
420---
421 
422## Custom Drag Preview
423 
424```typescript
425import { test, expect } from '@playwright/test';
426 
427test('shows custom drag preview', async ({ page }) => {
428  await page.goto('/board');
429 
430  const card = page.locator('[data-testid="ticket-1"]');
431  const targetCol = page.locator('[data-column="active"]');
432 
433  const cardBox = await card.boundingBox();
434  const targetBox = await targetCol.boundingBox();
435 
436  await card.hover();
437  await page.mouse.down();
438 
439  const midX = (cardBox!.x + targetBox!.x) / 2;
440  const midY = (cardBox!.y + targetBox!.y) / 2;
441  await page.mouse.move(midX, midY, { steps: 5 });
442 
443  await expect(page.locator('.drag-preview')).toBeVisible();
444  await expect(card).toHaveClass(/dragging|placeholder/);
445 
446  await page.mouse.move(
447    targetBox!.x + targetBox!.width / 2,
448    targetBox!.y + targetBox!.height / 2,
449    { steps: 5 }
450  );
451  await page.mouse.up();
452 
453  await expect(page.locator('.drag-preview')).not.toBeVisible();
454});
455 
456test('multi-select drag shows item count', async ({ page }) => {
457  await page.goto('/board');
458 
459  await page.locator('[data-testid="ticket-1"]').click();
460  await page.locator('[data-testid="ticket-2"]').click({ modifiers: ['Shift'] });
461  await page.locator('[data-testid="ticket-3"]').click({ modifiers: ['Shift'] });
462 
463  const card = page.locator('[data-testid="ticket-1"]');
464  const targetCol = page.locator('[data-column="complete"]');
465 
466  await card.hover();
467  await page.mouse.down();
468 
469  const targetBox = await targetCol.boundingBox();
470  await page.mouse.move(targetBox!.x + 50, targetBox!.y + 50, { steps: 5 });
471 
472  await expect(page.locator('.drag-preview')).toContainText('3 items');
473 
474  await page.mouse.up();
475 
476  await expect(targetCol.locator('[data-testid="ticket-1"]')).toBeVisible();
477  await expect(targetCol.locator('[data-testid="ticket-2"]')).toBeVisible();
478  await expect(targetCol.locator('[data-testid="ticket-3"]')).toBeVisible();
479});
480```
481 
482---
483 
484## Variations
485 
486### Keyboard-Based Reordering
487 
488```typescript
489test('reorders using keyboard', async ({ page }) => {
490  await page.goto('/priorities');
491 
492  const list = page.getByRole('list', { name: 'Priority list' });
493  const priorityC = list.getByRole('listitem').filter({ hasText: 'Priority C' });
494 
495  await priorityC.focus();
496  await page.keyboard.press('Space');
497 
498  await page.keyboard.press('ArrowUp');
499  await page.keyboard.press('ArrowUp');
500 
501  await page.keyboard.press('Space');
502 
503  const items = await list.getByRole('listitem').allTextContents();
504  expect(items[0]).toContain('Priority C');
505});
506```
507 
508### Cross-Frame Dragging
509 
510```typescript
511test('drags between main page and iframe', async ({ page }) => {
512  await page.goto('/composer');
513 
514  const sourceWidget = page.getByText('Component A');
515  const iframe = page.frameLocator('#preview-frame');
516  const iframeElement = page.locator('#preview-frame');
517 
518  const sourceBox = await sourceWidget.boundingBox();
519  const iframeBox = await iframeElement.boundingBox();
520 
521  const targetX = iframeBox!.x + 100;
522  const targetY = iframeBox!.y + 100;
523 
524  await sourceWidget.hover();
525  await page.mouse.down();
526  await page.mouse.move(targetX, targetY, { steps: 20 });
527  await page.mouse.up();
528 
529  await expect(iframe.getByText('Component A')).toBeVisible();
530});
531```
532 
533### Touch-Based Drag on Mobile
534 
535```typescript
536test('drags via touch events', async ({ page }) => {
537  await page.goto('/priorities');
538 
539  const list = page.getByRole('list', { name: 'Priority list' });
540  const source = list.getByRole('listitem').filter({ hasText: 'Priority C' });
541  const target = list.getByRole('listitem').filter({ hasText: 'Priority A' });
542 
543  const sourceBox = await source.boundingBox();
544  const targetBox = await target.boundingBox();
545 
546  await source.dispatchEvent('touchstart', {
547    touches: [{ clientX: sourceBox!.x + 10, clientY: sourceBox!.y + 10 }],
548  });
549 
550  for (let i = 1; i <= 5; i++) {
551    const y = sourceBox!.y + (targetBox!.y - sourceBox!.y) * (i / 5);
552    await source.dispatchEvent('touchmove', {
553      touches: [{ clientX: sourceBox!.x + 10, clientY: y }],
554    });
555  }
556 
557  await source.dispatchEvent('touchend');
558 
559  const items = await list.getByRole('listitem').allTextContents();
560  expect(items[0]).toContain('Priority C');
561});
562```
563 
564---
565 
566## Tips
567 
5681. **Start with `dragTo()`, fall back to manual mouse events**. Playwright's `dragTo()` handles most HTML5 drag-and-drop. Use `page.mouse.down()` / `move()` / `up()` only for custom libraries (react-beautiful-dnd, dnd-kit, SortableJS) that need specific event sequences.
569 
5702. **Add intermediate mouse steps for drag libraries**. Libraries like `react-beautiful-dnd` require multiple `mousemove` events. Use `{ steps: 10 }` or a manual loop — a single jump often fails silently.
571 
5723. **Assert final state, not just the drop event**. Verify DOM reflects the change — item order, column contents, position coordinates. Visual feedback during drag is secondary to the persisted state.
573 
5744. **Use `boundingBox()` for coordinate assertions**. For canvas editors or position-sensitive drops, capture bounding box after the operation and compare with `toBeCloseTo()` for tolerance.
575 
5765. **Test undo after drag operations**. If your app supports Ctrl+Z, verify the drag is reversible — this catches state management bugs.
577