Opensource · 2026

jshutter

CLI declarativo para automatizar capturas web con Playwright desde un único archivo JSON.

Stack

Node.js · TypeScript · Playwright · Commander.js · JSON Schema

Contexto

En el desarrollo de software y la preparación de portafolios, capturar pantallas de aplicaciones web suele exigir escribir scripts específicos hechos a medida para cada proyecto. Sin una herramienta estandarizada, estos procesos son difíciles de repetir, requieren configurar navegadores y tamaños de pantalla a mano cada vez, y complican la ejecución de tareas avanzadas como iniciar sesión antes de sacar la captura.

Motivación

Creé jshutter para resolver un problema recurrente que enfrentaba al preparar capturas para testing visual o documentación. Trabajar en varios proyectos a la vez y mantener scripts de automatización sueltos por todos lados generaba repetición de código, desorganización y errores constantes.

El objetivo fue crear una herramienta de código abierto que reemplazara esos scripts manuales por una configuración declarativa en un solo archivo, con autocompletado en el editor de código mediante JSON Schema y la capacidad de ejecutar flujos completos (hacer scroll, clics, guardar sesiones o generar reportes HTML) corriendo un único comando.

Qué hice

Para lograr una herramienta liviana, rápida y extensible, diseñé e implementé la CLI con una arquitectura modular sobre motores de automatización web:

Motor de Captura Aislado (Playwright): Cada tarea genera un contexto de navegador independiente (BrowserContext), garantizando que las cookies o inicios de sesión no interfieran entre sí, con soporte para guardar y reutilizar estados de sesión (storageState).
Configuración Declarativa con Validación (JSON Schema & Commander): La CLI usa Commander como base, junto con un esquema JSON Schema oficial ($schema) que permite al editor de código ofrecer autocompletado y validación de sintaxis al instante sin instalar extensiones extra.
Sistema de Macros y Pasos de Preparación (setupTasks): Un pipeline secuencial de acciones (clics, llenado de formularios, scroll suave, espera de red e inyección de código) que permite ejecutar secuencias complejas antes de guardar la imagen.
Reportes Interactivos e Integración con IA: Un generador de reportes HTML interactivos con capturas y metadatos de ejecución, más un comando (install-skill) que le enseña a asistentes e IA la gramática de jshutter.