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>
This commit is contained in:
2026-05-14 12:57:30 +02:00
parent b5a56bb5ff
commit 626d06327c
24 changed files with 1911 additions and 1 deletions
@@ -0,0 +1,59 @@
---
name: pw_keyboard_sequence
kind: function
lang: ts
domain: browser
version: "1.0.0"
purity: impure
signature: "async (page: Page, sequence: KbStep[]) => Promise<void>"
description: "Executes a sequence of keyboard interactions (focus, type, key press, wait) on a Playwright Page. Use to script realistic input flows like typing then navigating autocomplete dropdowns with arrow keys."
tags: ["playwright", "e2e", "browser", "keyboard"]
params:
- name: page
desc: "Playwright Page."
- name: sequence
desc: "Array of steps: focus/type/press/wait. Executed in order."
output: "void; mutates focused element / page state."
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: "error_go_core"
imports: ["playwright"]
tested: true
tests:
- "focus calls focus"
- "type uses default delay"
- "press routes correctly"
- "wait calls waitForTimeout"
- "unknown kind throws"
- "order preserved"
test_file_path: "frontend/functions/browser/pw_keyboard_sequence.test.ts"
file_path: "frontend/functions/browser/pw_keyboard_sequence.ts"
---
## Ejemplo
```ts
import { pw_keyboard_sequence } from "./pw_keyboard_sequence";
await pw_keyboard_sequence(page, [
{ kind: "focus", selector: "input[name=requester]" },
{ kind: "type", text: "Enma" },
{ kind: "wait", ms: 200 },
{ kind: "press", key: "ArrowDown" },
{ kind: "press", key: "ArrowDown" },
{ kind: "press", key: "Enter" },
]);
```
## Cuando usarla
Cuando necesites encadenar foco + escritura + teclas especiales sobre un elemento (autocompletado, selects, modales de búsqueda). Úsala en tests E2E con Playwright en lugar de mezclar calls sueltas de `keyboard.type` y `keyboard.press`.
## Gotchas
- `focus` usa `.first()` — si el selector coincide con múltiples elementos, foca el primero. Afinar el selector si es necesario.
- `type` simula escritura carácter a carácter con `delay` (default 30 ms). Para input más rápido pasar `delayMs: 0`.
- `press` espera un nombre de tecla Playwright válido: `"ArrowDown"`, `"Enter"`, `"Escape"`, `"Tab"`, etc.
- Un `kind` desconocido lanza en runtime (útil para detectar typos en JS sin TypeScript).