Servidor MCP Playwright | Awesome MCP Servers

Configuração do Playwright MCP

Este repositório contém tudo o que é necessário para iniciar e conectar a um servidor Playwright MCP (Model Context Protocol) em funcionamento.

✅ Visão Geral

Esta configuração permite automatizar e inspecionar páginas da web usando dados estruturados em vez de capturas de tela — ideal para ferramentas baseadas em LLM, como Claude, Cursor e agentes de IA do VS Code.

🛠️ Pré-requisitos

Node.js v18 ou mais recente
Um dos seguintes clientes compatíveis com MCP:
- VS Code ou VS Code Insiders
- Cursor
- Claude Desktop

📁 Conteúdo do Repositório

.vscode/settings.json — Configuração do VS Code para iniciar o Playwright MCP
package.json — Inclui as dependências MCP necessárias
README.md — Este arquivo
.gitignore — Regras básicas de ignore para projetos Node

🚀 Começando

1. Clone o Repositório

git clone https://github.com/faruklmu17/playwright_mcp.git 
cd playwright-mcp-config

2. Instale as Dependências

npm install

Isso instala todos os pacotes necessários, incluindo @playwright/mcp.

3. Inicie o Servidor MCP

npx playwright-mcp --port 3550

Você deve ver uma saída como:

MCP Server started
Web server started

Você pode alterar a porta se necessário, por exemplo, --port=4000

4. Configuração do Cliente MCP no VS Code

Adicione isto ao seu .vscode/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--port=3550"
      ]
    }
  }
}

Isso informa ao VS Code (ou Cursor) como iniciar e conectar ao servidor MCP.

5. Opcional: Use Sessões Persistentes ou Isoladas

Persistente (padrão)

O estado do navegador é preservado entre sessões.

Exemplo Isolado

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state=storage/state.json"
      ]
    }
  }
}

6. Flags Adicionais

Você pode aprimorar seu servidor MCP usando flags opcionais:

Flag	Descrição
`--port <port>`	Porta personalizada (o padrão é aleatória/atribuída pelo SO)
`--headless`	Executar sem interface do navegador
`--device`	Emular um dispositivo (por exemplo, "iPhone 15")
`--vision`	Habilitar visão baseada em capturas de tela (se suportado)

Verifique as flags disponíveis com:

npx playwright-mcp --help

📅 Nota Sobre Navegadores

Você não precisa instalar playwright ou executar npx playwright install separadamente. O pacote MCP cuida de tudo o que é necessário para a automação do navegador.

📄 .gitignore

node_modules/
.DS_Store

🤝 Contribuindo

Pull requests e sugestões são bem-vindos!

📄 Licença

MIT

Playwright MCP

Documentação