fn_registry/frontend/functions/browser/pw_drag_drop.md at e2ecdc75332e2a629e58445229a383c3d23e774c

Files

T

egutierrez e2ecdc7533 feat(registry): add playwright capability group (6 TS browser fns)

New domain `browser` under frontend/functions/ with 6 Playwright helpers:
- pw_launch_browser: chromium + context + page bootstrap with storageState
  support and baseUrl navigation.
- pw_kanban_login: authenticates a Page against /api/auth/login; sets the
  kanban_session cookie via shared storageState; verifies login page no
  longer visible after navigation.
- pw_drag_drop: human-like pointer drag (mousedown + activateOffset +
  stepped move + mouseup) compatible with @dnd-kit/core's 8px activation
  threshold; supports hoverMs for time-based dropzones.
- pw_keyboard_sequence: ordered focus/type/press/wait steps for scripting
  realistic input flows (typing then arrow-key navigating autocompletes).
- pw_wait_predicate: thin wrapper over page.waitForFunction with friendlier
  defaults and custom error messages.
- pw_assert_class: poll-based assertion that a Locator has/lacks a CSS
  class within a timeout; useful for visual-state checks.

Each function ships with vitest tests (5-8 cases each) covering both happy
and error paths, plus self-documenting .md (Ejemplo + Cuando usarla +
Gotchas + frontmatter with params/output schema).

Adds frontend/functions/package.json with `"type": "module"` so consumers
can ESM-import the .ts files from anywhere in the registry (Playwright's
tsx loader respects nearest package.json).

Capability page docs/capabilities/playwright.md documents the group with
a canonical end-to-end example, frontiers, prerequisites, and gotchas.
Index updated.

First consumer (issue 0088): apps/kanban requester-input.spec.ts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-14 12:57:30 +02:00

2.5 KiB

Raw Blame History

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, params, output, tested, tests, test_file_path, file_path

name

kind

lang

domain

version

purity

signature

description

Ejemplo

import { pw_drag_drop } from "./pw_drag_drop";

await pw_drag_drop(page, {
  source: "[data-card-id='abc']",
  target: "[data-column-id='xyz']",
  hoverMs: 500,
});

Cuando usarla

Cuando necesites arrastrar un elemento en el browser durante un test e2e con Playwright y el target usa @dnd-kit/core. El dragTo nativo de Playwright emite eventos HTML5 drag que dnd-kit ignora; esta funcion usa la API de mouse raw con un movimiento de activacion inicial para cruzar el umbral de 8px de dnd-kit.

Gotchas

playwright es una peer dependency: debe estar instalada en el proyecto consumidor (pnpm add -D playwright). El registry no la instala.
El umbral de activacion de dnd-kit es configurable en el PointerSensor; si el proyecto usa un umbral distinto al default de 8px, ajustar activateOffset (default: {x: 12, y: 0}) para superarlo.
steps y delayMs controlan la suavidad del drag. Valores bajos (steps=5, delayMs=0) pueden hacer que dnd-kit no detecte el movimiento como drag en versiones antiguas; los defaults (20 steps, 16ms) simulan ~60fps.
hoverMs es util para dropzones que se abren al mantener hover durante un tiempo (ej. sidebar de kanban que se abre tras 400ms). Pasarlo en 0 omite la espera.
Los source/target deben ser visibles y tener bounding box; si no se encuentran (display:none, detached) la funcion lanza un error descriptivo.
activateOffset es relativo al centro del source, no a su esquina.

2.5 KiB Raw Blame History

Ejemplo

Cuando usarla

Gotchas

2.5 KiB

Raw Blame History