Puppeteer ile Web Tarayıcısını Otomatikleştirme MCP

Manuel web görevlerinin sizi yavaşlatmasından bıktınız mı? Puppeteer MCP, web ile etkileşim şeklinizde devrim yaratmak için son teknoloji tarayıcı otomasyonunu yapay zeka zekasıyla birleştirir.

Puppeteer'ın başsız tarama yetenekleri ile Model Context Protocol (MCP) arasındaki bu güçlü entegrasyon şunları sağlar:
✅ Yapay zeka destekli web etkileşimleri - LLM'ler artık sayfalarda gezinebilir, formları doldurabilir ve veri çıkarabilir
✅ Akıllı görsel yakalama - Bağlamsal anlayışa sahip otomatik ekran görüntüleri
✅ Dinamik JS yürütme - Doğal dil komutları aracılığıyla JavaScript'i çalıştırın ve analiz edin

Bu kılavuzda, size şunları anlatacağız:
1. Ortamınızda Puppeteer MCP'nin kolay kurulumu
2. Gerçek dünya otomasyonu için pratik örnekler
3. Verimliliği en üst düzeye çıkarmak için profesyonel ipuçları

İş akışınızı tekrarlayan manuel görevlerden, yapay zeka destekli akıllı otomasyona dönüştürün (web otomasyonu için yapay zekadan yararlanmak isteyen geliştiriciler, veri kazıyıcılar ve dijital pazarlamacılar için mükemmel). Hadi başlayalım!

Puppeteer MCP Nedir?

Puppeteer MCP, sağlam tarayıcı otomasyon yetenekleri sağlamak için Puppeteer'dan (veya onun Python eşdeğeri Playwright'ten) yararlanan bir Model Context Protocol sunucusudur. Bu sunucu, LLM'lerin web sayfalarında gezinmesini, ekran görüntüleri almasını, formları doldurmasını ve gerçek bir tarayıcı ortamında JavaScript yürütmesini sağlar. Web testlerini, dinamik içeriği kazımayı ve dokümantasyon için ekran görüntüleri almayı otomatikleştirmek için idealdir.

Puppeteer MCP'nin Temel Özellikleri Açıklandı

1. Puppeteer MCP için Gelişmiş Tarayıcı Otomasyonu

Puppeteer MCP, yapay zeka yeteneklerini entegre ederek geleneksel tarayıcı otomasyonunu güçlendirir:

• Doğal Dil Navigasyonu: LLM'lere "GitHub'a git, yapay zeka depolarını ara ve ilk 3 sonucu aç" talimatını verin
• Akıllı Form Etkileşimi: Dinamik alan algılamasıyla karmaşık form gönderimlerini otomatikleştirin
• Çok Adımlı İş Akışları: Giriş → veri çıkarma → rapor oluşturma gibi eylemleri tek bir komutta zincirleyin

Profesyonel İpucu: CAPTCHA'ları veya onay iletişim kutularını akıllıca işlemek için Claude'un muhakemesiyle birleştirin.

2. Puppeteer MCP Akıllı Ekran Görüntüsü Yakalama

Temel ekran görüntülerinin ötesinde, Puppeteer MCP şunları sağlar:

• Bağlam farkındalıklı yakalamalar: "Kaydırma tetiklemeli, tembel yüklemeli sayfada fiyatlandırma tablosunun ekran görüntüsünü al"
• Görsel farklılaştırma: Dağıtımlar arasında ekran görüntülerini karşılaştırın
• OCR entegrasyonu: Daha fazla işleme için görüntülerden metin çıkarın

Örnek Kullanım Durumu: Erişilebilirlik uyumluluk raporları için UI durumlarını otomatik olarak belgeleyin.

3. Puppeteer MCP Kullanarak Dinamik JavaScript Yürütme

Şunlarla bir sonraki seviye otomasyonun kilidini açın:

• LLM tarafından oluşturulan komut dosyaları: "Bu e-ticaret sayfasından tüm ürün SKU'larını çıkarmak için JS yazın"
• Gerçek zamanlı DOM manipülasyonu: Manuel kodlama olmadan canlı sayfaları değiştirin
• Performans izleme: Etkileşimler sırasında Lighthouse puanları gibi metrikleri izleyin

Güvenlik Notu: Üretim için --disable-setuid-sandbox bayrağı ile Sandbox yürütme.

4. Puppeteer MCP ile Konsol Günlüğü İzleme

Şunlarla hata ayıklamayı dönüştürün:

• Yapay zeka destekli günlük analizi: "Son oturumdan tüm 404 hatalarını bul"
• Desen tespiti: Sayfa gezinmelerinde bellek sızıntılarını belirleyin
• Otomatik raporlama: Konsol çıktısından hata özetleri oluşturun

5. Yapılandırılabilir Puppeteer MCP'nin Tarayıcı Seçenekleri

Ortam değişkenleri aracılığıyla özelleştirin:

export PUPPETEER_HEADLESS=false  # Görünür tarayıcı
export PUPPETTEER_SLOWMO=250      # Yavaş çekim demo modu
export PUPPETEER_TIMEOUT=60000    # Genişletilmiş zaman aşımı

Puppeteer MCP'ye Nasıl Başlanır

1. Adım: Puppeteer MCP Sunucusunu Kurun

npm ile Küresel Olarak Kurun:

Puppeteer MCP sunucusunu npm kullanarak küresel olarak kurabilirsiniz:

npm install -g puppeteer-mcp-server

npx ile Doğrudan Çalıştırın:

Alternatif olarak, npx kullanarak kurulum yapmadan çalıştırabilirsiniz:

npx puppeteer-mcp-server

Kaynaktan Kurun:

1. GitHub deposunu klonlayın, bağımlılıkları yükleyin, oluşturun ve sunucuyu manuel olarak çalıştırın:

git clone https://github.com/merajmehrabi/puppeteer-mcp-server.git

Dosya yapısı şuna benzer görünmelidir:

2. proje klasörüne girin:

cd puppeteer-mcp-server

3. tüm projelerin bağımlılıklarını yükleyin:

npm install

4. projeyi oluşturun:

npm run build

5. sunucuyu çalıştırın:

npm start

2. Adım: Puppeteer MCP'yi Claude ile Yapılandırın

Claude Yapılandırma Dosyasını Bulun:

Claude Desktop yapılandırma dosyasını bulun:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Puppeteer MCP Yapılandırması Ekleme:

Yapılandırma dosyasını açın ve Puppeteer MCP'yi etkinleştirmek için aşağıdakileri ekleyin:

{
  "mcpServers": {
    "puppeteer": {
      "command": "puppeteer-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

npx kullanılıyorsa:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"],
      "env": {}
    }
  }
}

Puppeteer MCP Kurulum Seçeneklerini Karşılaştırma:

3. Adım: Puppeteer MCP'yi Test Edin

Claude'u Başlatın:

Claude Desktop Uygulamasını başlatın.

Puppeteer MCP'yi Doğrulayın:

Puppeteer MCP sunucusunun Claude tarafından tanınıp tanınmadığını kontrol edin. Araçlar bölümünde listelendiğini görmelisiniz.

Simgeye tıklamak, Claudes'un mevcut MCP sunucularını inceleyecektir.

Puppeteer MCP'nin konsol günlüğü kaynağını kullanmak için "Entegrasyon seç"e tıklayın ve puppeteer mcp'nin konsol günlüğü kaynağını seçin.

Sohbetinizde mevcut olduğunu görmelisiniz.

Örnek Komutları Çalıştırın:

Bir URL'ye gitmek veya bir ekran görüntüsü yakalamak gibi örnek komutlar çalıştırarak sunucuyu test edin:

>> Puppeteer kullanarak https://example.com adresine gidin. Sayfanın ekran görüntüsünü yakalayın.

Komutlarınız olabildiğince karmaşık olabilir! Claude, en karmaşık görevlerden bazılarını bile gerçekleştirmek için Puppeteer MCP Sunucusunu kullanabilir. Örneğin:

>> http://Any_Test_Website_Your_Want.com web sitesine gidin ve giriş bağlantısına tıklayın. Giriş sayfasında, kullanıcı adı ve şifreyi sırasıyla "admin" ve "incorrect" olarak girin ve oturum açın. Ardından Çalışan Listesi sayfasına tıklayın ve "Yeni Oluştur" düğmesine tıklayın ve aşağıdaki ayrıntılarla yeni bir çalışan oluşturmak için gerçekçi çalışan ayrıntılarını girin: Ad, Maaş, Çalışma Süresi ve E-posta. Oluşturulduktan sonra, siteden çıkış yapmayı deneyin.

İstemi çalıştırdıktan sonra, Claude otomatik olarak tarayıcıyı açacak ve belirtilen web sitesine gidecektir: "http://Any_Test_Website_You_Want.com". Daha sonra giriş düğmesine tıklayacak, kimlik bilgilerini (kullanıcı adı: "admin", şifre: "incorrect") girecek ve oturum açacaktır. Siteye başarıyla eriştikten sonra, sahte verilerle yeni bir çalışan oluşturacak ve ardından oturumdan çıkacaktır.

Puppeteer MCP için Kullanım Durumları

Web Test Otomasyonu: Kullanıcı etkileşimlerini simüle ederek ve sayfa davranışını doğrulayarak web testlerini otomatikleştirin.

Web Kazıma: JavaScript yürüterek ve ekran görüntüleri yakalayarak dinamik web sayfalarından veri çıkarın.

Dokümantasyon: Dokümantasyon amaçlı web sayfalarının ekran görüntülerini yakalayın.

JavaScript Yürütme: Karmaşık görevleri otomatikleştirmek için bir tarayıcı ortamında özel JavaScript kodu yürütün.

Puppeteer MCP Sorun Giderme

Puppeteer MCP ile ilgili sorunlarla karşılaşırsanız, aşağıdakileri göz önünde bulundurun:

Yapılandırmayı Kontrol Edin: Claude ayarlar dosyanızdaki yapılandırmanın doğru ve düzgün biçimlendirilmiş olduğundan emin olun.

Kurulumu Doğrulayın: Puppeteer MCP'nin doğru şekilde kurulduğundan ve hatasız çalıştığından emin olun.

Konsol Günlükleri: JavaScript yürütme veya sayfa etkileşimleriyle ilgili sorunları gösterebilecek hatalar veya uyarılar için tarayıcı konsol günlüklerini izleyin.

Puppeteer MCP ile Çalışırken Güvenlik En İyi Uygulamaları

Güvenli Yapılandırma Dosyaları: Yapılandırma dosyalarınızı, özellikle API anahtarları gibi hassas bilgiler içeriyorlarsa, güvende tutun.

Erişimi Sınırla: Puppeteer MCP sunucunuza erişimi yalnızca yetkili kullanıcılarla sınırlandırın.

Düzenli Güncellemeler: Bilinen güvenlik açıklarına karşı koruma sağlamak için Puppeteer MCP sunucunuzu ve bağımlılıklarınızı güncel tutun.

Sonuç

Puppeteer MCP, web etkileşimlerini otomatikleştirmek ve bunları yapay zeka iş akışlarıyla entegre etmek için güçlü bir yol sunar. Bu kılavuzu izleyerek, yalnızca tarayıcıları otomatikleştirmekle kalmayıp, aynı zamanda şunları yapabilen güçlü ve akıllı yapay zeka aracılar oluşturmak için Puppeteer MCP'de ustalaşma yolculuğunuzda dev bir adım atıyorsunuz:

1. Web içeriğini bağlamsal olarak anlayın
2. En uygun etkileşim yollarını karar verin
3. Değişen sayfa yapılarına uyum sağlayın
4. Doğal dilde içgörüler bildirin

Artık üretkenliğinizi artırmak ve web testi, kazıma ve dokümantasyon gibi görevleri kolaylaştırmak için Puppeteer MCP'yi kurabilir ve kullanabilirsiniz. İster bir geliştirici, ister bir araştırmacı olun, ister sadece web görevlerini otomatikleştirmek istiyor olun, bu araç ihtiyacınız olan esnekliği ve kontrolü sağlar.

Ve bunu yaparken, MCP ve API geliştirme iş akışlarınızı kolaylaştırmak için Apidog 'u kontrol etmeyi unutmayın. Ücretsiz başlayın!