feadulta/tools/e2e

tools/e2e — Suite E2E económica en tokens

Pipeline de revisión visual/funcional con coste mínimo en tokens de Claude. Diseño 3-tier:

Tier	Quién	Coste tokens Claude
1 — Programático	Playwright local	0
2 — LLM local vision	Gemma 4 vision en LM Studio	0
3 — Claude	Lee report.md (texto)	Mínimo

Issue de diseño: rafa/feadulta#37.

Setup

cd tools/e2e
npm install            # instala playwright 1.58.2 (reaprovecha browsers ya en ~/.cache/ms-playwright/)

Uso — Tier 1 (sin LLM)

# Suite completa
node run.js feadulta

# Una sola URL por slug
node run.js feadulta home-es

# Subconjunto
node run.js feadulta --only=home-es,effa-hub,carta-semana

Genera por cada pasada:

out/<site>/<timestamp>/
  report.json     # datos crudos
  report.md       # tabla legible
  <slug>.png      # screenshot full-page por URL
out/<site>/latest -> <timestamp>   # symlink al último run

Métricas por URL: HTTP status, console errors/warnings, page errors, requests fallidas (≥400), <img> con naturalWidth==0, <title>, <h1>, word count, tiempo de carga.

Severity:

• OK — sin problemas detectados
• WARN — imágenes rotas, requests 4xx, console errors
• FAIL — HTTP ≥ 400 o error de navegación

Uso — Tier 2 (vision Gemma 4)

# Pregunta ad hoc sobre una captura
node ask-vision.js out/feadulta/latest/post-tolle-44247.png \
  "¿Se ve la foto de Eckhart Tolle? ¿Hay placeholders rotos?"

# Auto: pasa cada captura WARN/FAIL a la vision y escribe vision.md
node ask-vision.js --auto out/feadulta/latest

Variables de entorno (opcionales):

• LMSTUDIO_URL — default http://172.19.128.1:1234/v1 (gateway WSL→Windows)
• LMSTUDIO_MODEL — default google/gemma-4-e4b
• MAX_TOKENS — default 800
• TEMPERATURE — default 0.2

Requisito: LM Studio cargado con un modelo multimodal y escuchando en 0.0.0.0:1234.

Añadir un sitio

Crear sites/<nombre>.json:

{
  "name": "ytsummaries",
  "baseUrl": "https://farmer.taild3aaf6.ts.net",
  "viewport": { "width": 1366, "height": 900 },
  "timeoutMs": 30000,
  "userAgent": "ytsummaries-e2e/0.1",
  "urls": [
    { "slug": "home",  "path": "/yt/" },
    { "slug": "admin", "path": "/yt/wp-admin/" }
  ]
}

baseUrl + path se concatena tal cual. Ejecutar con node run.js ytsummaries.

Diseño

• Sin LLM por defecto: los checks deterministas (HTTP/console/naturalWidth) cubren los fallos reales.
• Vision bajo demanda: Gemma 4 solo entra cuando hace falta opinar sobre maquetación o cuando Tier 1 marca algo raro.
• Claude solo lee texto: report.md cabe en ~10 KB. Las PNG no entran al contexto salvo que el usuario lo pida.
• Stateless: cada pasada vive en su propia carpeta timestamp. latest es symlink.
• Reutilizable: el runner no sabe nada de feadulta; solo conoce el formato sites/<x>.json.

Limitaciones conocidas

• Gemma 4 a veces escribe razonamiento antes de la respuesta final. ask-vision.js intenta extraer "Final Answer:" o la primera etiqueta [OK]/[WARN]/[FAIL].
• No hay comparación con baseline aún. El runner solo describe el estado actual. Snapshot/pHash es trivial de añadir cuando se quiera detección de regresiones contra una pasada anterior.
• Playwright 1.58.2 está pineado para reaprovechar los browsers ya cacheados (chromium_headless_shell-1208). Subir a 1.60+ requiere npx playwright install.