Este módulo cubre los casos difíciles. Algunos ya funcionan en el capture.mjs; otros todavía requieren controlar agent-browser manualmente y están en la lista de pendientes. Cada tema indica claramente su estado.
📜 Desplazarse antes de la captura de pantalla roadmap
Las páginas largas requieren scrollIntoView en la sección antes de capturar. Hoy se hace manualmente.
O capture.mjs no desplaza la página. En las pantallas de inemaVOX, fue necesario dirigir agent-browser manualmente, haciendo scrollIntoView por sección antes de cada screenshot.
Por eso es la prioridad n.º 1 del backlog. Mientras tanto, desplazarse manualmente antes de medir/capturar funciona; solo lleva más trabajo.
⚛️ Inputs controlados por React/Vue parcial
Configurar .value muestra el texto, pero no activa el estado — los botones quedan deshabilitados.
- ✗
el.value = "768"vía eval puro - ✗ React no se da cuenta → el botón sigue disabled
- ✗ El screenshot sale con el control inactivo
- ✓
setValuedisparainput+change - ✓ Ideal (hoja de ruta):
fillnativo de Playwright - ✓ Verificar que el botón se habilitó en la captura
Lo ideal es el capture.mjs llamar agent-browser fill @ref (fill nativo de Playwright) en lugar de establecer .value — simula la escritura real y activa el estado de forma confiable.
⏱️ Esperar una CONDICIÓN, no un tiempo fijo roadmap
Hoy el capture usa wait (ms). Lo ideal es un waitFor de texto/selector.
| Enfoque | wait (ms) — hoy | waitFor — roadmap |
|---|---|---|
| Criterio | tiempo fijo | condición real |
| Generación lenta | calcula el margen a ojo | espera el <img> |
| Riesgo | demasiado pronto / lento | aparece en el momento justo |
flux2-klein tardó ~2,5 min en la prueba de concepto. Antes de la captura de pantalla del resultado, haz poll por un <img> realmente cargado en el panel — no confíes solo en el reloj. Cambiar wait por waitFor es el elemento nº 3 del backlog.
🔄 Flujos asíncronos multiestado hecho a mano
Analizar → aprobar → doblar → listo: capturados como subpasos con nombre, con poll de finalización.
Inicia el procesamiento; el estado cambia. Captura el estado "analizando".
El flujo se detiene hasta la aprobación. Captura el estado de espera y la acción de aprobar.
Proceso largo; consulta la finalización entre las capturas.
Resultado final, con zoom. Termina el walkthrough antes de la CTA.
En el POC, el sondeo de finalización (poll-job*.sh) se hizo fuera de capture.mjs. Incrustarlo como subpasos con nombre y poll es el backlog n.º 4.
⏸️ Estados como waiting_approval
Los estados activados por eventos (no por tiempo) necesitan un poll de estado, no un wait fijo.
Uno waiting_approval cambia cuando alguien aprueba, no cuando llega la hora. Esperar X ms puede capturar antes de tiempo (o demasiado tarde).
O waiting_approval es el caso de uso que justifica el waitFor del tema 3: esperar una condición (cambió el estado) en lugar de un tiempo.
⚠️ Errores de captura
Los errores que más tiempo cuestan: aplícalo antes de renderizar. Detalle en gotchas.md.
- ✗ Viewport inconsistente → el cursor no acierta el objetivo
- ✗ Las refs @eN cambian tras un cambio del DOM
- ✗
eval --jsonanidado: data URL endata.result - ✗ Captura de pantalla que excede los límites del canvas
- ✓ Mismo viewport para bbox y shot; volver a capturarlo todo
- ✓ Selectores CSS / {tag,text} + volver a capturar
- ✓ Leer
data.result; decodificar base64 si se guarda - ✓ Viewport 1280×800 → captura x320..1600, y148..948
Si la app genera un archivo (p. ej., una imagen), obtén el src (data: URL) mediante eval — que viene en data.result — y decodifica base64 a PNG, o haz clic en el botón de descarga.
🗺️ Lo que ya funciona frente a lo que está en la hoja de ruta
El límite real de la skill: lo que capture.mjs hace hoy y lo que todavía requiere intervención manual.
- ✓ actions.json: fill, click, clickText, setValue, wait
- ✓ Bboxes mediante getBoundingClientRect → steps.json
- ✓ 1 toma por estado + marco + cursor + zoom + CTA
- ✓ Páginas largas y multiestado, control manual
- 1. Scroll/scrollIntoView en capture.mjs
- 2. fill nativo de Playwright para inputs de React
- 3. waitFor (condición) en lugar de wait fijo
- 4. Poll multiestado integrado · 5. 9:16 · 6. v3 grabación
El estado dinámico se convierte en una captura estática (el movimiento real sería v3, grabar la pantalla). Una app con inicio de sesión necesita credenciales de prueba. El formato natural es 16:9; 9:16 requeriría reencuadrar.
🎯 Resumen del módulo
- ✓ Páginas largas: scrollIntoView manual por ahora (scroll = backlog nº 1)
- ✓ Inputs de React: usa setValue (activa input/change); fill nativo es la opción nº 2
- ✓ Esperar una condición (waitFor) > tiempo fijo; hacer poll de un <img> real (n.º 3)
- ✓ Multiestado (analizar→aprobar→doblar→completado) con sondeo (n.º 4)
- ✓ Aplica los gotchas antes de renderizar; marca siempre lo que sea roadmap