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:
@@ -0,0 +1,69 @@
|
||||
---
|
||||
name: pw_assert_class
|
||||
kind: function
|
||||
lang: ts
|
||||
domain: browser
|
||||
version: "1.0.0"
|
||||
purity: impure
|
||||
signature: "async (page: Page, opts: PwAssertClassOptions) => Promise<void>"
|
||||
description: "Asserts a Playwright Locator has (or lacks) a given CSS class, with polling up to timeoutMs. Use for visual-state checks like red borders, highlight pulses, active tabs."
|
||||
tags: [playwright, e2e, browser, assert]
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: "error_go_core"
|
||||
imports: []
|
||||
params:
|
||||
- name: page
|
||||
desc: "Playwright Page."
|
||||
- name: opts
|
||||
desc: "{selector, className, mustHave?, timeoutMs?}. selector accepts string CSS or Locator. className without leading dot."
|
||||
output: "void; throws with detailed message on timeout."
|
||||
tested: true
|
||||
tests: ["has class passes", "lacks class passes", "timeout error message", "string selector resolves", "locator polled"]
|
||||
test_file_path: "frontend/functions/browser/pw_assert_class.test.ts"
|
||||
file_path: "frontend/functions/browser/pw_assert_class.ts"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```typescript
|
||||
import { pw_assert_class } from "./pw_assert_class";
|
||||
|
||||
// Assert card has red border class after max-time exceeded
|
||||
await pw_assert_class(page, {
|
||||
selector: "[data-card-id='abc']",
|
||||
className: "border-red",
|
||||
mustHave: true,
|
||||
timeoutMs: 3000,
|
||||
});
|
||||
|
||||
// Assert roulette animation class is active on a card Locator
|
||||
const card = page.locator(".kanban-card").first();
|
||||
await pw_assert_class(page, {
|
||||
selector: card,
|
||||
className: "highlight-pulse",
|
||||
mustHave: true,
|
||||
timeoutMs: 2000,
|
||||
});
|
||||
|
||||
// Assert class is NOT present after animation ends
|
||||
await pw_assert_class(page, {
|
||||
selector: card,
|
||||
className: "highlight-pulse",
|
||||
mustHave: false,
|
||||
});
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Cuando necesites verificar que un elemento tiene (o no tiene) una clase CSS concreta en un test e2e de Playwright — por ejemplo comprobar que una tarjeta tiene `border-red` cuando se supera su tiempo máximo, o que `highlight-pulse` está activo durante la animación de ruleta. Úsala después de disparar la acción que debería cambiar el estado visual y antes de continuar con el siguiente paso del test.
|
||||
|
||||
## Gotchas
|
||||
|
||||
- Si `selector` es un string, usa `page.waitForFunction` internamente (delegado a la página), lo que es eficiente pero requiere que el selector sea un CSS selector válido para `document.querySelector`.
|
||||
- Si `selector` es un `Locator`, usa un bucle de polling con `locator.evaluate()`. Los Locators no se pueden serializar a través del contexto de `waitForFunction`.
|
||||
- `timeoutMs` por defecto es 5000 ms — ajústalo si la animación o transición tarda más.
|
||||
- Las clases se comprueban con `classList.contains(className)` — no incluyas el punto inicial.
|
||||
- Si el elemento está desconectado del DOM durante el polling de un Locator, se trata como condición no cumplida y sigue reintentando hasta el timeout.
|
||||
Reference in New Issue
Block a user