Skip to content
berkay.
← Tüm Yazılar

Geliştirici Araçları

Playwright CLI: Ajanlar İçin Token Yemeyen Tarayıcı Otomasyonu

Playwright'ı bir MCP sunucusu olarak çalıştırıp her adımda tüm DOM ağacını bağlama doldurmaktan ve faturaları şişirmekten bıkmıştım. Microsoft'un resmi Playwright CLI projesini denedim; ajanlara SKILL formatında hafif ve hedef odaklı tarayıcı gücü kazandırmanın detayları.

Tarih 20 Eylül 20268 dk okuma
Playwright CLI: Ajanlar İçin Token Yemeyen Tarayıcı Otomasyonu

Claude Code ve Cursor gibi otonom ajanlarla frontend geliştirirken en büyük ihtiyaçlarımdan biri, ajanın yazdığı arayüzü tarayıcıda bizzat açıp doğrulamasıydı. İlk başta popüler olan Playwright MCP (Model Context Protocol) sunucularını denedim. Fakat çok geçmeden başıma bela olan bir problemle karşılaştım: Ajan bir butona tıklamak için sayfanın 3000 satırlık devasa accessibility (erişilebilirlik) ağacını context'e yüklüyor, context limitini dolduruyor ve asıl yazması gereken kodu unutuyordu.

Microsoft'un açık kaynak olarak sunduğu microsoft/playwright-cli projesini tam bu noktada keşfettim. Projenin ana felsefesi benim yaşadığım sancıya doğrudan parmak basıyor: 'Kodlama ajanları için CLI + SKILL kombinasyonu, ağır MCP sunucularından katbekat daha token-tasarrufludur.'

CLI ve SKILL Yaklaşımının Bana Sağladığı Faydalar

Kendi web projelerimde iki yöntemi kıyasladığımda gözlemlediğim temel farklar:

  • Context Window Disiplini: Sayfadaki tüm gereksiz DOM düğümlerini context'e basmak yerine sadece hedef selector'ın durumunu veya ekran görüntüsünü almak API maliyetimi en az %60 düşürdü.
  • Standart UNIX Borulama (Piping): Ajan konsol çıktısını doğrudan grep veya jq ile filtreleyip saniyeler içinde karar verebiliyor.
  • Hızlı Görsel Doğrulama: playwright-cli screenshot ile anında PNG alıp arayüzdeki CSS kaymalarını saptayabiliyor.

Kurulum ve Kendi Projelerimde Kullandığım Akış

playwright-cli-quickstart.sh
# Global olarak paketi kuruyoruz
npm install -g @playwright/cli

# Gerekli tarayıcı motorlarını indiriyoruz
npx playwright install --with-deps

# Arka planda localhost'u açıp ekran görüntüsü alma
playwright-cli open https://localhost:3000
playwright-cli screenshot --output ./preview.png

# Belirli bir selector'ın varlığını ve metnini sorgulama
playwright-cli query "#dashboard-header"

Bunu Claude Code projelerime bir skill olarak eklediğimde harika bir döngü yakaladım: Ajan bir bileşende değişiklik yapıyor, ardından 'Localhost'ta arayüzü kontrol ediyorum' diyerek Playwright CLI ile ekran görüntüsü alıp hatasız olduğunu kendi gözleriyle doğruluyor.

← Tüm YazılarAna Sayfa →