@ribeiroevandro/e2e-gen

CLI para gerar testes E2E com Playwright a partir de uma URL.

Como funciona

O comando executa o pipeline:

1. crawl da página com Chromium bundled (sem dependências externas)
2. análise dos elementos (links, formulários, botões, imagens, headings)
3. geração do .spec.ts
4. execução opcional dos testes gerados (--run / --headed — requer Playwright instalado)

Para detalhes de arquitetura e desenvolvimento do monorepo, veja o README.md da raiz.

Uso rápido

# Sem instalar nada — gera testes localmente
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app

Também funciona após instalação global:

npm i -g @ribeiroevandro/e2e-gen
e2e-gen https://e2e-gen.vercel.app

Para executar os testes (--run / --headed), você precisa instalar Playwright:

npm install --save-dev playwright
# ou
npx playwright install

Exemplos

# Gerar testes (sem dependências externas)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app

⏳ Analisando página...
🔍 Detectados: 1 formulário, 5 links, 1 botão
⚡ Gerando testes...
✅ 13 testes gerados em 2.34s → ./generated-tests/e2e-gen-vercel-app

generated-tests/e2e-gen-vercel-app/
└── home.spec.ts

🚀 Execute os testes com:
   cd ./generated-tests/e2e-gen-vercel-app && npx --yes @playwright/test test

Mais exemplos:

# Gerar e executar (requer Playwright instalado)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --run

# Executar com browser visível (requer Playwright instalado)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --headed

# Crawl com browser visível (sem executar os testes gerados)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --no-headless

# Report HTML (requer Playwright instalado)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --run --html-report

# Abrir report ao final (requer Playwright instalado)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --run --html-report --open-report

# Personalizar artefatos (requer Playwright instalado)
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --run --trace on-first-retry --video retain-on-failure --screenshot only-on-failure

# Definir diretório de saída
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --output ./meus-testes

# Definir baseURL no playwright.config.mjs gerado
npx @ribeiroevandro/e2e-gen https://e2e-gen.vercel.app --base-url https://e2e-gen.vercel.app

🗺️ Descoberta Automática de Sitemap

Se o domínio possui um arquivo sitemap.xml, a CLI detecta automaticamente e oferece um menu interativo para selecionar quais rotas deseja gerar testes:

# Executa a descoberta automática
npx @ribeiroevandro/e2e-gen https://example.com

⏳ Buscando sitemap...
🔍 5 rota(s) encontrada(s) no sitemap

? Selecione as rotas (↑↓ navega, espaço marca, Enter confirma) › - Space para marcar/desmarcar, a para marcar todas, n para desmarcar todas 
◯ 1.    https://example.com/
◯ 2.    https://example.com/about
◯ 3.    https://example.com/blog
◯ 4.    https://example.com/contact
◯ 5.    https://example.com/services

Usando o Menu

Após o sitemap ser descoberto, você verá um menu interativo onde:

• ↑↓ (Arrow Keys): Navegue entre as rotas
• Space: Marque/desmarque uma rota (◯ = desmarcado, ◉ = marcado)
• a: Marque todas as rotas
• n: Desmarque todas as rotas
• Enter: Confirme a seleção

O menu mostra até 15 rotas por página e você pode rolar para ver mais.

Exemplo de seleção:

✔ Selecione as rotas (↑↓ navega, espaço marca, Enter confirma)
  ◉ 1.    https://example.com/
  ◉ 2.    https://example.com/about
  ◯ 3.    https://example.com/blog
  ◉ 4.    https://example.com/contact
  ◯ 5.    https://example.com/services

✅ Geração concluída
📊 3/3 rota(s) | 9 teste(s) total | 4.2s

📁 Testes salvos em: ./generated-tests/example-com
Rotas geradas:
  ✓ / (3 testes)
  ✓ /about (3 testes)
  ✓ /contact (3 testes)

Se nenhum sitemap for encontrado, a CLI cai para o comportamento padrão (gera apenas a URL fornecida).

Opções

| Opção | Descrição | Padrão | | --- | --- | --- | | <url> | URL da página (obrigatório) | — | | -o, --output <dir> | Diretório de saída dos testes | ./generated-tests | | --run | Executa os testes após gerar* | false | | --headed | Executa testes com browser visível (implica --run)* | false | | --slow <ms> | Delay entre ações no modo headed* | 800 | | --no-headless | Executa browser visível durante o crawling | headless | | --reporter <type> | Reporter principal do Playwright (list, line, dot)* | list | | --html-report | Habilita report HTML do Playwright* | false | | --open-report | Abre report HTML ao final (implica --html-report)* | false | | --trace <mode> | Trace mode (off, on, on-first-retry, retain-on-failure)* | on-first-retry | | --video <mode> | Video mode (off, on, retain-on-failure, on-first-retry)* | retain-on-failure | | --screenshot <mode> | Screenshot mode (off, on, only-on-failure)* | only-on-failure | | --base-url <url> | Define baseURL no config gerado | — |

*Requer Playwright instalado. Se não estiver, mensagem de erro clara será exibida.

Saída e Estrutura

Após gerar os testes com sucesso, o CLI exibe:

1. Linha de progresso: Mostra timing (⏳ → 🔍 → ⚡ → ✅) com detecção de elementos
2. Resumo de geração: Número de testes e duração
3. Caminho de saída: Diretório onde os testes foram salvos
4. Estrutura de pastas: Tree visual dos arquivos gerados (quando tree estiver disponível)

Exemplo completo:

⏳ Analisando página...
🔍 Detectados: 3 formulários, 12 links, 5 botões
⚡ Gerando testes...
✅ 25 testes gerados em 3.12s → ~/generated-tests/meusite-com-br

~/generated-tests/meusite-com-br/
├── home.spec.ts
├── contato.spec.ts
└── produtos.spec.ts

Estrutura gerada

Os arquivos são organizados por domínio e rota:

generated-tests/
└── e2e-gen-vercel-app
    └── home.spec.ts

O CLI também:

• usa Chromium bundled via @sparticuz/chromium para crawling (sem deps externas)
• cria playwright.config.mjs local por domínio, estendendo @ribeiroevandro/e2e-gen/playwright.base
• adiciona generated-tests/ ao .gitignore automaticamente
• para execução com --run / --headed, usa runner compartilhado em ~/.config/e2e-gen (se Playwright instalado)

Categorias de testes geradas

• Carregamento da página (status e título)
• Verificação de links internos/externos
• Formulários (preenchimento e envio)
• Botões (visibilidade e estado habilitado)
• Imagens (src/alt)
• Estrutura de headings
• Responsividade (mobile/tablet/desktop)
• Acessibilidade básica (lang, labels/aria e texto acessível)