TESTHEON Practice Lab

Component Lab I · Reordering and persistence

Drag and Drop Lab

Move cards with HTML5 or pointer input, sort with drag or keyboard, share the safe file dropzone, and persist a Kanban transition through the tasks API.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Cards between zones

Cards support native HTML5 drag events and pointer-based dragging; each destination has a stable region name.

Backlog

  • Accessibility review
  • Checkout smoke

Done

    No card moved.

    Sortable list with keyboard alternative

    Drag rows into order or use the named buttons; both paths update the same visible order.

    1. API contract
    2. Desktop smoke
    3. Mobile smoke
    4. Accessibility scan

    Order: API contract, Desktop smoke, Mobile smoke, Accessibility scan.

    Shared safe file dropzone

    This uses the Files Lab allowlist and size cap; it validates the drop locally without exposing uploaded bytes.

    Drop PNG, JPEG, CSV, TXT, or PDF files here

    No files dropped.

    API-backed Kanban board

    Six synthetic tasks load from the current sandbox; dropping a task PATCHes its status before the card moves.

    To Do

      In Progress

        Done

          Loading sandbox tasks.

          Passing examples

          Start with observable behavior

          These snippets match executable tests stored inexamples/playwright-ts/.

          Drag-to example
          const source = page.getByRole('listitem', { name: /Accessibility review/ });
const target = page.getByRole('region', { name: 'Done card zone' });
await source.dragTo(target);
await expect(page.getByTestId('drag-result')).toContainText('Done');