Playwright

MCP Server Playwright

Um servidor Model Context Protocol que fornece recursos de automação de navegador usando Playwright
_{Permite que LLMs interajam com páginas da web, tirem capturas de tela e executem JavaScript em um ambiente de navegador real}

Sumário

• Recursos
• Instalação
• Configuração
• Componentes
  • Ferramentas
  • Recursos
• Licença

Recursos

• 🌐 Recursos completos de automação de navegador
• 📸 Captura de capturas de tela de páginas inteiras ou elementos específicos
• 🖱️ Interação web abrangente (navegação, cliques, preenchimento de formulários)
• 📊 Monitoramento de logs do console
• 🔧 Execução de JavaScript no contexto do navegador

Instalação

Instalando via Smithery

Para instalar o MCP Server Playwright para Claude Desktop automaticamente via Smithery:

npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude

Você pode instalar o pacote usando npx ou mcp-get:

Usando npx:

npx @automatalabs/mcp-server-playwright install

Este comando irá:

1. Verificar a compatibilidade do seu sistema operacional (Windows/macOS)
2. Criar ou atualizar o arquivo de configuração do Claude
3. Configurar a integração do servidor Playwright

O arquivo de configuração será criado/atualizado automaticamente em:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Usando mcp-get:

npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

Configuração

O processo de instalação adicionará automaticamente a seguinte configuração ao seu arquivo de configuração do Claude:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@automatalabs/mcp-server-playwright"]
    }
  }
}

Usando com Cursor

Você também pode usar o MCP Server Playwright com Cursor, um editor de código com tecnologia de IA. Para habilitar a automação de navegador no Cursor via MCP:

1. Instale os navegadores Playwright (se ainda não tiver):

   npx playwright install
   

2. Instale o MCP Server Playwright para Cursor usando Smithery:

   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
   

3. Configuração do arquivo de configuração:
   Se você não usa Claude, o arquivo de configuração (claude_desktop_config.json) pode não ser criado automaticamente.

   • No Windows, crie uma pasta chamada Claude em %APPDATA% (geralmente C:\Users\<YourName>\AppData\Roaming\Claude).
   • Dentro dessa pasta, crie um arquivo chamado claude_desktop_config.json com o seguinte conteúdo:

   {
     "serverPort": 3456
   }
   

4. Siga as etapas restantes na seção Instalação acima para concluir a configuração.

Agora, você pode usar todas as ferramentas de automação de navegador fornecidas pelo MCP Server Playwright diretamente dos recursos de IA do Cursor, como navegação web, captura de capturas de tela e execução de JavaScript.

Nota: Certifique-se de ter o Node.js instalado e npx disponível no PATH do seu sistema.

Componentes

Ferramentas

browser_navigate

Navegue para qualquer URL no navegador

{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

Capture capturas de tela da página inteira ou de elementos específicos

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: false
}

browser_click

Clique em elementos da página usando seletor CSS

{
  "selector": "#button-id"
}

browser_click_text

Clique em elementos da página pelo seu conteúdo de texto

{
  "text": "Click me"
}

browser_hover

Passe o mouse sobre elementos da página usando seletor CSS

{
  "selector": "#menu-item"
}

browser_hover_text

Passe o mouse sobre elementos da página pelo seu conteúdo de texto

{
  "text": "Hover me"
}

browser_fill

Preencha campos de entrada

{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

Selecione uma opção em um elemento SELECT usando seletor CSS

{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

Selecione uma opção em um elemento SELECT pelo seu conteúdo de texto

{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

Execute JavaScript no console do navegador

{
  "script": "document.title"
}

Recursos

1. Logs do Console (console://logs)

   • Acesse a saída do console do navegador em formato de texto
   • Inclui todas as mensagens do console do navegador

2. Capturas de Tela (screenshot://<n>)

   • Acesse imagens PNG das capturas de tela
   • Referenciadas pelo nome especificado durante a captura

Licença

Este projeto é licenciado sob a Licença MIT - consulte o arquivo LICENSE para obter detalhes.