O que subtext faz?
Velocidade não é o gargalo, a verificação é. O Subtext aciona um navegador real, valida a alteração no seu aplicativo ao vivo e anexa evidências a cada PR — para que os revisores vejam o que foi enviado, não apenas uma compilação bem-sucedida.
Por que usar o Subtext?
- Verificação visual real: O Subtext não se baseia em testes simulados ou em resultados abstratos de CI. Ele aciona um navegador real, carrega sua aplicação e captura screenshots exatos das mudanças.
- Evidências anexadas automaticamente: Cada PR recebe imagens (ou vídeos) da alteração em ação, diretamente nos comentários do PR, eliminando a necessidade de descrever o que mudou.
- Integração direta: Funciona com Claude Code, Cursor, Codex e outros agentes de IA, anexando evidências visuais automaticamente.
- Agnóstico de plataforma: Funciona com qualquer repositório Git que utilize pull requests (GitHub, GitLab, Bitbucket, etc.).
Como funciona?
- O Subtext analisa o diff do PR para identificar quais arquivos foram alterados que afetam a interface do usuário.
- Ele então inicia um navegador headless real e navega até as URLs relevantes do seu aplicativo (produção, staging ou ambiente de desenvolvimento).
- A ferramenta captura screenshots e/ou vídeos da aplicação com e sem a alteração aplicada.
- Finalmente, ele anexa as evidências visuais como comentários no PR, permitindo que os revisores vejam exatamente o que mudou.
Pré-requisitos
- Node.js 18+ ou Python 3.8+
- Acesso ao repositório que está sendo revisado
- Ambiente onde o navegador possa ser executado (CI, local ou servidor dedicado)
Instalação
npm install -g @fullstorydev/subtext
ou
pip install subtext
Uso Básico
subtext run --repo ./meu-repositorio --pr 42
Opções da Linha de Comando
| Opção | Descrição |
|---|---|
--repo | Caminho para o repositório Git local |
--pr | Número do pull request para verificar |
--url | URL base da aplicação para navegação |
--output | Diretório para salvar as evidências capturadas |
--browser | Tipo de navegador a usar (chromium, firefox, webkit) |
Integração com CI/CD
Adicione o Subtext ao seu pipeline de CI para verificar automaticamente cada PR:
# Exemplo com GitHub Actions
name: Verificação Visual
on: [pull_request]
jobs:
visual-verify:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm install -g @fullstorydev/subtext
- run: subtext run --repo . --pr ${{ github.event.pull_request.number }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Exemplo de Saída
Após a execução, o Subtext anexará um comentário ao PR semelhante a:
Verificação Visual Concluída
Foram verificadas 3 alterações:
- Página inicial: ✅ (nenhuma mudança visual detectada)
- Página de checkout: ⚠️ (mudança detectada - veja o screenshot)
- Painel do usuário: ✅ (nenhuma mudança visual detectada)
FAQ
P: O Subtext suporta autenticação? R: Sim, você pode passar cookies ou tokens de autenticação via arquivos de configuração ou variáveis de ambiente.
P: Posso executar o Subtext apenas em partes específicas do meu aplicativo?
R: Sim, use a opção --url para restringir a navegação apenas a determinadas rotas ou páginas.
P: O Subtext é compatível com aplicativos de página única (SPAs)? R: Sim, o Subtext suporta SPAs e pode navegar entre rotas usando o roteador do navegador.
Links Úteis
Licença
Subtext é distribuído sob a licença MIT.