rafa/feadulta
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

Suite E2E para WP local: pipeline 3-tier (Playwright → Gemma vision → Claude) en tools/e2e/ #55

New Issue
Closed
opened 2026-06-28 19:13:48 +00:00 by rafa · 0 comments
rafa commented 2026-06-28 19:13:48 +00:00
Owner
Copy Link
Copy Source

Objetivo

Tener una suite E2E que detecte regresiones visuales/funcionales en feadulta (y luego ytsummaries, triptyk, joomla-php83…) gastando lo mínimo posible en tokens de Claude.

Caso de uso reciente que motiva el issue: tras los fixes de #34 y #36 queremos validar que ~600 posts cargan correctamente sin abrir el navegador uno a uno y sin pasarle 600 screenshots a Claude.

Estrategia 3-tier

Tier Quién Cuándo Tokens Claude
1. Programático Playwright local Siempre (en cada pasada) 0
2. LLM local vision Gemma 4 vision en LM Studio (http://172.19.128.1:1234/v1) Solo si Tier 1 marca regresión o el usuario lo pide explícitamente 0 (compute local)
3. Claude Lee report.md (texto, no imágenes) Solo cuando hay que decidir/arreglar Mínimo

Principio: los problemas reales (imagen rota, link 404, render fallido) son deterministas y los detecta Tier 1. El LLM solo aporta "¿se ve raro?" — y para eso pocas veces hace falta tirar de Claude.

Vision en local — confirmado

Probado contra http://172.19.128.1:1234/v1 con google/gemma-4-e4b (4B) pasando como input el Portadas/tolle.jpg. El modelo reconoce correctamente la imagen (describe a Eckhart Tolle por su apariencia). Tiempo: ~4s. Total tokens: ~485. Útil para Tier 2 sin coste de tokens Claude.

Nota: el endpoint multimodal de LM Studio acepta el formato OpenAI estándar messages[].content[].image_url.url = "data:image/jpeg;base64,...".

Tier 1 — diseño

Script Node + Playwright (tools/e2e/run.js) que para cada URL de una lista:

  • Carga la página con timeout configurable
  • Captura console.error y console.warning
  • Captura todas las requests con status ≥ 400 (img, mp3, css, js…)
  • Evalúa en el DOM document.images y reporta las que tengan naturalWidth==0
  • Captura <title>, primer <h1>, count de palabras visibles
  • Toma screenshot full-page → out/<slug>.png
  • Calcula hash perceptual (pHash) del screenshot — comparable contra baseline futura

Genera:

  • out/report.json — datos crudos, ~10-50 KB
  • out/report.md — tabla legible para humano y Claude
  • out/<slug>.png — uno por URL

Tier 2 — diseño

Helper tools/e2e/ask-vision.js que recibe (screenshot_path, prompt) y devuelve texto plano via LM Studio (Gemma 4 vision). Se ejecuta:

  • Bajo demanda sobre páginas que Tier 1 marca con severity ≥ warn
  • Bajo demanda por el usuario para preguntas concretas (ej. "¿la cabecera de la home se ve igual que el baseline?")

Output texto se incrusta en report.md como bloque > vision: ....

Suite inicial de URLs (feadulta)

Slug URL Cubre
home-es /fea/ Portada principal
home-en /fea/en/ Polylang EN
home-fr /fea/fr/ Polylang FR
home-it /fea/it/ Polylang IT
home-pt /fea/pt/ Polylang PT
effa-hub /fea/escuela/ Hub EFFA
carta-semana /fea/carta-de-la-semana/ Redirect plugin
evangelios /fea/category/evangelios-y-comentarios/ Categoría
autores /fea/autores/ Listado autores
post-tolle-44247 /fea/el-apego-a-tus-puntos-de-vista-y-opiniones/ Fix #34 (Portada migrada)
post-delta-44117 post del delta 2026-03-26 Fix #36 (Portada recuperada)
post-delta-44131 post del delta 2026-04-09 Fix #36
post-delta-44241 post del delta 2026-05-14 Fix #36
post-musica-recuperada post con mp3 del #36 Fix #36 (Música recuperada)

URLs configurables en tools/e2e/sites/feadulta.json. Otros sitios (ytsummaries.json, joomla-php83.json…) reutilizan el mismo runner.

Plan de implementación

  1. tools/e2e/ skeleton (package.json mínimo, Playwright como dep)
  2. run.js — Tier 1
  3. ask-vision.js — Tier 2 helper
  4. sites/feadulta.json — suite inicial
  5. README en tools/e2e/ + página wiki E2E-Visual-Testing
  6. Primera pasada y comentar resultados en este issue

Criterio de aceptación

  • node tools/e2e/run.js feadulta ejecuta la suite y genera out/report.md + screenshots
  • Tier 2 invocable como node tools/e2e/ask-vision.js out/post-tolle-44247.png "¿la imagen de Tolle se ve?"
  • Repo feadulta documenta la herramienta en README y wiki
  • Reportada al menos 1 regresión real o confirmación visual de los fixes #34/#36
## Objetivo Tener una **suite E2E** que detecte regresiones visuales/funcionales en `feadulta` (y luego ytsummaries, triptyk, joomla-php83…) **gastando lo mínimo posible en tokens de Claude**. Caso de uso reciente que motiva el issue: tras los fixes de #34 y #36 queremos validar que ~600 posts cargan correctamente sin abrir el navegador uno a uno y sin pasarle 600 screenshots a Claude. ## Estrategia 3-tier | Tier | Quién | Cuándo | Tokens Claude | |---|---|---|---| | **1. Programático** | Playwright local | Siempre (en cada pasada) | **0** | | **2. LLM local vision** | Gemma 4 vision en LM Studio (`http://172.19.128.1:1234/v1`) | Solo si Tier 1 marca regresión o el usuario lo pide explícitamente | 0 (compute local) | | **3. Claude** | Lee `report.md` (texto, no imágenes) | Solo cuando hay que decidir/arreglar | Mínimo | **Principio:** los problemas reales (imagen rota, link 404, render fallido) son deterministas y los detecta Tier 1. El LLM solo aporta "¿se ve raro?" — y para eso pocas veces hace falta tirar de Claude. ## Vision en local — confirmado Probado contra `http://172.19.128.1:1234/v1` con `google/gemma-4-e4b` (4B) pasando como input el `Portadas/tolle.jpg`. El modelo reconoce correctamente la imagen (describe a Eckhart Tolle por su apariencia). Tiempo: ~4s. Total tokens: ~485. **Útil para Tier 2 sin coste de tokens Claude.** Nota: el endpoint multimodal de LM Studio acepta el formato OpenAI estándar `messages[].content[].image_url.url = "data:image/jpeg;base64,..."`. ## Tier 1 — diseño Script Node + Playwright (`tools/e2e/run.js`) que para cada URL de una lista: - Carga la página con timeout configurable - Captura `console.error` y `console.warning` - Captura todas las requests con status ≥ 400 (img, mp3, css, js…) - Evalúa en el DOM `document.images` y reporta las que tengan `naturalWidth==0` - Captura `<title>`, primer `<h1>`, count de palabras visibles - Toma screenshot full-page → `out/<slug>.png` - Calcula hash perceptual (pHash) del screenshot — comparable contra baseline futura Genera: - `out/report.json` — datos crudos, ~10-50 KB - `out/report.md` — tabla legible para humano y Claude - `out/<slug>.png` — uno por URL ## Tier 2 — diseño Helper `tools/e2e/ask-vision.js` que recibe `(screenshot_path, prompt)` y devuelve texto plano via LM Studio (Gemma 4 vision). Se ejecuta: - Bajo demanda sobre páginas que Tier 1 marca con `severity ≥ warn` - Bajo demanda por el usuario para preguntas concretas (ej. "¿la cabecera de la home se ve igual que el baseline?") Output texto se incrusta en `report.md` como bloque `> vision: ...`. ## Suite inicial de URLs (feadulta) | Slug | URL | Cubre | |---|---|---| | home-es | `/fea/` | Portada principal | | home-en | `/fea/en/` | Polylang EN | | home-fr | `/fea/fr/` | Polylang FR | | home-it | `/fea/it/` | Polylang IT | | home-pt | `/fea/pt/` | Polylang PT | | effa-hub | `/fea/escuela/` | Hub EFFA | | carta-semana | `/fea/carta-de-la-semana/` | Redirect plugin | | evangelios | `/fea/category/evangelios-y-comentarios/` | Categoría | | autores | `/fea/autores/` | Listado autores | | post-tolle-44247 | `/fea/el-apego-a-tus-puntos-de-vista-y-opiniones/` | Fix #34 (Portada migrada) | | post-delta-44117 | post del delta 2026-03-26 | Fix #36 (Portada recuperada) | | post-delta-44131 | post del delta 2026-04-09 | Fix #36 | | post-delta-44241 | post del delta 2026-05-14 | Fix #36 | | post-musica-recuperada | post con mp3 del #36 | Fix #36 (Música recuperada) | URLs configurables en `tools/e2e/sites/feadulta.json`. Otros sitios (`ytsummaries.json`, `joomla-php83.json`…) reutilizan el mismo runner. ## Plan de implementación 1. `tools/e2e/` skeleton (package.json mínimo, Playwright como dep) 2. `run.js` — Tier 1 3. `ask-vision.js` — Tier 2 helper 4. `sites/feadulta.json` — suite inicial 5. README en `tools/e2e/` + página wiki `E2E-Visual-Testing` 6. Primera pasada y comentar resultados en este issue ## Criterio de aceptación - `node tools/e2e/run.js feadulta` ejecuta la suite y genera `out/report.md` + screenshots - Tier 2 invocable como `node tools/e2e/ask-vision.js out/post-tolle-44247.png "¿la imagen de Tolle se ve?"` - Repo `feadulta` documenta la herramienta en README y wiki - Reportada al menos 1 regresión real o confirmación visual de los fixes #34/#36
rafa closed this issue 2026-06-28 19:13:48 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
inma rafa
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rafa/feadulta#55
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?