BrauzerLab
← Back to missions 18 / 50

Drag-and-Drop Card

Medium ~180 sec

Move the card on the Kanban board from the “Pending” column to the “Done” column.

Playwright’s dragTo() method is built for this operation. Simply chain it from the source locator to the target locator:

await page.locator('#task-card').dragTo(page.locator('#col-done'));

Alternatively, you can manually fire the drag-drop event chain using dispatchEvent(): first dragstart on the card, then dragover and drop on the target column.

The page object is already available. The mission passes when the card lands in the correct column.

TASK

Drag the card from the «Pending» column to the «Done» column.

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

test('Drag-and-Drop Card', async ({ page }) => {
  await page.goto('https://lab.local/mission/drag-and-drop');
  // ↓ Your code goes below ↓
});
Editor
https://lab.local/mission/drag-and-drop
Loading...
Console Found a bug in this mission? Report it
Results will appear here — press Run or Check.