Yapay zekâ ajanıyla tarayıcı testi, kodlama ajanının web uygulamanı gerçek bir tarayıcıda açması, içinde gezinip tıklaması ve konsolu okuması demek; böylece ajan değişikliğini tahmin etmek yerine kendisi dener. Ajana tarayıcı vermenin yaygın yolu Playwright MCP: tarayıcı eylemlerini araca çeviren bir MCP sunucusu. Onu Claude Code ya da Codex’e kendin ekleyebilir ya da ajanların için ayrı bir Chrome başlatan ve her sekmeyi canlı izlemeni sağlayan AgentVera’yı kullanabilirsin.
Bu rehberde ajanın tarayıcıda neler yapabildiğini, elle kurulumu, AgentVera tarayıcısını ve bir değişikliği baştan sona denemek için bir iş akışını anlatıyoruz.
Ajana neden tarayıcı vermeli
Tarayıcısı olmayan bir ajan arayüzünü değiştirdiğinde yalnızca kodu okuyup umut edebilir. Düğmenin başlığın arkasında kaldığını, formun gönderince hata verdiğini ya da açılışta konsola hata düştüğünü görmez. Sonunda ajanın gözü sen olursun: sayfayı açar, sorunu anlatır, hatayı yapıştırırsın.
Tarayıcıyla döngü kapanır:
- Ajan kodu değiştirir.
- Sayfayı açar, akışı tıklayarak dener ve ekran görüntüsü alır.
- Konsol mesajlarını okur.
- Bulduğunu düzeltir ve yeniden dener.
Sonucu yine sen gözden geçirirsin, ama bariz bozukluk sen bakmadan yakalanır.
Ajan Playwright MCP ile neler yapabilir
Playwright MCP tarayıcıyı araç olarak sunar. Sık kullanılanlar:
| Araç | Ajan onunla ne yapar |
|---|---|
browser_navigate | Bir adres açar, örneğin geliştirme sunucunu |
browser_snapshot | Öğeleri bulmak için sayfanın yapısını (erişilebilirlik ağacını) okur |
browser_click | Bir düğmeye, bağlantıya ya da alana tıklar |
browser_type | Bir alana yazar |
browser_take_screenshot | Sayfanın görünümünü yakalar |
browser_console_messages | Konsol kayıtlarını ve hataları okur |
İşin anahtarı snapshot. Ajan piksel konumlarını tahmin etmek yerine sayfanın yapılandırılmış bir görünümünü okur ve öğelere referansla tıklar; bu çok daha güvenilirdir.
Playwright MCP’yi elle kurmak
Claude Code için sunucuyu projenden ekle:
claude mcp add playwright npx @playwright/mcp@latestCodex için ~/.codex/config.toml dosyasına ekle:
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Sonra geliştirme sunucunu başlat ve ajandan somut bir şey iste:
http://localhost:3000/signup adresini aç, formu bir test e-postasıyla doldur,
gönder ve ne olduğunu söyle. Konsolda hata var mı kontrol et.Bu çalışır; ama ekran görüntüsü istemedikçe ajanın gördüğünü sen görmezsin, sunucuyu nasıl başlattığına göre de tarayıcı her gün kullandığın tarayıcıyla durum paylaşabilir. MCP’nin temelleri için MCP sunucusu nedir yazısına bak.
AgentVera tarayıcısı
AgentVera, kodlama ajanı CLI’larını yan yana çalıştıran macOS, Windows ve Linux masaüstü uygulamasıdır. Aynı Playwright MCP üzerine kurulu kendi ajan tarayıcısı var.
Bir ajan için aç
Ajan penceresindeki Tarayıcı alanında üç seçenek var:
| Seçenek | Ne yapar |
|---|---|
| Kapalı | Ajan tarayıcı kullanmaz |
| AgentVera tarayıcısı | Playwright MCP ile; sekmeler uygulamanın Tarayıcı sayfasında canlı izlenir |
| Claude in Chrome | Yalnızca Claude Code: kendi Chrome’unda Claude eklentisiyle (--chrome) |
AgentVera tarayıcısını seç ve ajanı başlat. AgentVera kendi profiliyle ayrı, başsız (headless) bir Chrome çalıştırır ve ajanın Playwright MCP’sini ona bağlar. Bilgisayarında zaten kurulu olan Chrome, Edge, Brave ya da Chromium’u kullanır. Kişisel Chrome profilin, çerezlerin ve parolaların bu tarayıcıya geçmez.
Seçenek MCP sunucusu alan ajanlarda var: Claude Code, Codex, Gemini CLI, Copilot ve desteklenen diğer CLI’ların çoğu. SSH üzerinden çalışan uzak ajanlarda yok.
Sekmeleri canlı izle, istediğinde devral
Uygulamanın Tarayıcı sayfası, ajanın çalışırken açtığı sekmeleri gösterir. Bu bir kayıt değil, normal bir tarayıcı görünümü: istediğin an tıklayıp yazarak devralabilirsin; örneğin giriş yapmak ya da bir çerez uyarısını kapatmak için. Sonra işi ajana geri bırakırsın.
Araç çubuğunda beklediğin her şey var: adres çubuğu, geri, ileri ve yenile, sayfada bul, yakınlaştırma, yer imleri ve geçmiş, bir de İndirilenler klasörüne kaydeden Ekran görüntüsü. Sağ tık menüsünde DevTools için İncele var, tarayıcıyı ayrı bir pencerede de açabilirsin. Sayfa ayrıca ajanların bağlandığı uç noktayı gösterir.
Konsol hatalarını bir ajana geri gönder
Tarayıcı sayfasında her sekme için bir konsol paneli var. İki kısayol, kopyala yapıştır yapmadan döngüyü kapatır:
- Hataları düzelt, son konsol hatalarını düzeltme talimatıyla bir ajana gönderir.
- Her satırda Düzelt ve Ajana gönder var; tek bir hatayı seçebilirsin.
Bu, uygulamanın başka yerlerinde de kullanılan ajana gönder akışının aynısı; ajana gönder sayfasına bak.
Geliştirme sunucunu onda aç
Bir ajan geliştirme sunucusu başlattığında port, sağ paneldeki Portlar sekmesinde AgentVera tarayıcısında ya da sistem tarayıcısında açma seçenekleriyle görünür. Ajanların yazdığı bağlantılar da uygulama içi tarayıcıda açılır; sistem tarayıcını kullanmak için tıklarken ⌥ tuşunu basılı tut.
AgentVera tarayıcısı ücretsiz planın parçası.
Bir değişikliği baştan sona denemek için iş akışı
Bir arayüz değişikliği için iyi çalışan bir kurulum:
- Ajanı AgentVera tarayıcısı açık olarak, tercihen kendi git worktree’sinde oluştur.
- Değişikliği ve kontrolü birlikte iste; örneğin: “Kayıt formuna parola gücü ipucu ekle. Sonra kayıt sayfasını aç, zayıf ve güçlü bir parola dene, ikisinin de ekran görüntüsünü al ve konsolu kontrol et.”
- Ajan çalışırken Tarayıcı sayfasını izle. Bir girişte takılırsa devral, giriş yap ve ajana devam etmesini söyle.
- Konsolda hata varsa Hataları düzelt’e bas.
- Akış çalışınca ajandan onu bir Playwright test dosyası olarak yazmasını iste; kontrol bundan sonra CI’da çalışsın.
- Birleştirmeden önce farkı ve ekran görüntülerini gözden geçir.
Beşinci adım önemli. MCP ile gezinmek sorunları bulmak ve doğrulamak için harika, ama bir test paketi değil. Akışı gelecek ay da çalışır tutan şey normal bir test dosyası.
İyi çalışan istemler
- “Sayfayı aç, bir snapshot al ve tıklanınca hiçbir şey yapmayan her düğmeyi listele.”
- “Telefon genişliğine küçült, ekran görüntüsü al ve taşan her şeyi düzelt.”
- “Test kartıyla ödemeyi baştan sona dene, sonra gördüğün her konsol hatasını ve başarısız isteği raporla.”
Adres ve başarının neye benzediği konusunda net ol. “Uygulamayı test et” ajana fazla alan bırakır; “kaydol, sonra panelin yeni kullanıcının adını gösterdiğini doğrula” ona kontrol edebileceği bir hedef verir.
Akılda tutman gerekenler
- Ajan her şeye tıklayabilir. Onu gerçek verili canlı ortama değil, yerel ya da test ortamına yönlendir.
- Girişler. AgentVera tarayıcısının kendi profili var; orada bir kez giriş yaparsın. Test hesapları kullan.
- Ekran görüntüleri bağlam harcar. Her adımda değil, işe yaradığında iste.
- Doğru tarayıcı seçeneğini seç. Claude in Chrome gerçek Chrome’unu ve oturumlarını kullanır; AgentVera tarayıcısı onları ayrı tutar.
Bir siteyi ajanla sıfırdan yapıyorsan yapay zekâ ile web sitesi yapmak bütün akışı gösteriyor; vibe coding nasıl yapılır da işi yolunda tutan alışkanlıkları anlatıyor.
Ajanlarına izleyebileceğin bir tarayıcı vermek için AgentVera’yı indir ya da ajan tarayıcısı sayfasını oku.