Claude Code ile Playwright MCP Nasıl Kullanılır: Tam Kurulum Kılavuzu

Playwright MCP Nedir?

Playwright MCP sunucusu, herhangi bir Model Context Protocol istemcisine tarayıcı otomasyonu yetenekleri verir. Bir AI’dan “piksellere bakmak” yerine, sunucu sayfanın yapılandırılmış erişilebilirlik anlık görüntülerini döndürür ve model öğelerle referans kimliğine göre etkileşim kurar. Bu döngüyü hızlı, belirleyici ve görüş modeli yükünden muaf kılar. VS Code, Cursor, Windsurf, Claude Desktop, Claude Code ve diğer tüm MCP istemcileriyle çalışır.

Claude Code için özellikle, bu, terminalinizdeki aracının artık bir tarayıcı açabileceği, etrafta tıklayabileceği, formları doldurabildiği, ağ isteklerini taklit edebileceği, ekran görüntüleri yakalayabileceği ve hatta özel Playwright komut dosyalarını çalıştırabileceği anlamına gelir — tümü doğal dil istemlerinden yönlendirilir.

Ön Koşullar

Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:

• Node.js 18 veya daha yeni sürümü yüklü
• Claude Code yüklü ve oturum açmış (terminalinizde claude çalıştırarak doğrulayın)
• Çalışmakta rahat olduğunuz bir terminal

Hepsi bu — Playwright MCP ilk çalıştırmada kendi tarayıcı ikili dosyalarını indirir.

İşinizi büyütmeye hazır mısınız?

Bugün ücretsiz denemenizi başlatın ve günler içinde sonuçları görün.

Demo talep et Giriş yap

Playwright MCP Entegrasyonunu Ayarlama

Playwright MCP’yi Claude Code’a bağlamak tek bir komuttur. Bunu kurmak için şu adımları izleyin:

Playwright MCP Sunucusunu Ekleyin

Terminalinizi açın ve şunu çalıştırın:

claude mcp add playwright npx @playwright/mcp@latest

Bu, Claude Code’un tarayıcı araçlarına ihtiyaç duyduğunda npx aracılığıyla başlattığı playwright adlı yeni bir MCP sunucusunu kaydeder. İlk çağrı paketi ve gerekli tarayıcı ikili dosyalarını indirir, bu nedenle ilk kez bir dakika bekleyin.

Bağlantıyı Doğrulayın

Yeni bir Claude Code oturumu başlatın ve /mcp komutunu çalıştırın:

claude

/mcp

playwright‘ı bağlı bir sunucu olarak ve ortaya çıkardığı araçları (navigasyon, tıklama, yazma, ekran görüntüleri, ağ taklit etme ve daha fazlası) listelenmiş olarak görmelisiniz.

İsteğe Bağlı: Bunun Yerine JSON Yapılandırması Kullanın

Yapılandırma dosyalarını doğrudan düzenlemeyi tercih ederseniz, aynı sunucu ~/.claude.json (veya proje kapsamlı .mcp.json) öğesine standart MCP biçimi kullanılarak eklenebilir:

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

Dosyayı düzenledikten sonra Claude Code’u yeniden başlatın ve sunucu /mcp öğesinde görünecektir.

Claude Code ile İlk Tarayıcı Otomasyonunuz

Sunucu bağlandığında, istemleriniz artık gerçek bir tarayıcıyı kontrol edebilir. Playwright belgelerinden kanonik ilk etkileşimi deneyin:

https://demo.playwright.dev/todomvc adresine gidin ve birkaç yapılacak öğesi ekleyin.

Claude Code tarayıcıyı açacak, sayfanın erişilebilirlik anlık görüntüsünü isteyecek, giriş öğesini referans kimliğine göre bulacak, her yapılacak öğeyi yazacak ve sonucu terminalinizde size geri teslim edecektir.

Hangi tarayıcının açılacağı konusunda uyarı: varsayılan olarak bu, Chromium’u headed modunda başlatır. Bunu değiştirmek için MCP yapılandırmanızda args öğesine bayraklar ekleyin ve Claude Code’u yeniden başlatın: pencereyi gizlemek için --headless veya motorları değiştirmek için --browser=firefox|webkit|msedge.

Erişilebilirlik Anlık Görüntüleri Nasıl Çalışır?

Bir Playwright MCP aracı çalıştığında, pikseller yerine sayfanın yapılandırılmış bir anlık görüntüsünü döndürür — öğe rolleri, metin içeriği ve referans kimlikleri. Claude anlık görüntüyü okur ve metin kutusuna yazmak için ref=e5 veya onay kutusunu çevirmek için ref=e10 gibi başvuruları kullanır. Piksel itme yok, kırılgan CSS seçicileri yok — sadece modelin akıl yürütebileceği yapılandırılmış sayfa durumu.

Bültenimize katılın

En son ipuçlarını, trendleri ve teklifleri ücretsiz alın.

E-posta adresi

Abone ol

Claude Code’dan Kullanabileceğiniz Temel Yetenekler

Playwright MCP kurulduktan sonra, bir takım arkadaşına vereceğiniz istemler Claude Code’da çalışır:

• Navigasyon: “example.com adresine git,” “geri git,” “sayfayı yenile.”
• Tıklama ve yazma: “Gönder düğmesini tıkla,” “email alanını test@example.com ile doldur.”
• Ekran görüntüleri: “Fiyatlandırma bölümünün ekran görüntüsünü al.”
• Klavye ve fare: Tuşlara basın, üzerine gelin, sürükle ve bırak.
• Sekmeler ve iletişim kutuları: Yeni sekmeler açın, bunlar arasında geçiş yapın, açılır pencereleri kabul edin veya reddedin.
• Ağ izleme: “Sayfa yüklemesinden bu yana yapılan istekleri listele.”
• API taklit etme: “/api/users uç noktasını boş bir dizi döndürecek şekilde taklit et.”
• Depolama durumu: Kimliği doğrulanmış oturumları bir dosyaya kaydedin ve daha sonra yeniden yükleyin.

Tek bir araç çağrısından daha fazlasına ihtiyaç duyan iş akışları için, Claude Code’dan browser_run_code çağrısını yapmasını ve satır içinde bir Playwright komut dosyasını çalıştırmasını isteyebilirsiniz — iddialar, veri çıkarma veya birkaç satır zorunlu koddan yararlanan herhangi bir şey için kullanışlıdır.

Yararlı Yapılandırma Seçenekleri

Playwright MCP’nin bilmesi gereken bir avuç bayrağı vardır. Bunları yapılandırmanızda args dizisine ekleyin (veya claude mcp add komutundan sonra -- öğesine).

Headless Modu

Tarayıcı, neler olduğunu izleyebilmeniz için varsayılan olarak headed modunda çalışır. Headless modunda çalıştırmak için — CI veya uzak kabuklar için yararlı — --headless geçirin:

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

Tarayıcı Seçin

--browser bayrağı ile motorları değiştirin. Desteklenen değerler chrome, firefox, webkit ve msedge öğeleridir:

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

Profil Modları

Playwright MCP üç profil modunu destekler:

• Kalıcı (varsayılan): Oturum açma durumu ve çerezler oturumlar arasında devam eder.
• Yalıtılmış: Her oturumu taze başlatmak için --isolated geçirin, isteğe bağlı olarak --storage-state ile tohumlanır.
• Tarayıcı uzantısı: Playwright MCP Bridge uzantısı aracılığıyla mevcut tarayıcı sekmelerinize eklemek için --extension geçirin.

Bağımsız HTTP Sunucusu

Bir ekran olmadan bir yere headed tarayıcı çalıştırmanız gerekiyorsa (veya bir IDE çalışanından), sunucuyu ayrı olarak başlatın ve HTTP üzerinden bağlanın.

İkinci bir terminal açın — tüm oturum boyunca açık tutun — ve sunucuyu orada başlatın:

npx @playwright/mcp@latest --port 8931

Bu terminali açık tutun. Tarayıcıyı localhost:8931 öğesinde ortaya çıkaran ve Claude Code’un bağlanabileceği şey budur, böylece oturumu kendi tarayıcınızda görüntüleyebilirsiniz. Terminali kapatmak sunucuyu kapatır.

Ardından, Claude Code’u çalıştırdığınız terminalinde, yapılandırmanızı güncelleyerek uç noktaya işaret edin:

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

Çalınmaya Değer Pratik İş Akışları

Playwright MCP bağlandığında, Claude Code uçtan uca test iskele kurma, hata yeniden üretme, API taklit etme kontrolleri, sayfa denetlemeleri ve sürüm dağıtım sonrası testleri işleyebilir — tarayıcıyı kontrol etmeyi ve geri rapor vermeyi içeren herhangi bir şey.

Bu istemler pratikte gerçekten çalışmasını sağlayan iki şey vardır. Birincisi, proje kökünüzdeki bir CLAUDE.md, hazırlama URL’nizi, demo kimlik bilgilerinizi ve aracının izlemesi gereken kuralları belgeler — bunu olmadan, “demo kullanıcısı olarak oturum aç” tutacak hiçbir şey yoktur. İkincisi, Claude Code’un sorunlardan veya biletlerden bağlam çekmesini istiyorsanız, ikinci bir MCP sunucusunu bağlayın — GitHub MCP sunucusu yaygın seçimdir. Her ikisini de atlayın ve Claude Code (makul bir şekilde) size #482 numaralı sorunun ne olduğunu soracaktır.

Claude Code’u Playwright MCP ile Neden Eşleştirmelisiniz?

Bu kombinasyonu yenmesi zor hale getiren birkaç neden:

• Terminal-native: Her şey zaten çalıştığınız yerde gerçekleşir. Ayrı bir test çalıştırıcısına bağlam geçişi yok.
• Erişilebilirlik-first: Anlık görüntüler ekran görüntüleri için hız ve güvenilirlik açısından daha iyidir ve bir görüş modeli olmadan çalışırlar.
• Altında gerçek Playwright: Playwright ile kodda yapabileceğiniz herhangi bir şeyi burada yapabilirsiniz — multi-tarayıcı, ağ taklit etme, depolama durumu ve daha fazlası.
• Diğer MCP sunucuları ile birleştirilebilir: Playwright’ı GitHub, veritabanınız veya izleme MCP sunucunuzun yanına yığın ve Claude Code, tümü arasında uçtan uca çalışmayı taşıyabilir.
• Açık standart: MCP taşınabilir. Aynı Playwright sunucusu Cursor, VS Code, Windsurf ve Claude Desktop’ta çalışır, istemcileri değiştirirseniz.

Sunucuyu ekleyin, bağlantıyı doğrulamak için /mcp çalıştırın ve bir sonraki “giriş sayfasını test et” isteminiz gerçek bir tarayıcı oturumuna dönüşür — Claude Code tarafından yönlendirilir, headed modda izlenir (veya izlenmez) ve erişilebilirlik anlık görüntüleri aracılığıyla doğrulanabilir.