Electron · Playwright · WebM
Seu site emdemonstração.
Grave percursos de navegação com ações configuradas.
Grava demonstrações de sites com um navegador que segue um roteiro.
- Electron
- Playwright
- JavaScript
- Tailwind CSS
Electron · Playwright · WebMSeu site emdemonstração.
Grave percursos de navegação com ações configuradas.
- Electron
- Playwright
- JavaScript
- Tailwind CSS
Grava demonstrações de sites com um navegador que segue um roteiro.
- Electron
- Playwright
- JavaScript
- Tailwind CSS
A gravação com roteiro
Você escreve o roteiro. O robô grava a demonstração.
Em vez de gravar a tela na mão, o programa abre um navegador sozinho e segue uma lista de ações, navegar, clicar, rolar, destacar, com o tempo certo entre elas. Monte o roteiro e aperte o play.
Página de exemplo
seu e-mailrodapé
Tempo do roteiro5 s + carregamento
O roteiro
- Abre e espera a rede1000 ms
- Destacar
highlight #recursosatraso 1000 ms · t=1.0s - Rolar para baixo
scroll-down 500atraso 1000 ms · t=2.0s - Digitar
type #emailatraso 1000 ms · t=3.0s - Clicar
click #comecaratraso 1000 ms · t=4.0s
As regras são as do programa (main.js): depois de abrir, ele espera a rede acalmar e mais 1000 ms; cada ação espera o seu atraso (500 ms se vazio); "Esperar" dura 1000 ms se vazio; "Destacar" contorna em violeta por 2 s; "Digitar" preenche de uma vez. O vídeo é WebM. Aqui a régua anda em meia velocidade e a página é de exemplo.
Descubra o caminho.
Analise rotas e seções pelo projeto ou pela URL.
Antes de gravar, o programa pode ler a pasta do site e descobrir sozinho que páginas existem. Ligue as dependências, marque as pastas que têm página e veja cada uma virar endereço, e entrar no roteiro.
Dependências (package.json)
Arquivos na raiz
Tipo de projetoNext.js · App Router
As pastas de app/
app/app/(marketing)/sobre/app/precos/app/blog/app/blog/[slug]/app/_rascunho/app/api/usuarios/app/components/botao/app/conta/configuracoes/
As rotas que ele acha
app/app/(marketing)/sobreapp/precosapp/blogSem page.tsxapp/blog/[slug]app/_rascunhoComeça com _app/api/usuariosPasta apiapp/components/botaoPasta componentsapp/conta/configuracoes
O roteiro que nasce
- waitEspera inicial2000 ms
- navigate/1500 ms
- navigate/precos1500 ms
As regras são as do programa (analyzer.js): o tipo sai na ordem Next App → Next Pages → Vite + React → React → HTML; no App Router, "(grupo)" some do endereço e "[slug]" vira ":slug". Marcar uma rota cria "navegar" com 1500 ms, depois de uma espera inicial de 2000 ms. As pastas aqui são de exemplo.
Configure. Navegue. Grave.
Organize ações e acompanhe suas demonstrações.
No modo automático, nem roteiro é preciso: o robô entra no site, segue os links do menu, mostra as seções da página inicial e rola cada página. Ajuste os limites e mande gravar.
O site de exemplo
O percurso
- /Início, já está nela
- /sobre2000 ms · 3 rolagens
- /servicos2000 ms · 4 rolagens
- /portfolio2000 ms · 5 rolagens
- /contato2000 ms · 2 rolagens
- /precos2000 ms · 3 rolagens
- /blogPassou do limite
- /sobrePassou do limite
- /casosPassou do limite
- /faqPassou do limite
- /privacidadeDescartado (política/termos)
- /termosDescartado (política/termos)
Tempo estimado35,6 s
As telas de verdade
As regras são as do programa (main.js): links do menu primeiro, política e termos fora, corte no máximo, e o "/" ocupa uma vaga; cada página espera o tempo escolhido e rola em até 5 passos de 800 ms; as seções da home levam 1500 ms cada. O aviso conta a página inicial, como o programa faz. Aqui o máximo começa em 6 para o corte aparecer; no programa o padrão é 10. O site é de exemplo.
As tecnologias
Do que é feito, peça por peça
Um programa de computador que trabalha com um navegador de verdade: o Electron dá a janela, o Playwright pilota o Chromium e grava a página, e a tela é feita em HTML e JavaScript puro, sem framework. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
6tecnologias, em 2 camadas
Programa
Tela
Aplicativos desktopMotor de Post pra Facebook