1. Giriş
Web uygulamalarını test etmek zahmetli bir iş olabilir. Geleneksel kullanıcı arayüzü testi genellikle kırılganlığa karşı sürekli bir mücadele gibi hissedilir. Kendinizi karmaşık komut dosyaları yazarken, kırılgan CSS ve XPath seçicilerini yönetirken ve basit bir kullanıcı akışını doğrulamak için zorlu süreçlerden geçerken buluyorsunuz.
Peki, bir temsilciye doğal dilde neyin test edileceğini söyleyebilseydiniz ve temsilci bunu yapsaydı?
Bu codelab'de, Gemini CLI ve BrowserMCP gibi çok formatlı araçları nasıl kullanacağımızı keşfedeceğiz. Doğal dil kullanarak otomatik kullanıcı arayüzü testleri oluşturmayı ve çalıştırmayı öğreneceksiniz. Bu codelab için kullanıcı arayüzü test çerçeveleri ve araçları hakkında önceden bilgi sahibi olmanız gerekmez.
Öğrenecekleriniz
- Model Context Protocol (MCP) nedir ve neden büyük bir yeniliktir?
- BrowserMCP, yapay zeka aracılarına web tarayıcılarını kontrol etme olanağı nasıl tanır?
- Gemini CLI'dan otomatik kullanıcı arayüzü testleri çalıştırma
- Aracı becerilerini ve avantajlarını anlama
- Bir ajana Playwright'ı beceriyle kullanmayı öğretme
- Google Chrome Geliştirici Araçları MCP'sini ve becerisini birlikte kullanma
- Antigravity Browser Subagent'a kısa bir bakış.
- Tarayıcı kontrolüyle ilgili diğer kullanım alanları.
Yapacaklarınız
- Geliştirme ortamınızı kurun.
- Test edilmesi gereken bir demo uygulamayı keşfedin.
- BrowserMCP aracılığıyla uygulamayla etkileşim kurmak için Gemini CLI'ı kullanın.
- Ajanınıza, Playwright'ı ajan becerisiyle kullanmayı öğretin.
2. Ön koşullar
İşin eğlenceli kısmına geçmeden önce ihtiyacınız olan her şeye sahip olduğunuzdan emin olalım.
Bu codelab'de Gemini CLI, MCP araçları, aracı becerileri ve bir React demo uygulaması kullanılır.
Araçlar
Bu laboratuvarda, aşağıdakilere sahip olduğunuz varsayılır:
- Chrome tarayıcı
- Nodejs
- Gemini CLI
- Git
Gemini KSA'yı kullanmak için Google ile kimliğinizi doğrulamanız gerekir. Bunu yapmanın birkaç yolu vardır ancak "Google ile oturum aç" seçeneğini kullanmanızı öneririz. Bu seçenekte, Gemini kullanımı için cömert bir ücretsiz kota sunulur ve Google Cloud projesi gerekmez. Bu seçeneği codelab'i takip ederken kullanırsanız herhangi bir ücret alınmaz. (Zaten bir Gemini API anahtarınız varsa bunu kullanabilirsiniz.)
Talimatlarda Linux (veya WSL) ya da macOS ortamında çalıştığınız varsayılmaktadır. Windows kullanıyorsanız (benim gibi) WSL'yi kullanarak takip edebilirsiniz.
(
BrowserMCP, Google Cloud Shell'de çalışmaz
, çünkü yalnızca aynı makinede çalışan yerel bir tarayıcıya bağlanır.)
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
3. 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ğıdakilerle 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.
4. Kullanıcı Arayüzü Testinin Zorluğu
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:
- Test "güvenilmezliği": 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.
- Kırılgan Seçiciler: En ufak kullanıcı arayüzü değişikliğinde bozulan belirli DOM yapılarına (ör. div > div > button) güvenmek, sürekli olarak komut dosyası bakımı yapılmasına neden olur.
- Yüksek öğrenme eğrisi: Geliştiricilerin, yalnızca temel bir tıklamayı otomatikleştirmek için karmaşık alana özgü dilleri ve çerçeveye özgü tuhaflıkları (Cypress, Selenium, Playwright) öğrenmesini gerektirir.
- Ortam Eşliği: Uygulama durumlarını kopyalamanın zorluğu ve test verilerini temizlemenin ek yüküyle mücadele etme.
Uygulamadan ziyade amaca odaklanan bir test yöntemine ihtiyacımız var.
5. MCP to the Rescue
Model Context Protocol (MCP), yapay zeka modellerinin ve ajanlarının harici araçlar, API'ler ve verilerle etkileşim kurmasına olanak tanıyan açık bir standarttır. Bunu, modellerin ve aracıları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 entegrasyonu, 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'ye güvenebilir.
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, evrensel bir standart oluşturduğu için (genellikle "yapay zeka uygulamaları için USB-C" olarak tanımlanır) büyük bir hazır yeniden kullanılabilirlik sağlar. Geliştiriciler MCP sunucusunu bir kez oluşturabilir ve MCP ile uyumlu tüm yapay zeka sunucuları anında bağlanarak M x N entegrasyon sorununu ortadan kaldırabilir. 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 yapay zeka 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.
6. 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 ihtiyaç duyduğu "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 buradan inceleyin.
Ö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.
- Ajanınız için MCP sunucusunu 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, gerçek BrowserMCP sunucusunu istemcinize eklememiz gerekir. Gemini CLI'da bu işlem çok kolaydır. Uzantıyı yüklemeniz yeterlidir:
gemini extensions install https://github.com/derailed-dash/browsermcp-ext
BrowserMCP ile test etme
Şimdi sihirli kısma geçelim. Öncelikle yeni bir terminal oturumunda Gemini CLI'yı (gemini komutunu çalıştırarak) başlatalım. (İlk terminal oturumumuzda demo uygulamasının çalıştığını hatırlayın.) Gemini CLI'da, düzgün şekilde yüklendiğini kontrol etmek için /mcp komutunu çalıştırın. Aşağıdaki gibi bir araç listesi görürsünüz:
Daha önce demo uygulamasını başlatmadıysanız şimdi başlatın:
make dev
Uygulamayı Chrome tarayıcımızda açıp bu sekmede BrowserMCP uzantısını bağlamamız gerekir. run komutundaki bağlantıyı takip edin. Ardından BrowserMCP uzantı simgesini ve "Bağlan"ı tıklayın.
Artık test çalıştırmak için Gemini CLI'ı kullanabiliriz. Bu istemi kopyalayıp Gemini CLI'nize 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.
Gemini 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:
Gemini CLI'ın bu oturumda 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 oturum zaten açık durumdaysa temsilciye oturumu kapatmasını söyleyerek başlarız. Acente'ye "Çıkış Ağ Geçidi" gibi belirli bir metni tıklamasını söylememize gerek olmadığını unutmayın. Tıklanacak yeri belirleyecek kadar akıllıdır.
- Ajan, giriş yapıp ana sayfayı oluşturduktan sonra telemetri bilgilerini yakalar. Yine, aracıya belirli kutucuklara bakmasını veya belirli kelimeleri eşleştirmesini söylememiz gerekmiyor. 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ıyı kaldır'ı tıklayın.
7. 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ı için 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.
- "Gözetimsiz" çalışmayı desteklemez. Yani gerçek bir tarayıcı penceresi olmadan CI/CD ardışık düzeninde ç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. Ayrıca, uzun süren oturumlarla çalışmak veya birden fazla bağımsız oturumu paralel olarak çalıştırmak için özellikle uygundur.
Ancak bu ek özellikler, öğrenme sürecini çok daha zorlu hale getirir.
Beceriler
Neyse ki Playwright'ı doğrudan kullanmayı öğrenmemiz gerekmiyor. Bunun yerine bir temsilci 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ığı paketi olarak düşünebilirsiniz. Talimatlar, en iyi uygulamalar ve bazen de belirli bir göreve göre uyarlanmış yardımcı komut dosyaları içerir.
İşte asıl akıllıca olan kısım: aşamalı 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ı kısa ve öz tutar, ayrıntılı "nasıl yapılır" bilgilerini tam zamanında getirir. Evet, bir beceri, işin tamamlanması için belirli MCP sunucularından nasıl yararlanılacağıyla ilgili talimatları içerebilir.
Bunu Matrix'teki sahneye benzetebiliriz: Ajan bir soruna bakar, Playwright'ı bilmesi gerektiğini fark eder, beceriyi indirir ve aniden "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:
- Eğitim : Google Antigravity Becerilerini Kullanmaya Başlama
- Codelab: Google Antigravity Becerileri Oluşturma
Neden Playwright için beceriler idealdir?
Burada bir beceri kullanmak harika bir seçenektir. Playwright inanılmaz derecede güçlü olsa da söz dizimi zor olabilir. Ajanı Playwright becerisiyle donattığımızda LLM'mizin eski söz dizimiyle halüsinasyon üretmesi 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'yı 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. Kafaları karıştırmamak için: Herhangi bir Playwright MCP sunucusu yüklemiyorum.
Yükleme
Öncelikle açık kaynaklı Microsoft Playwright CLI'yi yükleyelim. Henüz yapmadıysanız /quit`` yazarak Gemini CLI'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 beceri 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. Gemini CLI'yı yeniden başlatın ve şu komutu çalıştırın:
/mcp disable browsermcp
Şimdi Gemini'dan Playwright ile uygulamamıza gitmesini isteyeceğiz. Ancak BrowserMCP'den farklı olarak önce tarayıcıyı başlatmamız gerekmez. Playwright, yerel bir işlemle bunu bizim için yapar.
Bu istemi Gemini CLI'a 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.
(Gemini CLI, her zaman olduğu gibi, herhangi bir aracı çalıştırmadan önce izin ister.)
Burada ne gibi farklılıklar var?
- Önce tarayıcıyı başlatmamız gerekmiyordu.
- Tarayıcı uzantısını başlatıp bağlamamız gerekmedi.
- Ajanın ö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 dashboard.png dosyasını output klasöründe görürsünüz.
Araç çağrılarının Gemini KSA'da yürütüldüğünü ancak tarayıcı kullanıcı arayüzünü görmeyeceğinizi unutmayın. 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.
Kısa süre sonra Gemini CLI çıkışı şu şekilde görünür:
Ne kadar harika değil mi?
8. Chrome Geliştirici Araçları MCP'si de Var!
Chrome Geliştirici Araçları, Chrome tarayıcıda yerleşik olarak bulunan ve web geliştirme ile hata ayıklama için tasarlanmış bir dizi web geliştirici aracıdır. Uzun süredir kullanılıyor. Chrome'da Diğer Araçlar -> Geliştirici Araçları'nı açtığınızda etkileşimde bulunabileceğiniz konsol.
Ancak artık kendi MCP sunucusuna sahip. Bu sunucu, geçen yıl Gemini CLI'dan tarayıcı otomasyonu düşünülürken mevcut değildi. Ancak artık tarayıcınıza herhangi bir şey yüklemeden ve yerel bir CLI yüklemeden BrowserMCP ile yapabileceğiniz her şeyi ve Playwright ile yapabileceğiniz çoğu şeyi yapabilirsiniz.
Hemen deneyelim.
Şu anda Google Cloud Shell'de çalıştığı doğrulanmıştır. Bu nedenle, bu bölüm için Google Cloud Console'da Google Cloud Shell'i kullanalım.
Konsolu açın ve bir Cloud Shell oturumu başlatın. Buradan:
# Clone the sample app - like we did before git clone https://github.com/derailed-dash/agentic-ui-testing cd agentic-ui-testing # Build the application - like we did before make install # Install the Chrome DevTools MCP server Gemini CLI Extension gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp
Şimdi Cloud Shell'e bir Chrome yürütülebilir dosyası yüklememiz gerekiyor:
# Get the latest executable for Ubuntu wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb # Install it sudo apt install ./google-chrome-stable_current_amd64.deb -y # Check it and get the executable path which google-chrome # Cleanup rm google-chrome-stable_current_amd64.deb
Son bir adım kaldı: Chrome çalıştırılabilir dosyasının nerede bulunacağını Chrome Geliştirme Araçları MCP sunucusuna bildirmemiz gerekiyor. Bunu, MCP sunucusu yapılandırmasında executable-path seçeneğini ayarlayıp headless yaparak gerçekleştirebiliriz. Bunu, ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json dosyasını düzenleyerek yaparız:
{
"name": "chrome-devtools-mcp",
"version": "latest",
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--executable-path=/usr/bin/google-chrome",
"--headless"
]
}
}
}
Mükemmel! Artık hazırsınız. Cloud Shell'den gemini'ı başlatın ve daha önce olduğu gibi /mcp list komutunu kullanarak MCP sunucusunun çalıştığını kontrol edin.
Son olarak, istemle test etmeye hazırız.
İşlemi biraz farklı bir şekilde yapalım. Bu kez, Gemini KSA'ya demo uygulamasını gerçekten başlatmasını ve uygulamaya bağlanmasını söyleyeceğiz:
Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at the exposed localhost URL. 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 zamanki gibi, MCP sunucusunun çalışmasına izin vermeniz istenir. Ancak beceri etkinleştirmeye çalıştığını da fark edeceksiniz. Evet, bu uzantı hem MCP sunucusunu hem de ajana MCP sunucusunu en iyi şekilde nasıl kullanacağı konusunda yol gösteren bir beceriyi içerir. Güzel!
Birkaç saniye sonra Gemini CLI, sonuçları tabloda gösterir ve ekran görüntüsünü kaydeder. İyi göründüğünden emin olmak için ekran görüntüsünü Cloud Shell'den indirebilirsiniz.
9. You Can Do This in Antigravity Out of the Box!
Google Antigravity, Playwright CLI'ye benzer özellikler sunan Browser Subagent'ı içerir. Antigravity'de Gemini'a bir URL'yi etkileşimli olarak oluşturmasını istediğinizde bu alt aracı otomatik olarak oluşturur.
Bu alt aracı, üst düzey hedefinizi (ör. "Giriş formunun çalışıp çalışmadığını kontrol et") alır, sayfa düzenini ekran görüntüleri ve DOM aracılığıyla görsel olarak analiz eder, tıklamaları ve tuş vuruşlarını kendisi belirler. Bu araç, web'de bir insan gibi gezinen görsel ve çok formatlı bir yapay zekadır. En iyi tarafı e biliyor musunuz? Yaptığı her şeyin videosunu otomatik olarak kaydeder ve ekran görüntüsünü alır. Bunları, başardıklarının görsel kanıtı olarak doğrudan yerel çalışma alanınıza kaydeder. Antigravity, bu görsel kanıtlara Artifacts (Eserler) adını veriyor.
WSL kullanıcıları için not: Tarayıcı aracısının Antigravity'de çalışmasını sağlamak biraz zahmetlidir. Çalışmasını sağladım ancak bu ortamda alt aracının tutarsız ve güvenilmez olduğunu düşünüyorum. Bu nedenle Playwright CLI'yi çok seviyorum.
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 bozulacak özel bir web kazıyıcı yazmak yerine, aracınıza oturum açmasını, verilere gitmesini ve bunları sizin için özetlemesini söylersiniz.
- "Döner Sandalye" Entegratörü: Hepimizin API'si 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 öncelikli (P1) bir uyarı mı aldınız? Ajanı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 yayınlayabilir. 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 İngilizceyle söyleyerek otomatik ve güçlü kullanıcı arayüzü testleri oluşturup yürüttü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ğildir: 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şimi sağlar.
- BrowserMCP, yerel ve mevcut Chrome oturumlarınıza ajan tabanlı yetenekler kazandırmak için 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'nin 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!
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
- BrowserMCP GitHub deposu
- BrowserMCP Dokümanları
- BrowserMCP Gemini CLI Uzantısı: Bu codelab'i faydalı bulduysanız lütfen depoya yıldız ekleyin.
- Playwright
- Google AI Studio
- Chrome Geliştirici Araçları
- Chrome Geliştirici Araçları MCP
Temsilci Tabanlı Kavramlar ve Beceriler
- Eğitim: Google Antigravity Becerilerini Kullanmaya Başlama
- Codelab: Antigravity Becerilerine Başlangıç
- Dazbo's Original Blog: Creating an Automated UI Test in Seconds (Dazbo's Original Blog: Saniyeler İçinde Otomatik Kullanıcı Arayüzü Testi Oluşturma)
Diğer