Drag & Drop Kanban

← Back to Tetsing Lab

To Do 0

No cards here

In Progress 0

No cards here

Done 0

No cards here

🎭

How to automate this page

Playwright's `dragAndDrop(source, target)` fires the full sequence of drag events. Pair it with column count assertions to verify state after each move.

terminal # One-time setup
npm init playwright@latest

# Run your tests
npx playwright test

# Open the HTML report
npx playwright show-report

1 Verify the initial column counts initial state ▼

On page load, confirm each column has the expected number of cards (3 in To Do, 2 In Progress, 2 Done) by reading the count badges.

tetsing-lab.spec.ts

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

test('initial board column counts are correct', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/drag-drop-demo');

  await expect(page.locator('[data-testid=column-count-todo]')).toHaveText('3');
  await expect(page.locator('[data-testid=column-count-inprogress]')).toHaveText('2');
  await expect(page.locator('[data-testid=column-count-done]')).toHaveText('2');
});

2 Drag a card from To Do to In Progress basic drag ▼

Use `page.dragAndDrop()` to move card-1 from the To Do column to the In Progress column. Assert the card is now inside In Progress and the counts updated.

tetsing-lab.spec.ts

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

test('drag card-1 from To Do to In Progress', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/drag-drop-demo');

  await page.dragAndDrop(
    '[data-testid=card-1]',
    '[data-testid=column-inprogress]'
  );

  // card-1 should now be inside the In Progress column
  const inProgressCol = page.locator('[data-testid=column-inprogress]');
  await expect(inProgressCol.locator('[data-testid=card-1]')).toBeVisible();

  // counts updated
  await expect(page.locator('[data-testid=column-count-inprogress]')).toHaveText('3');
  await expect(page.locator('[data-testid=column-count-todo]')).toHaveText('2');
});

3 Move a card all the way to Done cross-column drag ▼

Drag card-2 directly from To Do to Done. Assert the Done count is 3 and To Do is 2.

tetsing-lab.spec.ts

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

test('drag card-2 from To Do to Done column', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/drag-drop-demo');

  await page.dragAndDrop(
    '[data-testid=card-2]',
    '[data-testid=column-done]'
  );

  await expect(page.locator('[data-testid=column-count-done]')).toHaveText('3');
  await expect(page.locator('[data-testid=column-count-todo]')).toHaveText('2');
});

4 Empty state appears when all cards are moved out empty state ▼

Move all 3 To Do cards to Done. Once empty the "No cards here" placeholder inside the To Do column should become visible.

tetsing-lab.spec.ts

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

test('empty-state shows when column is cleared', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/drag-drop-demo');

  // Move all three To Do cards to Done
  for (const id of ['card-1', 'card-2', 'card-3']) {
    await page.dragAndDrop(
      `[data-testid=${id}]`,
      '[data-testid=column-done]'
    );
  }

  await expect(page.locator('[data-testid=column-count-todo]')).toHaveText('0');

  // The empty-state placeholder should now be visible
  const todoCol = page.locator('[data-testid=column-todo]');
  await expect(todoCol.locator('text=No cards here')).toBeVisible();
});

🔐

Unlock Playwright Tutorial

Get the full automation guide for Drag & Drop Kanban — real test code, step by step.

€ 1.99 one-time

Unlock for €1.99 →

🔒 Secure checkout · Instant access · No subscription

🗂️ Drag & Drop Kanban

Unlock Playwright Tutorial