Web Application Testing com Chrome DevTools MCP

Para testar aplicações web locais, use as ferramentas MCP do Chrome DevTools diretamente.

Vantagens do Chrome DevTools MCP:

• ✅ Integração nativa com Chrome DevTools
• ✅ Performance insights automáticos (Core Web Vitals)
• ✅ Network debugging completo
• ✅ Console logging em tempo real
• ✅ Screenshots e snapshots do DOM
• ✅ Não requer scripts Python externos

Ferramentas MCP Disponíveis

📝 Input Automation (8 tools)

• mcp__chrome-devtools__click

  - Clicar em elementos

• mcp__chrome-devtools__drag

  - Arrastar elementos

• mcp__chrome-devtools__fill

  - Preencher inputs

• mcp__chrome-devtools__fill_form

  - Preencher formulários completos

• mcp__chrome-devtools__handle_dialog

  - Lidar com dialogs/alerts

• mcp__chrome-devtools__hover

  - Hover sobre elementos

• mcp__chrome-devtools__press_key

  - Pressionar teclas

• mcp__chrome-devtools__upload_file

  - Upload de arquivos

🧭 Navigation (6 tools)

• mcp__chrome-devtools__navigate_page

  - Navegar para URLs

• mcp__chrome-devtools__new_page

  - Criar nova aba

• mcp__chrome-devtools__list_pages

  - Listar abas abertas

• mcp__chrome-devtools__select_page

  - Selecionar aba

• mcp__chrome-devtools__close_page

  - Fechar aba

• mcp__chrome-devtools__wait_for

  - Aguardar texto aparecer

🔍 Debugging (5 tools)

• mcp__chrome-devtools__take_snapshot

  - Snapshot do DOM (a11y tree)

• mcp__chrome-devtools__take_screenshot

  - Screenshot da página

• mcp__chrome-devtools__evaluate_script

  - Executar JavaScript

• mcp__chrome-devtools__list_console_messages

  - Listar logs do console

• mcp__chrome-devtools__get_console_message

  - Obter log específico

📊 Performance (3 tools)

• mcp__chrome-devtools__performance_start_trace

  - Iniciar trace

• mcp__chrome-devtools__performance_stop_trace

  - Parar trace e obter insights

• mcp__chrome-devtools__performance_analyze_insight

  - Analisar insight específico

🌐 Network (2 tools)

• mcp__chrome-devtools__list_network_requests

  - Listar requisições

• mcp__chrome-devtools__get_network_request

  - Obter detalhes de requisição

📱 Emulation (2 tools)

• mcp__chrome-devtools__emulate

  - Emular device, rede, geolocalização

• mcp__chrome-devtools__resize_page

  - Redimensionar viewport

Árvore de Decisão: Escolhendo sua Abordagem

Tarefa do usuário → HTML estático?
    ├─ Sim → Ler arquivo HTML diretamente para identificar seletores
    │         ├─ Sucesso → Usar ferramentas MCP com seletores
    │         └─ Falha/Incompleto → Tratar como dinâmico (abaixo)
    │
    └─ Não (webapp dinâmico) → Servidor já está rodando?
        ├─ Não → Iniciar servidor primeiro (npm run dev, etc)
        │
        └─ Sim → Padrão Reconnaissance-Then-Action:
            1. new_page ou navigate_page para URL
            2. take_snapshot para ver estrutura do DOM
            3. Identificar seletores (uid) do snapshot
            4. Executar ações com seletores descobertos

Padrão: Reconnaissance-Then-Action 🎯

1. Navegar e Inspecionar

Ferramentas:
- mcp__chrome-devtools__new_page(url="http://localhost:3000")
  OU
- mcp__chrome-devtools__navigate_page(url="http://localhost:3000")

- mcp__chrome-devtools__take_snapshot()
  → Retorna estrutura do DOM com UIDs únicos para cada elemento

2. Identificar Seletores

Do snapshot, você recebe elementos como:

[42] button "Login" (enabled)
[43] input email (empty)
[44] input password (empty)

Os números entre colchetes são os UIDs dos elementos.

3. Executar Ações

Use os UIDs para interagir:
- mcp__chrome-devtools__fill(uid="43", value="user@example.com")
- mcp__chrome-devtools__fill(uid="44", value="senha123")
- mcp__chrome-devtools__click(uid="42")

Exemplos Práticos

Ver pasta

examples/

para exemplos detalhados:

• element_discovery.md

  - Descobrir elementos na página

• console_logging.md

  - Capturar logs do console

• static_html_automation.md

  - Automatizar HTML estático

Armadilhas Comuns ⚠️

❌ Não use UIDs de snapshots antigos

1. take_snapshot()  → UIDs: 10, 11, 12
2. navigate_page(url="outra-url")
3. click(uid="10")  ❌ UID inválido! Nova página = novos UIDs

✅ Sempre tire novo snapshot após navegação

1. navigate_page(url="nova-url")
2. take_snapshot()  → Novos UIDs: 20, 21, 22
3. click(uid="20")  ✓ Correto!

❌ Não assuma que elementos existem

1. navigate_page(url="http://localhost:3000")
2. click(uid="10")  ❌ Não sabemos se uid 10 existe!

✅ Sempre faça reconnaissance primeiro

1. navigate_page(url="http://localhost:3000")
2. take_snapshot()  → Verificar o que existe
3. click(uid="10")  ✓ Agora sabemos que existe!

❌ Não ignore wait_for em SPAs

1. click(uid="10")  # Trigger navigation
2. take_snapshot()  ❌ Pode capturar antes de carregar!

✅ Aguarde conteúdo esperado

1. click(uid="10")
2. wait_for(text="Dashboard")  ✓ Aguarda carregar
3. take_snapshot()

Melhores Práticas 📋

1. Use snapshot como primeiro passo - Sempre faça

   take_snapshot()

   antes de interagir
2. Prefira snapshot a screenshot para descoberta - Snapshot dá UIDs, screenshot é só visual
3. Use verbose=true quando precisar de mais contexto
4. Aproveite fill_form para múltiplos campos - Uma chamada para vários inputs
5. Network e Console são passivos - Capturam automaticamente, consulte depois
6. Performance trace é sua ferramenta de diagnóstico - Use para problemas de performance
7. Use wait_for() para sincronização - Melhor que timeouts arbitrários

Script Utilitário

Helper script disponível:

scripts/with_server.py

Gerencia lifecycle de servidores (útil tanto para Playwright legado quanto para Chrome DevTools MCP):

# Single server
python scripts/with_server.py --server "npm run dev" --port 5173

# Multiple servers (backend + frontend)
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173

Após servidores iniciados, use as ferramentas MCP chrome-devtools para testar.

Migração do Playwright

Se você está migrando de Playwright, consulte

MIGRATION-GUIDE.md

para um guia completo de conversão.

Exemplos legados em Python/Playwright estão disponíveis em

examples/LEGACY-PLAYWRIGHT/

para referência.

Recursos Adicionais

• Chrome DevTools MCP Server:

  chrome-devtools-mcp/

• Tool Reference:

  chrome-devtools-mcp/docs/tool-reference.md

• Troubleshooting:

  chrome-devtools-mcp/docs/troubleshooting.md

• Design Principles:

  chrome-devtools-mcp/docs/design-principles.md

Quando Usar

✅ Use DevTools MCP Testing para:

• Testar SPAs React/Vue/Angular
• Debugging de problemas de UI
• Análise de performance detalhada (Core Web Vitals)
• Inspeção de network requests
• Captura de console logs
• Testes E2E simples
• Verificação de responsividade
• Emulação de devices e network

⚠️ Considere alternativas para:

• Testes unitários (use Jest, Vitest)
• Testes de API pura (use Postman, curl)
• Load testing (use k6, Artillery)
• Cross-browser testing (DevTools MCP é Chrome apenas)