Browser Automation TypeScript ★ 5,554

executeautomation/mcp-playwright

Tarayıcı otomasyonu ve web scraping için Playwright kullanan bir MCP sunucusu

Claude Desktop config.json'a ekle

{
  "mcpServers": {
    "executeautomation-mcp-playwright": {
      "command": "node",
      "args": [
        "~/.mcp/mcp-playwright/index.js"
      ]
    }
  }
}

Playwright MCP Sunucusu 🎭

Trust Score smithery badge

Playwright kullanarak tarayıcı otomasyon yetenekleri sağlayan bir Model Context Protocol sunucusu. Bu sunucu, LLM'lerin web sayfalarıyla etkileşim kurmasını, ekran görüntüsü almasını, test kodu oluşturmasını, sayfayı web kazımasını ve gerçek bir tarayıcı ortamında JavaScript yürütmesini sağlar.

✨ v1.0.10'daki Yenilikler

🎯 143 Gerçek Cihaz Ön Ayarı ile Cihaz Emülasyonu!

Web uygulamalarınızı basit bir komutla gerçek cihaz profilleri üzerinde test edin:

// iPhone 13 üzerinde test edin (otomatik user-agent, dokunma desteği ve cihaz piksel oranı ile)
await playwright_resize({ device: "iPhone 13" });

// iPad'e yatay yönelime geç
await playwright_resize({ device: "iPad Pro 11", orientation: "landscape" });

// Masaüstü görünümünü test edin
await playwright_resize({ device: "Desktop Chrome" });

AI Yardımcıları için Doğal Dil Desteği:

  • "iPhone 13'te test et"
  • "iPad görünümüne geç"
  • "Yatay yönelime döndür"

143 cihazı destekler: iPhone, iPad, Pixel, Galaxy ve masaüstü tarayıcıları viewport, user-agent, dokunma olayları ve cihaz piksel oranlarının uygun emülasyonu ile.

📚 Cihaz Hızlı Referansını Görüntüle | İstem Rehberi

Ekran Görüntüsü

Playwright + Claude

Belgeler | API Referansı

Kurulum

Paketi npm, mcp-get veya Smithery kullanarak kurabilirsiniz:

npm kullanarak:

npm install -g @executeautomation/playwright-mcp-server

mcp-get kullanarak:

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

Smithery kullanarak

Smithery aracılığıyla Claude Desktop için Playwright MCP'yi otomatik olarak kurun:

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

Claude Code kullanarak:

claude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-server

VS Code'da Kurulum

Şu düğmelerden birini kullanarak Playwright MCP sunucusunu VS Code'da kurun:

Alternatif olarak, VS Code CLI'ı kullanarak Playwright MCP sunucusunu kurabilirsiniz:

# VS Code için
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'
# VS Code Insiders için
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

Kurulumdan sonra, ExecuteAutomation Playwright MCP sunucusu VS Code'daki GitHub Copilot aracınız ile kullanılmak üzere hazır olacaktır.

Tarayıcı Kurulumu

Otomatik Kurulum (Önerilen)

Playwright MCP Sunucusu, ilk kez kullandığınızda tarayıcı ikili dosyalarını otomatik olarak yükler. Sunucu bir tarayıcının eksik olduğunu algıladığında:

  1. Gerekli tarayıcıyı (Chromium, Firefox veya WebKit) otomatik olarak indir ve kur
  2. Kurulum ilerlemesini konsolda göster
  3. Kurulum tamamlandıktan sonra isteğinizi yeniden dene

Elle kurulum gerekli değildir! Sunucuyu kullanmaya başlayın ve tarayıcı kurulumunu sizin için işlesin.

Elle Kurulum (İsteğe Bağlı)

Tarayıcıları elle kurmayı tercih ediyorsanız veya otomatik kurulumda sorun yaşıyorsanız:

# Tüm tarayıcıları kur
npx playwright install

# Veya belirli tarayıcıları kur
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Tarayıcı Depolama Konumu

Tarayıcılar şu konumlara yüklenir:

  • Windows: %USERPROFILE%\AppData\Local\ms-playwright
  • macOS: ~/Library/Caches/ms-playwright
  • Linux: ~/.cache/ms-playwright

Playwright Server'ı Kullanmak için Yapılandırma

Standart Mod (stdio)

Bu, Claude Desktop için önerilen moddur.

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

Not: stdio modunda, günlüğe kaydetme otomatik olarak yalnızca dosyalara yönlendirilir (konsola değil) ve temiz JSON-RPC iletişimini korur. Günlükler ~/playwright-mcp-server.log dosyasına yazılır.

HTTP Modu (Bağımsız Sunucu)

Ekranı olmayan sistemlerde veya IDE'ler işçi süreçlerinden headed tarayıcı çalıştırırken, MCP sunucusunu bağımsız bir HTTP sunucusu olarak çalıştırabilirsiniz:

Claude Desktop Kullanıcıları için Not: Claude Desktop şu anda stdio modunu (command/args yapılandırması) gerektirir. HTTP modu VS Code, özel istemciler ve uzaktan dağıtımlar için önerilir. Ayrıntılar için CLAUDE_DESKTOP_CONFIG.md dosyasına bakın.

HTTP Sunucusunu Başlatma

# npx kullanarak
npx @executeautomation/playwright-mcp-server --port 8931

# Veya global kurulumdan sonra
playwright-mcp-server --port 8931

Sunucu başlayacak ve kullanılabilir endpoint'leri gösterecektir:

==============================================
Playwright MCP Server (HTTP Mode)
==============================================
Port: 8931

ENDPOINTS:
- SSE Stream:     GET  http://localhost:8931/sse
- Messages:       POST http://localhost:8931/messages?sessionId=<id>
- MCP (unified):  GET  http://localhost:8931/mcp
- MCP (unified):  POST http://localhost:8931/mcp?sessionId=<id>
- Health Check:   GET  http://localhost:8931/health
==============================================

HTTP Modu için İstemci Yapılandırması

⚠️ KRİTİK: "type": "http" alanı HTTP/SSE taşıması için GEREKLIDIR!

VS Code GitHub Copilot için:

{
  "github.copilot.chat.mcp.servers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Özel MCP İstemcileri için:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Önemli: "type": "http" olmadan bağlantı başarısız olacaktır.

Claude Desktop için: Bunun yerine stdio modunu kullanın (yukarıdaki Standart Mod'a bakın)

HTTP Modu Kullanım Durumları

  • Ekranı olmayan sistemlerde headed tarayıcılar çalıştırma (ör. uzak sunucular)
  • VS Code GitHub Copilot ile entegrasyon
  • Sunucuyu arka plan hizmeti olarak çalıştırma
  • Sunucuya birden çok istemciden erişme
  • /health endpoint'i ile hata ayıklama
  • Özel MCP istemci entegrasyonları

İzleme: Sunucu, dinamik olarak tahsis edilen bir bağlantı noktasında başlayan bir izleme sistemi içerir (çakışmaları önler). Gerçek bağlantı noktası için konsol çıktısını kontrol edin.

Not: Claude Desktop için şimdilik stdio modunu (yukarıdaki Standart Mod) kullanmaya devam edin.

Sorun Giderme

"No transport found for sessionId" Hatası

Semptom: "Bad Request: No transport found for sessionId" mesajıyla 400 hatası

Çözüm:

  1. Yapılandırmanın "type": "http" içerdiğini kontrol edin

    {
      "url": "http://localhost:8931/mcp",
      "type": "http"  // ← Bu GEREKLIDIR!
    }
    
  2. Sunucu günlüklerinin bağlantıyı gösterdiğini doğrulayın:

    # Bu sırayla görülmesi gerekir:
    # 1. "Incoming request" - GET /mcp
    # 2. "Transport registered" - sessionId ile
    # 3. "POST message received" - aynı sessionId ile
    
  3. Hem sunucuyu hem istemciyi yeniden başlatın

Bağlantı Sorunları

  • Sunucu başlamıyor: 8931 portunun kullanılabilir olduğunu kontrol edin
  • Harici erişim engellendi: Bu tasarım gereğidir (güvenlik). Sunucu yalnızca localhost'a bağlanır
  • Uzaktan erişim için: SSH tünelemesini kullanın:
    ssh -L 8931:localhost:8931 user@remote-server
    

Test

Bu proje testler için Jest kullanır. Testler src/__tests__ dizininde bulunur.

Testleri Çalıştırma

Testleri aşağıdaki komutlardan birini kullanarak çalıştırabilirsiniz:

# Özel betik kullanarak testleri çalıştır (kapsama ile)
node run-tests.cjs

# npm betikleri kullanarak testleri çalıştır
npm test           # Kapsama olmadan testleri çalıştır
npm run test:coverage  # Kapsama ile testleri çalıştır
npm run test:custom    # Özel betik ile testleri çalıştır (node run-tests.cjs ile aynı)

Test kapsama raporu coverage dizininde oluşturulacaktır.

Evals'ı Çalıştırma

Evals paketi, index.ts dosyasını çalıştıran bir mcp istemcisi yükler, bu nedenle testler arasında yeniden derlemek gerekli değildir. Ortam değişkenlerini npx komutunun başına ön ekle yaparak yükleyebilirsiniz. Tam belgeler burada bulunabilir.

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

Katkıda Bulunma

Yeni araçlar eklerken, araç adı uzunluğuna dikkat etmeyi lütfen unutmayın. Cursor gibi bazı istemciler, birleştirilmiş sunucu ve araç adı için 60 karakterlik bir limite sahiptir (server_name:tool_name).

Sunucu adımız playwright-mcp dir. Lütfen araç adlarınızın bu limiti aşmayacak kadar kısa olduğundan emin olun.

Star Geçmişi

Star History Chart

Benzer MCP sunucuları

Daha fazla: Browser Automation →