PTENES
Electron · Playwright · WebM
WebRecorder Pro

Tu sitio endemostración.

Graba recorridos de navegación con acciones configuradas.

Graba demostraciones de sitios con un navegador que sigue un guion.

App de escritorioVideoPropio

  • Electron
  • Playwright
  • JavaScript
  • Tailwind CSS
Electron · Playwright · WebM
WebRecorder Pro

Tu sitio endemostración.

Graba recorridos de navegación con acciones configuradas.

  • Electron
  • Playwright
  • JavaScript
  • Tailwind CSS

Graba demostraciones de sitios con un navegador que sigue un guion.

App de escritorioVideoPropio

  • Electron
  • Playwright
  • JavaScript
  • Tailwind CSS

PortafolioWebRecorder Pro

La grabación con guion

Tú escribes el guion. El robot graba la demostración.

En lugar de grabar la pantalla a mano, el programa abre un navegador solo y sigue una lista de acciones, navegar, hacer clic, desplazar, resaltar, con el tiempo justo entre ellas. Arma el guion y aprieta play.

Página de ejemplo

tu correo
Recursos

pie

Tiempo del guion5 s + carga

El guion

  1. Abre y espera la red1000 ms
  2. Resaltarhighlight #recursosretraso 1000 ms · t=1.0s
  3. Bajarscroll-down 500retraso 1000 ms · t=2.0s
  4. Escribirtype #emailretraso 1000 ms · t=3.0s
  5. Hacer clicclick #comecarretraso 1000 ms · t=4.0s

Las reglas son las del programa (main.js): después de abrir, espera que la red se calme y 1000 ms más; cada acción espera su retraso (500 ms si está vacío); "Esperar" dura 1000 ms si está vacío; "Resaltar" contornea en violeta por 2 s; "Escribir" rellena de una vez. El video es WebM. Aquí la regla avanza a media velocidad y la página es de ejemplo.

Escena del proyecto: la pantalla Analizar Proyecto en un monitor, con íconos de vidrio de carpeta de código, mapa de rutas y búsqueda, unidos por luz

Descubre el camino.

Analiza rutas y secciones por el proyecto o por la URL.

Antes de grabar, el programa puede leer la carpeta del sitio y descubrir solo qué páginas existen. Enciende las dependencias, marca las carpetas que tienen página y mira cada una volverse dirección, y entrar en el guion.

Dependencias (package.json)

Archivos en la raíz

Tipo de proyectoNext.js · App Router

Las carpetas de app/

  • app/
  • app/(marketing)/sobre/
  • app/precos/
  • app/blog/
  • app/blog/[slug]/
  • app/_rascunho/
  • app/api/usuarios/
  • app/components/botao/
  • app/conta/configuracoes/

Las rutas que encuentra

  • app/
  • app/(marketing)/sobre
  • app/precos
  • app/blogSin page.tsx
  • app/blog/[slug]
  • app/_rascunhoEmpieza con _
  • app/api/usuariosCarpeta api
  • app/components/botaoCarpeta components
  • app/conta/configuracoes

El guion que nace

  1. waitEspera inicial2000 ms
  2. navigate/1500 ms
  3. navigate/precos1500 ms

Las reglas son las del programa (analyzer.js): el tipo sale en el orden Next App → Next Pages → Vite + React → React → HTML; en App Router, "(grupo)" desaparece de la dirección y "[slug]" se vuelve ":slug". Marcar una ruta crea "navegar" con 1500 ms, después de una espera inicial de 2000 ms. Las carpetas aquí son de ejemplo.

Escena del proyecto: la pantalla Nueva Grabación en un monitor y la de Grabaciones al lado, con una cinta de película, un cursor y un botón de play de vidrio

Configura. Navega. Graba.

Organiza acciones y sigue tus demostraciones.

En el modo automático ni hace falta guion: el robot entra al sitio, sigue los enlaces del menú, muestra las secciones de la página de inicio y desplaza cada página. Ajusta los límites y manda grabar.

El sitio de ejemplo

Menú
InícioSobreServiçosPortfólioContato
Cuerpo
PreçosBlogConheça a equipeCasosPerguntas
Pie
Política de privacidadeTerms of use
Secciones de la página de inicio
#hero#recursos#depoimentos#contato

El recorrido

  1. /Inicio, ya está ahí
  2. /sobre2000 ms · 3 desplazamientos
  3. /servicos2000 ms · 4 desplazamientos
  4. /portfolio2000 ms · 5 desplazamientos
  5. /contato2000 ms · 2 desplazamientos
  6. /precos2000 ms · 3 desplazamientos
  7. /blogPasó el límite
  8. /sobrePasó el límite
  9. /casosPasó el límite
  10. /faqPasó el límite
  11. /privacidadeDescartado (privacidad/términos)
  12. /termosDescartado (privacidad/términos)

Tiempo estimado35,6 s

Las pantallas reales

Las reglas son las del programa (main.js): enlaces del menú primero, privacidad y términos fuera, corte en el máximo, y el "/" ocupa un lugar; cada página espera el tiempo elegido y se desplaza en hasta 5 pasos de 800 ms; las secciones de inicio llevan 1500 ms cada una. El aviso cuenta la página de inicio, como hace el programa. Aquí el máximo empieza en 6 para que se vea el corte; en el programa el valor por defecto es 10. El sitio es de ejemplo.

Las tecnologías

De qué está hecho, pieza por pieza

Un programa de escritorio que trabaja con un navegador de verdad: Electron da la ventana, Playwright pilota Chromium y graba la página, y la pantalla está hecha en HTML y JavaScript puro, sin framework. Elige una pieza para ver qué hace aquí y en qué archivo está.

6tecnologías, en 2 capas

Programa

Pantalla

Siguiente proyecto29 / 51

Aplicaciones de escritorioMotor de Post pra FacebookPrograma de escritorio que publica posts y clasificados en grupos, marca los grupos correctos por palabra clave y borra posts antiguos, pidiendo confirmación en cada pasoTauri 2RustReact 19TypeScript← AnteriorMeu editor de PDF
Inicio