Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Antigravity (AGY) CLI, BrowserMCP, Playwright ve Tarayıcı Aracısı ile otomatik kullanıcı arayüzü testi

1. Giriş

Ajan tabanlı yapay zeka devrimi, yazılım geliştirme şeklimizi dönüştürüyor ve tüm süreci inanılmaz derecede havalı, heyecan verici ve erişilebilir hale getiriyor. Daha önce geliştiricilerin tamamlaması aylar süren görevler ve projeler artık ajan tabanlı araçlar kullanılarak tek bir oturumda tamamlanabiliyor.

Bu dönüşümün uygulanabileceği alanlardan biri de web uygulaması testidir. Geleneksel olarak, web uygulamalarını test etmek zahmetli bir iş ve kırılganlığa karşı sürekli bir mücadele olmuştur. Peki bu karmaşıklığı tamamen atlayabilseydiniz? Bir ajana neyi test edeceğini basit ve doğal bir dille söyleyebilseydiniz ve ajanın bunu nasıl yürüteceği konusunda akıl yürütmesine izin verebilseydiniz ne olurdu?

Bu codelab'de, Antigravity CLI'ı aracı becerileri ve BrowserMCP gibi çok formatlı MCP araçlarıyla birlikte nasıl kullanacağımızı ele alacağız. Doğal dil kullanarak otomatik kullanıcı arayüzü testleri oluşturup çalıştırmanın yanı sıra, aracı tabanlı araçların karmaşık görevleri nasıl ele alabileceğini ve geliştirici olarak size nasıl süper güçler verebileceğini göreceksiniz.

Bu codelab, kullanıcı arayüzü otomasyonu ve tarayıcı uzaktan kontrolünün belirli kullanım alanlarına odaklanıyor olsa da asıl önemli olan, temel ilkeler ve bu ilkelerin sunduğu muazzam olasılıklar dünyasıdır. Aracıları yerel CLI'ları ve MCP sunucularını kullanmaya öğreterek, aksi takdirde kendimiz yönetmek için zamanımızın veya uzmanlığımızın olmayacağı karmaşık iş akışlarını temsilcilere devredebiliriz.

Öğrenecekleriniz

Antigravity CLI'nın ne olduğu ve Antigravity ekosistemine nasıl uyum sağladığı.
Model Context Protocol (MCP) nedir ve neden büyük bir yeniliktir?
BrowserMCP, yapay zeka ajanlarının web tarayıcılarını kontrol etmesini nasıl sağlar?
Antigravity CLI'dan otomatik kullanıcı arayüzü testleri çalıştırma
Ajan becerilerini ve avantajlarını anlama
Bir ajana Playwright'ı beceriyle kullanmayı öğretme
Antigravity'nin yerleşik tarayıcı aracısını anlama.
Tarayıcı kontrolüyle ilgili diğer kullanım alanları.

Yapacaklarınız

Bu codelab'de Antigravity CLI, MCP araçları, ajan becerileri ve bir React demo uygulaması kullanılır.

Bu kurstan sonra:

Geliştirme ortamınızı kurun.
Test edilmesi gereken bir demo uygulamayı keşfedin.
BrowserMCP üzerinden uygulamayla etkileşime geçmek için Antigravity CLI'yı kullanın.
Aracınıza, Playwright'ı aracı becerisiyle nasıl kullanacağını öğretin.

2. Antigravity ekosistemi

Google, Mayıs 2026'da yeni Antigravity paketini kullanıma sundu. Bu, Antigravity'de yapılan büyük bir revizyondu ve dört ürüne ayrıldı:

Antigravity 2.0, artık masaüstünüzdeki özel, aracı öncelikli "oluşturucu" ortamıdır. Özellikle, kendisi bir IDE içermez. Bunun yerine, artık yalnızca aracı yöneticisiyle etkileşim kuruyoruz. Bu yüzey, kodla ilgilenmeden aracıları kullanarak "fikirden ürüne" çağını başlatmayı amaçlıyor. Kodlama geçmişi olmayan birçok oluşturucu bu özelliği çok sevecek.
Antigravity IDE, Antigravity ajan düzeneği tarafından desteklenen, VS Code'a benzer bir kodlama ortamı sunar. Burada, aracı destekli geliştirme yapabilir ve kodu her zaman görebiliriz. Kod yazanlar kendilerini burada evlerinde gibi hisseder.
Antigravity SDK, Antigravity'yi destekleyen koşum ve araçları sağlar ancak Python Agent SDK olarak sunulur. google.antigravity'den içe aktararak Antigravity'nin özelliklerinden programatik olarak yararlanabiliriz.
Antigravity CLI, son derece etkileyici Gemini CLI'ın bir sonraki evrimidir. Gemini modelleriyle etkileşim kurmak için hâlâ terminal öncelikli bir ortamdır. Ancak yeni Antigravity CLI, Go'da oluşturulmuştur ve bu farkı hissedebilirsiniz. Hem başlatma sırasında hem de genel kullanımda Gemini CLI'dan çok daha hızlıdır. Antigravity 2.0 ve IDE ile aynı aracı "kullanır" ve bu, Antigravity paketinde ortak ayarlar ve yapılandırmaya olanak tanır.

Bu laboratuvarda Antigravity CLI'nin kullanımı üzerinde durulsa da laboratuvardaki her şey Agy IDE veya Agy 2.0 ile de yapılabilir.

3. Ön koşullar

İşin eğlenceli kısmına geçmeden önce ihtiyacınız olan her şeye sahip olduğunuzdan emin olalım.

Araçlar

Bu laboratuvarda, aşağıdakilere sahip olduğunuz varsayılır:

Chrome tarayıcı
Node.js
Antigravity CLI
Git

Antigravity CLI'ı kullanmak için Google ile kimliğinizi doğrulamanız gerekir. agy'ı ilk kez başlattığınızda varsayılan web tarayıcınız üzerinden Google ile Oturum Açma işlemi otomatik olarak istenir. Bu seçenekte, Gemini kullanımına yönelik cömert bir ücretsiz kota sunulur ve Google Cloud projesi gerekmez. Gemini API anahtarınız veya Google Cloud projeniz varsa bunu da yapılandırabilirsiniz.

Talimatlarda Linux (veya WSL) ya da macOS ortamında çalıştığınız varsayılır. Windows kullanıyorsanız (benim gibi) WSL'yi kullanarak takip edebilirsiniz.

(BrowserMCP'nin yalnızca aynı makinede çalışan yerel bir tarayıcıya bağlanacağından Google Cloud Shell'de çalışmayacağını unutmayın.)

Geliştirme Ortamını Kurma

GitHub'da bir demo deposu oluşturdum. Kullanıcı arayüzü testimizde kullanabileceğimiz örnek bir uygulama içerir. Yerel terminalinizde aşağıdaki komutu çalıştırarak depoyu klonlayın:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

Ortamı kurup demo uygulamasını başlatmanızı kolaylaştırmak için bir Makefile vardır. Ortamımızı başlatmak için bu dosyayı çalıştıralım:

make install

# Or if you don't have make
npm install --prefix demo-app

4. Demo uygulamamız

Bugün test ettiğimiz uygulama, güvenlik telemetrisini yönetmek için kullanılan fütüristik ve koyu temalı bir kontrol paneli olan The Dazbo Omni-Dash. (Evet, sezgisel kodlama kullanıldı.)

Neden bu uygulama?

Aşağıdaki özelliklerle gerçekçi bir test yüzeyi sağlamak için tasarlanmıştır:

Sahte Kimlik Doğrulama: Belirli kimlik bilgilerinin gerekli olduğu bir giriş akışı.
Dinamik İçerik: Gerçek zamanlı verileri simüle eden telemetri kartları ve güvenlik günlükleri.
Etkileşimli Durumlar: Kullanıcı işlemine göre değişen gezinme menüleri ve form girişleri.
Modern Teknoloji: Hızlı ve duyarlı bir deneyim için React ve Vite ile geliştirilmiştir.

Uygulamayı başlatma

Uygulamayı başlatmak için şu komutu çalıştırmanız yeterlidir:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

Geliştirme sunucusu çok hızlı bir şekilde başlatılmalı ve uygulama http://localhost:5173 adresinde kullanılabilir olmalıdır.

Uygulamayı tarayıcımızda açmak için bağlantıyı tıklamamız yeterlidir. Bu işlemi terminalinizde çalıştırmanız yeterlidir. Sonraki terminal komutlarını ayrı bir terminal oturumunda gerçekleştireceğiz.

5. Kullanıcı Arayüzü Testinin Zorlukları

Geleneksel kullanıcı arayüzü testinin doğru şekilde yapılması ve sürdürülmesi oldukça zordur. Sık karşılaşılan sorunlar şunlardır:

Yüksek öğrenme eğrisi: Geliştiricilerin, yalnızca temel bir etkileşimi otomatikleştirmek için alana özgü karmaşık dilleri ve çerçeveye özgü tuhaflıkları (ör. Selenium veya Playwright) öğrenmek için çok fazla zaman harcaması gerekir.
Kırılgan Seçiciler ve Otomasyon: Geleneksel komut dosyaları, katı DOM yapılarına (ör. div > div > button) veya belirli metin etiketlerine dayanır. "Oturumu kapat" düğmesini "Oturumu sonlandır" olarak yeniden adlandırırsanız ne olur? Düğmeyi tamamen farklı bir menüye mi taşımak istiyorsunuz? Veya HTML'nizin yapısını mı değiştirmek istiyorsunuz? Geleneksel test araçları bu işlemleri yaptığınızda bozulur ve sürekli olarak komut dosyası bakımı yapmanız gerekir.
Testlerdeki "güvenilirlik sorunları": Zamanlama sorunları, yarış koşulları veya yavaş yüklenen öğeler nedeniyle bir dakika başarılı olup bir dakika başarısız olan testler.
Ortam Eşliği: Uygulama durumlarını kopyalamanın zorluğu ve test verilerini temizlemenin getirdiği ek yük.

Amaç ve Uygulama

Bu sorunları çözmek için uygulamadan ziyade amaca odaklanan bir test yöntemine ihtiyacımız var.

Ajan tabanlı yapay zeka araçlarından yararlanarak, küçük kullanıcı arayüzü ince ayarlarından ve yapısal değişikliklerden tamamen yalıtılmış, tekrarlanabilir otomasyonlar oluşturabiliriz. Ajan, adları, etiketleri veya nesnelerin tam hiyerarşisini sabit kodlamak yerine, kullanıcının doğal dil niyetine göre işlemleri yürütür. Bir düğme taşınırsa veya etiketi biraz değişirse ajanın çok formatlı özellikleri, öğeyi bulmasına ve görevi başarıyla tamamlamasına olanak tanır.

6. MCP to the Rescue

Model Context Protocol (MCP), yapay zeka modellerinin ve ajanlarının harici araçlar, API'ler ve verilerle etkileşime girmesine olanak tanıyan açık bir standarttır. Bu işlevi, modellerin ve ajanların erişebildiği araçları bulup çalıştırmasına olanak tanıyan evrensel bir adaptör olarak düşünebilirsiniz.

Geleneksel olarak, büyük dil modellerinin (LLM) harici veriler ve araçlarla entegre edilmesi, geliştiricilerin her yeni veri kaynağı için özel, sabit kodlu API bağlantıları yazmasını gerektiriyordu. Bu durum, her yeni model ve aracın bakım yükünü katladığı sürdürülebilir olmayan bir "M x N" entegrasyon sorununa yol açıyordu. Model Bağlam Protokolü (MCP), bu özellikleri düzenlemek için belirli bir kod yazma ihtiyacını ortadan kaldırarak bu sorunu çözer. Geliştiriciler, karmaşık yürütme iş akışlarını açıkça kodlamak yerine, kullanıcının doğal dil isteklerini yorumlamak ve hangi araçların kullanılacağı konusunda anında dinamik olarak akıl yürütmek için LLM'den yararlanabilir.

Kullanıcı doğal dil komutu verdiğinde (ör. "localhost:5173'e git, "admin" olarak giriş yap ve Gönder düğmesini tıkla"), LLM mevcut özellikleri keşfeder ve belirli bir aracı çağırmak için yapılandırılmış bir istek oluşturur. MCP istemcisi, bu isteği belirlenen MCP sunucusuna yönlendirerek çevirmen görevi görür. MCP sunucusu, işlemi yürütür veya verileri getirip bağlamı modele döndürür. Bu sayede yapay zeka, geliştiricinin belirli yürütme yolunu sabit kodlamasına gerek kalmadan bağımsız olarak hareket edebilir.

MCP, genellikle "yapay zeka uygulamaları için USB-C" olarak tanımlanan evrensel bir standart oluşturduğundan hazır yeniden kullanılabilirlik olanağı sunar. Geliştiriciler MCP sunucusunu bir kez oluşturabilir ve MCP ile uyumlu herhangi bir yapay zeka ana makinesi anında bu sunucuya bağlanabilir. Böylece M x N entegrasyon sorunu ortadan kalkar. Artık her platform için özel API köprüleri oluşturmanız gerekmiyor. Bunun yerine, GitHub, Slack, veritabanları gibi yaygın hizmetler için önceden oluşturulmuş açık kaynaklı MCP sunucularının ekosisteminden yararlanabilir ve bunları doğrudan aracılı iş akışlarınıza bağlayabilirsiniz. Bu modüler, tak ve çalıştır mimari, daha sonra LLM sağlayıcıları arasında geçiş yapmanız veya araçlarınızı yükseltmeniz durumunda temel entegrasyon altyapınızın tamamen değişmeden kalmasını sağlar.

7. BrowserMCP ile otomasyon

BrowserMCP nedir?

Bugün ilk olarak bu araçla çalışacağız. BrowserMCP, yapay zeka ajanlarına web tarayıcısıyla etkileşim kurmak için gereken "gözleri" ve "elleri" veren bir MCP sunucusudur. Kısacası, tarayıcıyla insan etkileşimini taklit eder. Açık kaynaklıdır ve GitHub deposunu buradan inceleyebilirsiniz. Ana BrowserMCP belgelerini burada bulabilirsiniz.

Özelliklerinden bazıları şunlardır:

URL'lere gidebilir.
DOM'u inceleyebilir.
Düğmeleri tıklayabilir ve formlara metin yazabilir.
Sürükleyip bırakma işlemi yapabilir.
Tarayıcı konsolu günlüklerini okuyabilir.
Hızlıdır: Otomasyon, makinenizde yerel olarak gerçekleşir.

Tarayıcı MCP'sini yükleme

BrowserMCP'yi kullanmak için iki şey yapmanız gerekir:

BrowserMCP uzantısını Chrome'a (veya Chromium tabanlı herhangi bir tarayıcıya) yükleyin.
Antigravity yapılandırmanızda MCP sunucusunu manuel olarak yapılandırın.

Uzantıyı yüklemek için buradaki talimatları uygulamanız yeterlidir. Bu işlem yalnızca birkaç saniye sürer. Uzantı yüklendikten sonra, mevcut sekmenizin temsilciniz tarafından kontrol edilmesine izin vermek için uzantıda "Bağlan"ı tıklarsınız. (Elbette, mevcut sekmenin demo uygulamasının çalıştığı sekme olmasını istersiniz.)

Ardından, Antigravity'de gerçek MCP sunucusunu yapılandırırız. Bunu, genel mcp_config.json dosyamıza browsermcp sunucu tanımını ekleyerek yaparız.

~/.gemini/config/mcp_config.json dosyasını oluşturun veya düzenleyin ve aşağıdaki yapılandırmayı ekleyin:

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

Antigravity ekosisteminde MCP sunucularını ve becerilerini ayarlama hakkında ayrıntılı bilgi için şu kaynaklara bakın:

BrowserMCP ile test etme

Şimdi sıra sihirde. Öncelikle yeni bir terminal oturumunda Antigravity CLI'yi (agy'yi çalıştırarak) başlatalım. (Demo uygulamasının ilk terminal oturumumuzda çalıştığını hatırlayın.) Etkileşimli TUI'de /mcp yazarak etkin araçların listesini doğrulayın ve browsermcp simgesinin kullanılabilir olduğundan emin olun.

Daha önce demo uygulamasını başlatmadıysanız şimdi başlatın:

make dev

Henüz yapmadıysanız uygulamayı Chrome tarayıcınızda açmanız ve bu sekmede BrowserMCP uzantısını bağlamanız gerekir. run komutundaki bağlantıyı takip edin. Ardından BrowserMCP uzantı simgesini ve "Bağlan"ı tıklayın.

Şimdi test çalıştırmak için Agy CLI'yı kullanabiliriz. Bu istemi kopyalayıp CLI'ya yapıştırın:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

CLI, önce demo uygulamasının belirtilen bağlantı noktasında çalışıp çalışmadığını kontrol edebilir. Ardından, yapmayı planladığı araç işlemlerini onaylamanızı ister.

KSA'nın bu oturum için tüm BrowserMCP araçlarını çalıştırmasına izin verin. Ardından tarayıcıya geri dönün ve otomatik etkileşimlerin gerçekleşmesini izleyin.

Yukarıdaki istemle ilgili dikkat edilmesi gereken birkaç nokta:

Uygulamada zaten oturum açılmışsa önce aracıya oturumu kapatmasını söyleriz. Aracıya "Çıkış Ağ Geçidi" gibi belirli bir metni tıklamasını söylememize gerek olmadığını unutmayın. Aracı, neyi tıklayacağını anlayacak kadar akıllıdır.
Aracı, giriş yapıp ana sayfayı oluşturduktan sonra telemetri bilgilerini yakalar. Yine, aracıya belirli kutulara bakmasını veya belirli kelimeleri eşleştirmesini söylememiz gerekmez. Bu nedenle, daha sonra bu sayfada gösterilen bilgileri genişletirsek veya değiştirirsek bu istem çalışmaya devam eder ve çıkış, Markdown tablomuzda yakalanmaya devam eder.

Müthiş, değil mi?

Şimdilik BrowserMCP ile işimiz bitti. Bu nedenle, tarayıcınızda bağlantısını kaldırın.

8. Beceri ve Playwright ile otomasyon

BrowserMCP'nin sınırlamaları

BrowserMCP harika bir araç olsa da bazı sınırlamaları vardır. Örneğin:

Tarayıcı MCP uzantısının bağlı olduğu mevcut bir tarayıcı oturumu gerektirir. (Yeni oturumlar oluşturmaz.)
Chromium olmayan tarayıcılar desteklenmez.
MCP sunucusunun çalıştığı makinede ayrı bir tarayıcı sürecinin çalıştırılması gerekir.
Yerel dosya sistemiyle çalışamaz. Örneğin, ekran görüntülerinin kanıtı olarak yerel dosyalar oluşturamaz veya web uygulamasından indirilebilir PDF gibi dosyaları indirip depolayamaz.
Belirleyici değildir. İstediğiniz işlemleri yapmaya çalışır ancak beklenmedik bir pop-up gibi yerel durumlar etkileşimi bozabilir.
"Başsız" (headless) çalışmayı desteklemez. Yani gerçek bir tarayıcı penceresi olmadan CI/CD işlem hattında çalışamaz.

Playwright

Playwright çok daha gelişmiş bir araçtır. Bu, iyi bilinen bir açık kaynak tarayıcı otomasyonu ve test çerçevesidir. BrowserMCP'nin yapamadığı birçok şeyi yapabilir. Örneğin, yukarıda bahsettiğim tüm maddeler.

Karmaşık, güvenilir ve tekrarlanabilir test senaryoları çalıştırmak için çok daha uygundur. Bu özellik, özellikle uzun süren oturumlarla çalışmak veya birden fazla bağımsız oturumu paralel olarak çalıştırmak için uygundur.

Ancak bu ek özellikler, öğrenme sürecini çok daha zorlu hale getirir.

Beceriler

Neyse ki Playwright'ı doğrudan kullanmayı öğrenmemize gerek yok. Bunun yerine bir aracı becerisi kullanabiliriz.

Peki, temsilci becerisi tam olarak nedir? Bunu, belirli bir işlemi yapması gerektiğinde yapay zeka aracınıza verebileceğiniz, sıkıca paketlenmiş bir alan uzmanlığı demeti olarak düşünebilirsiniz. Talimatlar, en iyi uygulamalar ve bazen belirli bir göreve göre uyarlanmış yardımcı komut dosyaları içerir.

İşin gerçekten akıllıca kısmı ise kademeli açıklama. Her türlü API dokümanını ve test çerçevesi kuralını, LLM'nin ilk sistem istemine yerleştirmek yerine (bu, bağlam pencerenizi tüketir ve jetonları çok hızlı bir şekilde harcar) aracı, beceriyi yalnızca gerçekten ihtiyaç duyduğunda okur. Temel bağlamı yalın ve basit tutarak ayrıntılı "nasıl yapılır" talimatlarını tam zamanında getirir. Evet, bir beceri, işi tamamlamak için belirli MCP sunucularından nasıl yararlanılacağıyla ilgili talimatları kesinlikle içerebilir.

Bunu Matrix'teki sahneye benzetebiliriz: Ajan bir soruna bakar, Playwright'ı bilmesi gerektiğini anlar, beceriyi indirir ve birden "Kung fu biliyorum" der. Boom mikrofon. Anında uzman.

Beceriler hakkında daha fazla bilgi edinmek isterseniz aşağıdaki kaynaklara göz atın:

Neden Playwright için beceriler idealdir?

Burada bir beceri kullanmak harika bir seçimdir. Playwright inanılmaz derecede güçlü olsa da söz dizimi zor olabilir. Ajanımıza Playwright becerisi kazandırdığımızda LLM'mizin eski söz dizimini halüsinasyon olarak görmesi veya kırılgan seçiciler yazması konusunda endişelenmemize gerek kalmaz. Playwright'ı doğru şekilde kullanma konusunda derlenmiş ve yetkili bir kılavuz sunuyoruz.

Playwright CLI ve ilgili beceriyi kullanacağım.

Bu yaklaşımla Playwright KSA'yı yerel olarak yüklüyoruz ve ardından aracımıza bu KSA'dan yararlanması için gereken bilgileri veriyoruz. Herhangi bir karışıklığı önlemek için: Playwright MCP sunucusu yüklemiyorum.

Yükleme

Öncelikle açık kaynaklı Microsoft Playwright CLI'yı yükleyelim. Henüz yapmadıysanız /quit`` yazarak etkileşimli KSA'dan çıkın. Ardından terminalinizde:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Şimdi beceriyi ekleyelim. Bu komut, beceri alt klasörünü doğrudan GitHub'dan Gemini becerileri klasörümüze indirir:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Şimdi bunu test edebiliriz.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Bu işlem, belirtilen URL'de açılan bir tarayıcı oturumu oluşturur.

Ayrıca Gemini'ın Playwright'ı "headed" modda (yani görünür bir kullanıcı arayüzüyle) kullanabilmesini istiyorum. Ancak beceri, Gemini'a bunu nasıl yapacağını söylemiyor. Bu nedenle, Core bölümündeki ~/.gemini/skills/playwright-cli/SKILL.md dosyasına şu satırları ekledim:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Playwright ile test etme

Daha önce olduğu gibi, uygulama çalışmıyorsa başlatmamız gerekir. Bu işlemi ilk terminal oturumundan yapın:

make dev

Ardından, diğer terminal oturumunda, aracının hangi araçları kullanacağı konusunda kafası karışmaması için BrowserMCP'yi geçici olarak devre dışı bırakalım. Antigravity CLI'yı yeniden başlatın (agy). browsermcp sunucusunu doğrudan TUI üzerinden geçici olarak devre dışı bırakabiliriz:

MCP yönetim panelini açmak için istem kutusuna /mcp yazın.
browsermcp simgesini seçmek için ok tuşlarını (yukarı/aşağı) kullanın ve Enter/Return tuşuna basın.
Devre dışı bırak'ı seçmek için sağa gidin ve kapatmak için Enter tuşuna basın.

Şimdi de aracıdan Playwright ile uygulamamıza gitmesini isteyeceğiz. Ancak BrowserMCP'den farklı olarak önce tarayıcıyı açmamız gerekmez. Playwright, yerel bir işlemle bunu bizim için yapar.

Bu istemi Agy CLI'ye girin:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Her zaman olduğu gibi, CLI herhangi bir aracı çalıştırmadan önce izin ister.)

Burada ne değişti?

Önce tarayıcıyı başlatmamız gerekmiyordu.
Tarayıcı uzantısını başlatıp bağlamamız gerekmedi.
Temsilciye önce oturumu kapatmasını söylememize gerek yoktur. Test, "temiz" bir oturumdan başlatılır.
Ekran görüntüleri alıp bunları yerel dosya olarak kaydedebiliriz.

Kısa süre sonra çıkış klasöründe bir dashboard.png dosyası görürsünüz.

Agy CLI'da yürütülen araç çağrılarını görürsünüz ancak tarayıcı kullanıcı arayüzünü görmezsiniz. Bunun nedeni, Playwright'ın varsayılan olarak "gözetimsiz modda" çalışmasıdır.

Ancak bu değiştirilmiş istemle yeniden çalıştırırsanız kullanıcı arayüzünü de görebilirsiniz:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Agy CLI çıkışı şu şekilde görünmelidir:

Ne kadar harika değil mi?

9. Antigravity'nin Yerleşik Tarayıcı Aracısı

Google Antigravity, Playwright CLI gibi ayrı bir araç yüklemenizi gerektirmeden tarayıcı otomasyonu sağlayan kendi yerleşik tarayıcı aracısıyla ( Tarayıcı Alt Aracısı) birlikte gelir.

İşleyiş şekli

Tarayıcınızı kontrol etmek için yerleşik tarayıcı aracısı doğrudan Chrome Geliştirici Araçları Protokolü (CDP) üzerinden çalışır. Bu sayede, Antigravity 2.0 ve IDE'de tarayıcı uzantılarına veya ara eklentilere gerek kalmaz.

Antigravity başlatıldığında, WebSocket bağlantısı üzerinden yerel bir hata ayıklama bağlantı noktası aracılığıyla Chrome örneğinize bağlanır. Aracıdan gelen üst düzey talimatlar, doğrudan şu işlemleri yapan alt düzey CDP komutlarına çevrilir:

Sayfa DOM'unu değiştirme (ör. öğeleri tıklama veya metin girme)
Tarayıcı durumunu kontrol edin ve gezinmeyi tetikleyin.
Gerçek zamanlı kareler ve görsel veriler yakalama.

Alt aracı, doğrudan CDP kontrolünü görsel ve çok formatlı analizle birleştirerek üst düzey hedefinizi (ör. "Kontrol panelinde doğru telemetri değerlerinin gösterildiğini doğrulayın") alır, hangi işlemlerin gerekli olduğunu belirlemek için sayfayı görsel olarak analiz eder ve bu işlemleri kendisi yürütür. Ayrıca, test yürütme işleminin görsel kanıtı olarak kullanılmak üzere videoları otomatik olarak kaydeder ve işlemlerinin ekran görüntülerini alıp doğrudan çalışma alanınıza Artifacts (Yapay Öğeler) olarak kaydeder.

Aracın Kullanılabilirliği

Yerleşik tarayıcı aracısı, terminal öncelikli Antigravity CLI'da (Agy CLI) henüz desteklenmemektedir. Ancak, Antigravity IDE ve Antigravity 2.0'da bugün kullanabilirsiniz. Tarayıcı aracısı desteğinin gelecekteki bir sürümde Agy CLI'ya ekleneceğini umuyoruz.

WSL kullanıcıları için not: Tarayıcı aracısının WSL altındaki Antigravity'de çalışmasını sağlamak artık çok daha kolay. Karmaşık ağ yönlendirme ve bağlantı noktası yönlendirme ile uğraşmak yerine, WSL yapılandırmanızda "yansıtılmış" ağ modunu etkinleştirmeniz yeterlidir. Adım adım eksiksiz bir açıklama için Resolving WSL Friction with Google Antigravity: The Agy 2.0 and Agy IDE Edition (Google Antigravity ile WSL'deki Sorunları Çözme: Agy 2.0 ve Agy IDE Edition) başlıklı kılavuza bakın.

10. Tarayıcı Otomasyonu ile İlgili Diğer Kullanım Alanları

Tarayıcı otomasyonu, yalnızca cuma öğleden sonraki dağıtımdan önce giriş düğmenizin çalıştığından emin olmakla ilgili değildir. Bir LLM'yi doğrudan tarayıcıya bağlayabileceğinizi fark ettiğinizde, kendi geliştirdiğiniz, aracı tabanlı projelerle dolu yepyeni bir dünya açılır.

Kendi yapay zeka aracılarınızı oluşturuyorsanız BrowserMCP veya Playwright CLI gibi araçları kullanarak zorlu görevleri tamamlamanın birkaç yolu aşağıda verilmiştir:

Kişisel Araştırma Asistanı: Aracınızı belirli bir URL'ye yönlendirip bir konuyu araştırmasını istediğinizi ancak sitenin oturum açmayı ve karmaşık menülerde gezinmeyi gerektirdiğini düşünün. Gelecek hafta çalışmayacak özel bir web kazıyıcı yazmak yerine, aracınıza giriş yapmasını, verilere gitmesini ve bunları sizin için özetlemesini söylersiniz.
"Döner Sandalye" Entegratörü: Hepimizin API'leri olmayan eski intranet sistemleri vardır. Örneğin, A sistemindeki verileri manuel olarak kopyalayıp B sistemindeki bir forma yapıştırmanız gereken durumlar. Tarayıcı otomasyonu olan bir aracı, evrensel bir yapıştırıcı gibi davranarak eski sistemin ekranını okuyabilir ve yeni sistemdeki formu doldurabilir.
Otomatik Önceliklendirme ve Düzeltme: İzleme sisteminizden saat 03:00'te kritik (P1) bir uyarı mı aldınız? Aracınız, belirli kontrol paneli URL'sini otomatik olarak açabilir, grafikleri veya günlükleri (çok formatlı görme özelliklerini kullanarak) okuyabilir ve doğrudan Slack kanalınıza bir özet gönderebilir. Böylece, bir olay sırasında değerli dakikalar kazanabilirsiniz.

Bu yaklaşımın avantajı, artık hangi API'lerin kullanılabildiğiyle sınırlı olmamanızdır. Bir kullanıcı tarayıcıda yapabiliyorsa aracınız da yapabilir.

11. Sonuç

Tebrikler! Bir yapay zeka aracına ne yapmasını istediğinizi basit bir İngilizceyle söyleyerek otomatik ve güçlü kullanıcı arayüzü testleri oluşturup çalıştırdınız. Kırılgan CSS seçiciler veya karmaşık kurulum komut dosyaları yok.

Öğrendikleriniz:

Kullanıcı arayüzü testi zor olmak zorunda değil: Kırılgan DOM uygulaması yerine testin amacına odaklanarak bakım yükünü büyük ölçüde azaltabiliriz.
Model Context Protocol (MCP), ajanlarınıza araçlara, verilere ve ortamlara evrensel, tak ve çalıştır erişim imkanı sunar.
BrowserMCP, yerel ve mevcut Chrome oturumlarınıza ajan tabanlı yetenekler eklemek için kullanabileceğiniz inanılmaz bir araçtır.
Beceri ve Playwright CLI, aşamalı açıklama ile desteklenen tekrarlanabilir ve deterministik otomasyon testinde yeni bir seviyeye ulaşmanızı sağlar.
Antigravity's Browser Subagent, kutudan çıkar çıkmaz otonom, çok formatlı gezinme ve yapay nesne kaydı sunarak bu durumu bir adım daha ileriye taşıyor.

Şimdi git ve sıkıcı şeyleri otomatikleştir!

12. Faydalı Bağlantılar

Bugün ele aldığımız araçlar ve kavramlar hakkında daha fazla bilgi edinmek isterseniz aşağıdaki kaynakları inceleyin:

Repo Kodu

The agentic-ui-testing GitHub repo (The agentic-ui-testing GitHub deposu): Bu codelab'i faydalı bulduysanız lütfen depoya yıldız ekleyin.

Temel Araçlar ve Çerçeveler

Temsilci Tabanlı Kavramlar ve Beceriler

Diğer