MCP Playwright Server

MCP Playwright Server

🎯 O que é o MCP Playwright?

Um servidor Model Context Protocol (MCP) que fornece capacidades de automação de navegador usando Playwright. Este servidor pode ser usado com Claude Desktop e outros clientes compatíveis com MCP para realizar testes web, raspagem de dados e tarefas de automação.

🌟 Por que escolher o MCP Playwright?

• 🤖 Design Focado em IA: Construído especificamente para agentes de IA e automação por linguagem natural
• 🎭 Suporte a Múltiplos Navegadores: Chromium, Firefox e WebKit prontos para uso
• 🐳 Pronto para Produção: Suporte a Docker para implantações consistentes e escaláveis
• ⚡ Extremamente Rápido: Otimizado para fluxos de trabalho de teste de nível empresarial
• 🔧 Amigável para Desenvolvedores: Ferramentas abrangentes e documentação extensa

Recursos

• Suporte a múltiplos navegadores: Chromium, Firefox e WebKit
• Automação abrangente: Navegar, clicar, digitar, capturar tela e muito mais
• Suporte a Docker: Execute em contêineres para ambientes consistentes
• Framework de testes: Configuração de testes Playwright integrada
• Integração MCP: Compatível com Claude Desktop e outros clientes MCP

Ferramentas Disponíveis

• launch_browser - Iniciar uma nova instância do navegador
• new_page - Criar uma nova página em um navegador existente
• navigate - Navegar para uma URL
• click - Clicar em um elemento
• type_text - Digitar texto em campos de entrada
• get_text - Extrair conteúdo de texto de elementos
• screenshot - Capturar telas de páginas
• wait_for_selector - Aguardar elementos aparecerem
• close_page - Fechar uma página
• close_browser - Fechar um navegador e todas as suas páginas

🚀 Início Rápido

Instalação em Uma Linha

npm install -g mcp-playwright && mcp-playwright start

Instalação

Desenvolvimento Local

1. Instale as dependências:

npm install

2. Instale os navegadores do Playwright:

npm run install:browsers

3. Inicie o servidor MCP:

npm start

Implantação com Docker

1. Construa a imagem Docker:

npm run docker:build

2. Execute o contêiner:

npm run docker:run

Configuração para Claude Desktop

Para usar este servidor MCP com Claude Desktop, adicione o seguinte ao seu arquivo de configuração do Claude Desktop:

Configuração macOS

Edite ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": ["/path/to/your/mcpplaywright/src/index.js"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

Configuração Docker

Se estiver executando em Docker, use:

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "--rm", "-i", "mcp-playwright"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

💡 Casos de Uso no Mundo Real

🧪 Testes com IA

// Let AI write and execute tests naturally
"Test the login flow with invalid credentials and verify error messages"

📊 Coleta de Dados

// Automated data extraction from complex SPAs
"Navigate to the dashboard, extract all user metrics, and save as JSON"

🔍 Garantia de Qualidade

// Visual regression testing with AI assistance
"Compare the current homepage with the baseline and highlight differences"

Exemplos de Uso

Teste Web Básico

// Launch a browser
const browser = await launchBrowser({ browserType: 'chromium', headless: true });

// Create a new page
const page = await newPage({ browserId: browser.id, url: 'https://example.com' });

// Take a screenshot
await screenshot({ pageId: page.id, path: 'example.png' });

// Click on an element
await click({ pageId: page.id, selector: 'button#submit' });

// Type text
await typeText({ pageId: page.id, selector: 'input[name="email"]', text: 'test@example.com' });

// Get text content
const text = await getText({ pageId: page.id, selector: 'h1' });

Executando Testes

Execute os testes Playwright incluídos:

# Run all tests
npm test

# Run tests in headed mode (visible browser)
npm run test:headed

# Debug tests
npm run test:debug

Desenvolvimento

Modo de Observação

Para desenvolvimento com reinicializações automáticas:

npm run dev

Adicionando Novas Ferramentas

Para adicionar novas ferramentas MCP, edite src/index.js e:

1. Adicione a definição da ferramenta ao array tools no manipulador ListToolsRequestSchema
2. Adicione um caso no manipulador CallToolRequestSchema
3. Implemente o método da ferramenta na classe PlaywrightMCPServer

Variáveis de Ambiente

• PLAYWRIGHT_HEADLESS: Defina como false para executar navegadores em modo com interface gráfica
• PLAYWRIGHT_SLOWMO: Adicione atraso entre operações (milissegundos)

Ambiente Docker

O contêiner Docker inclui:

• Node.js 18
• Todos os navegadores Playwright pré-instalados
• Dependências do sistema para operação do navegador
• Otimizado para operação sem interface gráfica

Solução de Problemas

Problemas de Instalação do Navegador

npx playwright install --with-deps

Problemas de Permissão (Linux/Docker)

# Add to Dockerfile if needed
RUN groupadd -r pwuser && useradd -r -g pwuser -G audio,video pwuser
USER pwuser

Problemas de Memória

Para testes em larga escala, aumente os limites de memória do Docker:

docker run --memory=2g --cpus=2 mcp-playwright

🎥 Demonstração e Tutoriais

• 📺 Vídeo de Introdução - Guia de configuração em 5 minutos
• 📖 Série Completa de Tutoriais - Do básico ao avançado
• 🎮 Playground Interativo - Experimente ao vivo

🏆 Histórias de Sucesso

"O MCP Playwright reduziu nosso tempo de configuração de automação de testes de semanas para horas. A integração com IA é revolucionária!"
— Engenheiro Sênior de QA na TechCorp

"Finalmente, uma ferramenta que fala tanto a linguagem humana quanto a de máquina para automação web."
— Líder de DevOps na StartupXYZ

🤝 Contribuindo

Adoramos contribuições! Consulte nosso Guia de Contribuição para detalhes.

🎯 Formas de Contribuir

• 🐛 Relatórios de Bugs: Ajude-nos a corrigir bugs
• 💡 Solicitações de Recursos: Compartilhe suas ideias
• 📝 Documentação: Melhore nossa documentação
• 🧪 Testes: Adicione cobertura de testes
• 🎨 Exemplos: Crie exemplos de uso

📈 Estatísticas do Projeto

⭐ GitHub Stars: 150+ (and growing!)
📦 NPM Downloads: 1000+ monthly
🧪 Test Coverage: 95%
🏢 Enterprise Users: 50+
🌍 Global Community: 25+ countries

🌟 O que Vem a Seguir?

• 🤖 Integração Aprimorada com IA: Geração de testes com GPT-4
• 📱 Testes Mobile: Suporte a React Native e Flutter
• 🔄 Plugins de CI/CD: GitHub Actions, Jenkins, GitLab
• 📊 Análises Avançadas: Painel de insights e relatórios de testes

💖 Apoie o Projeto

Se o MCP Playwright ajuda sua equipe, considere:

• ⭐ Dar uma estrela neste repositório
• 🐦 Compartilhar nas redes sociais
• 💬 Entrar na nossa comunidade Discord
• ☕ Patrocinar o desenvolvimento

Licença

Licença MIT - consulte o arquivo LICENSE para detalhes.

---