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,67 @@
---
id: "0088"
title: "kanban: requester input vacío + navegación con teclado"
status: open
created_at: 2026-05-14
priority: medium
app: kanban
---
## Problema
Al crear una nueva card en el kanban (`Nueva tarjeta` modal), el campo "Solicitante" se pre-rellena con el `display_name` del usuario logueado. Esto fuerza al usuario a borrar el contenido si quiere otro solicitante.
Además, al escribir en el Autocomplete:
- La tecla `Enter` dispara el submit del formulario (línea 51-56 de `CardForm.tsx`) en lugar de seleccionar la sugerencia resaltada del dropdown.
- Las flechas ↑↓ no son navegables porque el Autocomplete de Mantine sí las soporta nativamente, pero el `onKeyDown` con submit-on-Enter las invalida (al pulsar Enter para confirmar la selección, se cierra el form sin haber seleccionado).
## Solución
### Frontend
1. `apps/kanban/frontend/src/App.tsx:548`
```ts
initial={{ requester: auth.user?.display_name || auth.user?.username || "" }}
```
→ cambiar a:
```ts
initial={{ requester: "" }}
```
(Quitar pre-fill. Si más adelante se quiere "último solicitante usado", se hace en otro issue.)
2. `apps/kanban/frontend/src/components/CardForm.tsx`
- Cambiar el handler `enterSubmit` aplicado al `Autocomplete` de "Solicitante". Para Enter en el requester:
- Si dropdown abierto → dejar que Mantine maneje la selección (no `e.preventDefault()`, no `submit()`).
- Si dropdown cerrado → no hacer nada (no `submit()`).
- El submit se hace solo con el botón "Crear" (o Ctrl+Enter desde el textarea de descripción, que ya existe).
- Añadir `data-field="requester"` al Autocomplete para selectores estables en e2e.
### Tests
- **vitest componente**: `apps/kanban/frontend/src/components/CardForm.test.tsx`
- Render con `requesterOptions=["Alice","Anna","Bob"]`, sin `initial.requester`.
- Assert input vacío.
- Type "An" → dropdown muestra Alice + Anna (filtro).
- Press ArrowDown → highlight Alice, press ArrowDown → highlight Anna, press Enter → input vale "Anna" y `onSubmit` NO se llamó.
- Press Enter en input cuando dropdown cerrado → `onSubmit` NO se llamó.
- Click en botón "Crear" → `onSubmit` llamado con `requester: "Anna"`.
- **Playwright e2e**: `apps/kanban/frontend/e2e/requester-input.spec.ts` usando funciones del registry (`pw_launch_browser`, `pw_kanban_login`, `pw_keyboard_sequence`, `pw_assert_class`).
- Login → click "+ Nueva tarjeta" en cualquier columna.
- Assert input requester vacío.
- Type "Enma", esperar 200ms (debounce dropdown).
- ArrowDown + Enter → assert modal sigue visible y input contiene un valor.
- Click "Crear" → modal se cierra y card aparece en columna.
## Criterios de aceptación
- [ ] Input "Solicitante" entra vacío al abrir "Nueva tarjeta".
- [ ] Enter dentro del Autocomplete NO cierra el form.
- [ ] ↑↓ navegan el dropdown y Enter selecciona la entrada resaltada.
- [ ] Botón "Crear" sigue funcionando como único submit del form.
- [ ] Tests vitest + e2e Playwright pasan.
## Ramas / commits
- Rama: `issue/0088-kanban-requester-empty-nav`
- Merge `--no-ff` a master.