egutierrez
626d06327c
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>
2.1 KiB
2.1 KiB
name, kind, lang, domain, version, purity, signature, description, tags, params, output, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path
| name | kind | lang | domain | version | purity | signature | description | tags | params | output | uses_functions | uses_types | returns | returns_optional | error_type | imports | tested | tests | test_file_path | file_path | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| pw_keyboard_sequence | function | ts | browser | 1.0.0 | impure | async (page: Page, sequence: KbStep[]) => Promise<void> | 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. |
|
|
void; mutates focused element / page state. | false | error_go_core |
|
true |
|
frontend/functions/browser/pw_keyboard_sequence.test.ts | frontend/functions/browser/pw_keyboard_sequence.ts |
Ejemplo
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
focususa.first()— si el selector coincide con múltiples elementos, foca el primero. Afinar el selector si es necesario.typesimula escritura carácter a carácter condelay(default 30 ms). Para input más rápido pasardelayMs: 0.pressespera un nombre de tecla Playwright válido:"ArrowDown","Enter","Escape","Tab", etc.- Un
kinddesconocido lanza en runtime (útil para detectar typos en JS sin TypeScript).