Manual de uso

¿Cómo funciona?

Cada tutorial es una grabación automática: el sistema abre un navegador (Chromium) en el servidor, navega tu aplicación ejecutando una lista de pasos que vos definís, y graba todo en video. El resultado es un MP4 listo para ver o descargar, con subtítulos opcionales.

Creá el tutorial en + Nuevo tutorial.
Definí la URL inicial y los pasos en formato JSON.
Al guardar, la grabación arranca sola. La página de detalle se actualiza cada 4 segundos.
Cuando termina, el video aparece en la misma página.

Acciones disponibles en los pasos

Acción	Qué hace	Ejemplo
`goto`	Navega a una URL	`{"action":"goto","url":"https://app.com/panel"}`
`click`	Clic en un elemento	`{"action":"click","selector":"#btn-guardar"}`
`fill`	Completa un campo (rápido)	`{"action":"fill","selector":"#email","value":"${user}"}`
`type`	Escribe tecla por tecla (se ve la escritura)	`{"action":"type","selector":"#q","text":"ventilador","delay_ms":80}`
`press`	Presiona una tecla	`{"action":"press","key":"Enter","selector":"#q"}`
`hover`	Pasa el mouse sobre un elemento	`{"action":"hover","selector":".menu"}`
`wait` / `pause`	Espera N milisegundos	`{"action":"pause","ms":2000}`
`wait_for`	Espera a que aparezca un elemento	`{"action":"wait_for","selector":".tabla"}`
`wait_url`	Espera a que la URL contenga un texto	`{"action":"wait_url","url_contains":"/dashboard"}`
`scroll`	Desplaza la página (`"bottom"` = hasta el final)	`{"action":"scroll","y":600}`
`eval`	Ejecuta JavaScript arbitrario	`{"action":"eval","script":"window.scrollTo(0,0)"}`
`process`	Inserta un proceso reutilizable	`{"action":"process","name":"Login al panel"}`
`caption`	Muestra un cartel de texto en pantalla y genera subtítulo	`{"action":"caption","text":"Acá cargás el cliente","ms":3000,"position":"bottom"}`
`highlight`	Resalta un elemento con recuadro y efecto spotlight	`{"action":"highlight","selector":"#total","ms":2500,"color":"#ffd400"}`

Credenciales

Las credenciales se escriben una sola vez en el campo Credenciales / variables y se referencian en los pasos con ${nombre}. Así no quedan hardcodeadas en la lista de pasos:

// Credenciales:
{"user": "demo@miapp.com", "password": "secreto123"}

// Pasos:
{"action": "fill", "selector": "#email", "value": "${user}"}
{"action": "fill", "selector": "#pass", "value": "${password}"}

Procesos reutilizables

Los pasos que se repiten en muchos tutoriales (típicamente el login) se guardan como procesos desde el admin. Después se invocan por nombre:

{"action": "process", "name": "Login al panel"}

Los procesos pueden llamar a otros procesos (hasta 5 niveles de anidamiento).

Texto en pantalla y subtítulos

caption muestra un cartel quemado en el video. Posiciones: top, bottom (default), center.
Cada caption también genera un subtítulo: el MP4 trae pista de subtítulos embebida y el reproductor web muestra el archivo .vtt con botón CC.
Para subtitular sin cartel visible: {"action":"caption","text":"...","ms":2000,"on_screen":false}.

Narración con voz (TTS)

Si el tutorial tiene una voz seleccionada, cada caption se narra automáticamente con una voz neuronal (edge-tts) y se mezcla como pista de audio del MP4, sincronizada con la aparición del cartel. Si el audio es más largo que el ms indicado, el caption se extiende solo. Elegí — Sin voz — para desactivarla.

Consejos para buenos videos

Usá pause generosamente: el espectador necesita tiempo para leer.
Preferí wait_for/wait_url sobre pause largas para esperar cargas: el video queda más ágil.
Usá type en vez de fill cuando quieras que se vea la escritura en el video.
Si un selector matchea varios elementos, highlight usa el primero; para click/fill hacé el selector más específico (ej. .item >> nth=0 o agregá un id).
Resolución: el campo viewport define el tamaño del video (default 1280×720).

Estados de un tutorial

Pendiente encolado · Grabando en curso · Completado listo para ver · Fallido ver el mensaje de error en el detalle.