# 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, - Tipo: Artigo - Autor: Dionatha Rodrigues - Publicado em: 2026-11-03 · Atualizado em: 2026-11-03 - URL: https://clubmartech.com.br/blog/qa-visual-funcional-com-antigravity/ 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: ```json { "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](https://antigravity.google/docs/ide/browser/) #### Prompt para execução: ```markdown 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](https://github.com/anthropics/skills/tree/main/skills/webapp-testing) - **Instalação:** ```bash npx skills add anthropics/skills --skill webapp-testing pip install playwright pytest pytest-playwright playwright install chromium ``` #### Prompt para execução: ```markdown 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: ```python 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](https://github.com/ChromeDevTools/chrome-devtools-mcp) - **Instalação do comando:** ```bash npx -y chrome-devtools-mcp@latest ``` #### Prompt para execução: ```markdown 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](https://antigravity.google/docs/hooks) #### Arquivo de configuração: `.agents/hooks.json` ```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](https://antigravity.google/docs/artifacts/) #### Prompt para execução: ```markdown 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: | Etapa | Erro frequente | Causa raiz | Como resolver | | --- | --- | --- | --- | | **Browser Subagent** | Elemento clicável não responde ou print sai em branco | A página renderiza conteúdo sob Single Page Application (SPA) assíncrona antes do carregamento completo | Instrua o agente a aguardar por um seletor específico (`wait_for_selector`) ou esperar o estado `networkidle` antes de capturar imagens. | | **webapp-testing** | Falha intermitente nos testes de Playwright (flaky tests) | Animações CSS de entrada ainda em execução no momento do clique do teste | Inclua `expect(locator).to_be_visible()` com timeout explícito ou desative animações CSS durante a suíte de teste. | | **Chrome DevTools MCP** | Conexão recusada ao tentar inspecionar o browser | Porta de depuração remota do Chrome ocupada ou conflito de processo de navegador já aberto | Execute o servidor MCP em processo isolado ou especifique uma porta livre dedicada (`--remote-debugging-port=9222`). | | **Lifecycle Hooks** | O agente entra em loop tentando corrigir falhas de linter infinitamente | O comando configurado no hook tem tolerância zero para avisos não críticos (warnings) | Configure o script para falhar apenas em erros fatais (`errors > 0`), direcionando avisos para o log de observação. | | **Artifacts** | Prints não renderizam dentro do painel do IDE | Caminho relativo da imagem apontando para fora da pasta temporária do projeto | Salve os ativos na pasta de artefatos designada pelo IDE e use caminhos absolutos ou embutimento em base64. | --- ## 5. Variações da cadeia: com e sem ferramentas pagas | Camada | Opção Gratuita / Open Source | Alternativa Comercial / Enterprise | | --- | --- | --- | | **Exploração e Screenshots** | Browser Subagent local do Antigravity (gratuito no IDE) | Browserbase, Browserless ou LambdaTest (nuvem com múltiplos dispositivos reais) | | **Regressão Funcional** | Playwright Python / TypeScript rodando em máquina local | Cypress Cloud, Datadog Synthetic Monitoring | | **Diagnóstico de Performance** | Chrome DevTools MCP + Lighthouse CLI local | SpeedCurve, Calibre ou DebugBear | | **Acessibilidade e Linters** | axe-core CLI via Lifecycle Hooks | Deque WorldSpace Comply | | **Documentação de Evidências** | Antigravity Artifacts (Markdown/HTML local) | Jira Quality Management ou Notion Database integrado | --- ## 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.