Mouse

Drag & Drop

Advanced

Todo

Design test pyramid

Doing

QA review

Perf budget

Done

Lint config

Live widget · interact freely

Manual test goal

Reorder a Kanban card across columns using mouse events and verify the destination column owns it.

Expected result

Dragging the 'QA review' card from Doing → Done updates the source/dest counts.

Stable selectors

Card to drag[data-testid="dnd-card-qa"]
Source column[data-testid="dnd-col-doing"]
Target column[data-testid="dnd-col-done"]

Reference Playwright spec

drag-drop.spec.ts

import { test, expect } from '@playwright/test';

test('kanban drag and drop', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/drag-drop');

  const card = page.getByTestId('dnd-card-qa');
  const target = page.getByTestId('dnd-col-done');
  await card.dragTo(target);

  await expect(page.getByTestId('dnd-col-done')).toContainText('QA review');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idledrag-drop.spec.ts

https://lab.hakdogan.com/practice/drag-drop

# console output will stream here