---
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.