fn_registry/frontend/functions/browser/pw_assert_class.md at 626d06327cf661602f9b7a7c0ab8b9f0b689f2d7

Files

T

egutierrez 626d06327c 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.8 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_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.

2.8 KiB Raw Blame History

Ejemplo

Cuando usarla

Gotchas

2.8 KiB

Raw Blame History