QA visual, funcional e técnico: como combinar Browser Subagent do Antigravity, webapp-testing e Chrome DevTools MCP

Testar uma landing page ou aplicação web antes de abrir o tráfego exige separar falhas visuais, quebras de fluxo funcional e gargalos de desempenho.
Neste guia prático, a gente monta uma cadeia completa de controle de qualidade usando o agente de navegador do Google Antigravity, testes automatizados em Playwright e inspeção profunda via Chrome DevTools.

1. O resultado final da cadeia

Quando um time de marketing ou engenharia sobe uma landing page com pressa para inaugurar uma campanha, o teste costuma se resumir a uma olhada rápida na tela do desenvolvedor e um preenchimento apressado no celular do gestor de tráfego. O resultado você já conhece: botões de conversão que somem sob o teclado virtual em telas menores, scripts de rastreamento que travam a renderização da página por quatro segundos e requisições assíncronas que falham silenciosamente sem que ninguém perceba no painel de mídia.

Ao encadear cinco camadas especializadas de auditoria dentro do agente, a gente transforma impressões subjetivas em evidências concretas e reproduzíveis.

A saída final desta cadeia entrega:
1. Dossiê visual multimídia: capturas de tela e walkthroughs interativos em múltiplos viewports (desktop 1440px, tablet 768px e mobile 390px) salvos como Artifacts revisáveis, apontando sobreposição de elementos fixos e contraste de texto.
2. Suíte de regressão funcional: scripts determinísticos em Playwright Python que simulam tentativas com dados inválidos, submissão correta, disparo de eventos analíticos e validação do DOM após a resposta da API.
3. Relatório de telemetria de rede e performance: métricas de Core Web Vitals (LCP, CLS, INP), inspeção de erros no console do navegador e mapeamento de dependências pesadas de terceiros via Chrome DevTools MCP.
4. Guarda automática de ciclo de vida (Hook): barreira local que impede a promoção do código ou a marcação da tarefa como concluída se o validador técnico acusar violações críticas de acessibilidade ou código quebrado.

+-----------------------------------------------------------------------------------------+
|                    ARQUITETURA DE QA INTEGRADO: VISUAL, FUNCIONAL E REDE                |
+-----------------------------------------------------------------------------------------+
|                                                                                         |
|  [ 1. Browser Subagent ]  --> Exploração livre do DOM, clique real e gravação visual     |
|            |                                                                            |
|            v                                                                            |
|  [ 2. webapp-testing ]    --> Criação de roteiro Playwright Python para regressão        |
|            |                                                                            |
|            v                                                                            |
|  [ 3. DevTools MCP ]      --> Análise de console, requisições de rede e Web Vitals       |
|            |                                                                            |
|            v                                                                            |
|  [ 4. Lifecycle Hooks ]   --> Bloqueio de entrega e validação de linter / contrato      |
|            |                                                                            |
|            v                                                                            |
|  [ 5. Artifacts IDE ]     --> Walkthrough interativo e relatório auditável para o time   |
|                                                                                         |
+-----------------------------------------------------------------------------------------+

2. Pré-requisitos e configuração inicial

Para reproduzir este fluxo de ponta a ponta na sua máquina, certifique-se de contar com os seguintes componentes:

1. Google Antigravity IDE instalado e atualizado (ambiente com suporte nativo ao Browser Subagent e Artifacts interativos).
2. Node.js 18+ e gerenciador npx para execução do servidor MCP de DevTools.
3. Python 3.10+ com uv ou pip para a execução da biblioteca Playwright.
4. Aplicação ou Landing Page rodando localmente (ex.: http://localhost:3000 ou servidor Docker) ou em ambiente de staging acessível.
5. Configuração de MCP no arquivo ~/.gemini/antigravity/mcp_config.json ou local .antigravity/mcp.json.

Adicione o servidor de Chrome DevTools na sua configuração de MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

3. Passo a passo: a cadeia de QA em 5 etapas

Etapa 1: Exploração visual com o Browser Subagent do Antigravity

• O que faz: Abre uma instância isolada do navegador Chromium controlada diretamente pelo agente para interagir com a interface, tirar prints com resolução controlada e navegar pelo DOM.
• Quando escolher: Para a primeira inspeção exploratória, quando você precisa ver a página como o visitante vê, identificar elementos fora de lugar e mapear o caminho crítico antes de escrever testes estritos.
• Documentação: Antigravity Browser Subagent

Prompt para execução:

Atue como especialista em QA de conversão. Invoque o Browser Subagent e acesse http://localhost:3000/landing-captura.
Configure o viewport para emular um iPhone 14 Pro (390x844px, dpr: 3).
Execute as seguintes ações:
1. Percorra toda a página do topo ao rodapé com scroll suave de 300px por segundo.
2. Identifique se o botão flutuante de CTA cobre títulos ou caixas de texto durante a rolagem.
3. Clique no campo de e-mail e observe se o layout sofre reflow visual inadequado.
Capture prints das anomalias e liste os seletores exatos onde o layout quebrou.

Saída esperada:

O agente abre o browser, executa as interações, salva as capturas em diretório temporário e retorna um mapa detalhado dos seletores:
– Alerta no seletor .sticky-cta-container: sobreposição do H2 da seção de garantia quando o scroll atinge 1.450px.
– Falha de toque em .form-input-email: altura útil de clique inferior a 44px recomendada pelas diretrizes móveis.

Etapa 2: Automação de regressão funcional com webapp-testing

• O que faz: Gera código determinístico em Playwright Python que roda em segundo plano para validar regras de negócio, validação de campos e chamadas assíncronas de API sem depender de inspeção manual na tela.
• Quando escolher: Sempre que a landing page possuir formulários, máscaras de telefone, validação de e-mail corporativo ou cálculo dinâmico de precificação.
• Repositório GitHub: anthropics/skills/tree/main/skills/webapp-testing
• Instalação:

npx skills add anthropics/skills --skill webapp-testing
pip install playwright pytest pytest-playwright
playwright install chromium

Prompt para execução:

Com base na página http://localhost:3000/landing-captura, utilize a skill webapp-testing para criar uma suíte de testes Playwright em Python cobrindo:
1. Validação de formato de e-mail inválido (ex.: "usuario@semdominio").
2. Tentativa de envio com campo de nome em branco.
3. Envio bem-sucedido com mock da API de conversão retornando 200 OK.
4. Verificação de redirecionamento para a página de obrigado (/obrigado?status=sucesso) ou surgimento do banner de confirmação.
Gere o script em tests/test_capture_form.py com assertions rigorosas e captura de logs de erro.

Saída esperada:

Um arquivo tests/test_capture_form.py estruturado, pronto para rodar via terminal:

import pytest
from playwright.sync_api import Page, expect

def test_form_validation_and_submission(page: Page):
    page.goto("http://localhost:3000/landing-captura")

    # Validação de e-mail inválido
    email_input = page.locator("input[name='email']")
    submit_btn = page.locator("button[type='submit']")

    email_input.fill("email_invalido_sem_arroba")
    submit_btn.click()

    error_msg = page.locator(".field-error-email")
    expect(error_msg).to_be_visible()
    expect(error_msg).to_contain_text("Digite um e-mail corporativo válido")

    # Submissão correta
    email_input.fill("dionatha@clubmartech.com.br")
    page.locator("input[name='nome']").fill("Dionatha Rodrigues")
    submit_btn.click()

    # Confirmação de conversão
    expect(page.locator(".conversion-success-modal")).to_be_visible(timeout=5000)

Etapa 3: Diagnóstico de rede, console e performance com Chrome DevTools MCP

• O que faz: Conecta o agente diretamente à engine de inspeção do Chrome DevTools para capturar traces de desempenho, avaliar Core Web Vitals, listar avisos de console e medir tempo de carregamento de scripts terceiros (pixels, tags e GTM).
• Quando escolher: Quando a página parece rápida na sua máquina potente, mas perde visitantes mobile por lentidão, bloqueio de thread ou bibliotecas infladas.
• Repositório GitHub: ChromeDevTools/chrome-devtools-mcp
• Instalação do comando:

npx -y chrome-devtools-mcp@latest

Prompt para execução:

Utilize o servidor MCP chrome-devtools para realizar uma auditoria completa na URL http://localhost:3000/landing-captura.
Execute as seguintes chamadas de ferramenta:
1. capture_performance_trace com emulação de CPU 4x Throttling e rede Fast 3G.
2. list_console_messages para capturar warnings, erros de CORS e scripts rejeitados por CSP.
3. get_network_requests filtrando arquivos JS com tamanho superior a 150KB.
Apresente uma tabela com o Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e os 3 scripts que mais roubam tempo da thread principal.

Saída esperada:

Um sumário analítico do DevTools revelando que:
– O LCP está em 3,8 segundos no 3G simulado, causado por uma imagem de cabeçalho em formato PNG descompactado de 2,4 MB.
– Uma tag de pixel não autorizada está gerando 14 erros de Content Security Policy (CSP) no console.
– A biblioteca de animação bloqueia a thread de renderização por 420ms durante o carregamento inicial.

Etapa 4: Automação e blindagem via Lifecycle Hooks do Antigravity

• O que faz: Aciona scripts programáticos automaticamente durante eventos do ciclo de vida do agente (por exemplo, após a edição de código ou antes de finalizar o plano de trabalho).
• Quando escolher: Para impedir que o agente marque uma tarefa como finalizada se houver testes Playwright falhando ou se o linter de acessibilidade acusar contraste ilegal.
• Documentação: Antigravity Hooks

Arquivo de configuração: .agents/hooks.json

{
  "hooks": {
    "post_file_edit": [
      {
        "description": "Roda testes de regressão após qualquer alteração em componentes da landing",
        "command": "pytest tests/test_capture_form.py -q",
        "fail_action": "block_and_report"
      }
    ],
    "pre_task_complete": [
      {
        "description": "Auditoria de acessibilidade e sintaxe antes da entrega",
        "command": "npx axe-core-cli http://localhost:3000/landing-captura --exit",
        "fail_action": "require_user_confirmation"
      }
    ]
  }
}

Como funciona na prática:

Se o agente alterar o botão para verde claro e o contraste em relação ao fundo branco cair abaixo da taxa mínima de 4.5:1 (WCAG AA), o comando axe-core-cli dispara código de saída diferente de zero. O agente recebe a falha no terminal interno e repara a cor imediatamente antes de avisar que terminou.

Etapa 5: Consolidação auditável em Artifacts do Antigravity

• O que faz: Compila prints, tabelas comparativas, métricas de rede e relatórios de conformidade em um Artifact markdown ou HTML interativo dentro do próprio IDE, permitindo que a liderança revise e aprove a publicação com um clique.
• Quando escolher: Para a entrega formal do processo de QA, substituindo mensagens espalhadas no chat por um documento estruturado com links para evidências.
• Documentação: Antigravity Artifacts

Prompt para execução:

Consolide todas as descobertas das etapas anteriores em um Artifact com o título "Relatório Executivo de QA - Landing Page de Captura".
Estruture o documento com:
1. Status geral de liberação: [Aprovado / Aprovado com Ressalvas / Reprovado].
2. Tabela de Core Web Vitals (Antes vs Recomendado).
3. Matriz de testes funcionais executados via Playwright e taxa de aprovação.
4. Lista com os 3 pontos de intervenção técnica imediata antes da injeção de mídia paga.
5. Botão de feedback para o desenvolvedor de front-end.

4. Onde costuma dar errado e como verificar cada passo

Mesmo ferramentas maduras apresentam comportamentos imprevistos quando operadas por agentes autônomos. A tabela abaixo resume as falhas mais comuns e as contra-medidas técnicas:

5. Variações da cadeia: com e sem ferramentas pagas

6. Resultado medido na execução real

Em um teste controlado realizado pelo Club Martech sobre uma landing page típica de conversão em WordPress e Next.js, rodamos a cadeia completa em 24 minutos. Os resultados numéricos foram esclarecedores:

• 1 falha visual crítica detectada: o rodapé em tela mobile cobria o botão de aceite dos cookies da LGPD, impedindo que o formulário ficasse habilitado em dispositivos iOS menores.
• 2 bugs funcionais prevenidos: o validador de telefone permitia o envio de números com apenas 6 dígitos, e o disparo do evento Lead para o Google Tag Manager acontecia antes da confirmação do servidor, gerando 18% de conversões fantasmas nos relatórios.
• Queda de 4,2s para 1,3s no LCP: o DevTools MCP apontou que a imagem de capa carregava sem dimensões explícitas e em formato WebP não otimizado, provocando um CLS (mudança de layout) de 0,38. Após a correção orientada pelo agente, o CLS caiu para 0,02.

Se fôssemos rodar de novo em um ambiente de produção contínua, uma mudança seria mandatória: em vez de rodar o teste completo de performance na mesma máquina que executa o agente, isolaríamos a medição de rede em um runner limpo, pois o consumo de CPU do próprio modelo local pode adicionar latência artificial de 200ms a 400ms nas medições de renderização.

FAQ: Dúvidas frequentes sobre QA automatizado com IA

O Browser Subagent substitui uma equipe de QA humano?

Não. Ele automatiza a exploração mecânica, poupa horas de preenchimento manual e localiza quebras óbvias de viewport. A avaliação sutil da mensagem, a sensação de confiança da marca e a adequação do tom ao público continuam dependendo do olhar humano.

Posso rodar o Chrome DevTools MCP em sites protegidos por login?

Sim. Você pode autenticar a sessão do navegador previamente ou instruir o agente a submeter as credenciais de teste através de variáveis de ambiente seguras durante a inicialização do fluxo.

Os testes Playwright em Python funcionam em esteiras de CI/CD como GitHub Actions?

Perfeitamente. Os scripts gerados pela skill webapp-testing são arquivos Python padronizados (pytest) e rodam em qualquer container Linux headless sem nenhuma dependência do IDE Antigravity.

Próximo passo na sua operação

Garantir que páginas e ferramentas funcionem sob estresse sem quebrar a experiência do visitante é uma das habilidades que separam os curiosos de quem constrói sistemas de martech sustentáveis.

No módulo de Fundamentos de IA da Formação Club Martech, a gente ensina passo a passo como desenhar, auditar e orquestrar agentes e conectores de infraestrutura na prática. Esse caminho foi feito para quem já executa no mercado e quer ter clareza analítica para escolher as próprias ferramentas, em vez de depender de soluções pré-prontas. Conheça o conteúdo e aprofunde o seu domínio técnico.