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. Karmaşık komut dosyaları yazıyor, kırılgan CSS ve XPath seçicilerini yönetiyor ve basit bir kullanıcı akışını doğrulamak için zorlu adımlar uyguluyorsunuz.
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ı inceleyeceğiz. Doğal dili kullanarak otomatik kullanıcı arayüzü testleri oluşturmayı ve çalıştırmayı öğreneceksiniz. Bu codelab'de 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 aracıya Playwright'ı beceriyle kullanmayı öğretme
- 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'yı kullanın.
- Aracınıza, Playwright'ı nasıl kullanacağını bir aracı becerisiyle öğ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ı
- Gemini CLI (nodejs'e bağlıdır)
- Git
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, Google Cloud Shell'de çalışmaz
, çünkü yalnızca aynı makinede çalışan yerel bir tarayıcıya bağlanır.)
Google Cloud projesi oluşturma
Gemini API anahtarınız varsa bu adımı atlayabilirsiniz.
Aksi takdirde, işlemleri takip etmek için bir Google Cloud projeniz olması gerekir. Herhangi bir Google Cloud hizmeti dağıtmayacağız ancak Gemini API anahtarını ilişkilendirmek için projeye ihtiyacınız var. (Gemini'ı kullanmak için anahtara ihtiyacınız vardır.)
Google Cloud'u kullanıyorsanız buradan yeni bir proje oluşturabilirsiniz. Alternatif olarak, doğrudan Google AI Studio'da Google Cloud projesi oluşturabilirsiniz.
Ücretsiz Gemini API anahtarı oluşturma
Artık Gemini API anahtarınızı Google AI Studio'da oluşturacaksınız. "Get API Key" (API anahtarı al) seçeneğini tıklayın.
Şuna benzer bir şey görürsünüz:
Varsa mevcut anahtarlarınız burada listelenir. Yeni bir anahtar oluşturmak için "API anahtarı oluştur"u da tıklayabilirsiniz.
Burada mevcut bir Google Cloud projesini seçebilir veya yeni bir proje oluşturabilirsiniz. Burada, agentic-ui-demo adlı yeni bir proje oluşturdum:
Bu noktada bir projemiz ve ilişkili Gemini API anahtarımız var. Faturalandırmayı etkinleştirmediğimiz için cömert ücretsiz kotayla sınırlıyız. Ancak daha fazla kota istiyorsanız "Faturalandırmayı ayarla"yı tıklayarak faturalandırmayı etkinleştirebilirsiniz.
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
Ardından, .env.template adlı örnek .env dosyasının bir kopyasını oluşturun. Bu işlemi düzenleyicinizde yapabilir veya şu komutu çalıştırabilirsiniz:
cp .env.template .env
Bu .env dosyasını kendi API anahtarınızla güncelleyin. (Unutmayın: .env dosyanızı API anahtarınız gibi bilgilerle asla işlemeyin.) Bu işlemi yapmanın en kolay yolu, dosyayı düzenleyicinizde açmaktır.
Şimdi ortam değişkenini yükleyelim:
source .env
Demo uygulamasını başlatmak için ortamı kurmanızı kolaylaştırmak amacıyla bir Makefile oluşturdum. Ortamımızı başlatmak için bu dosyayı çalıştıralım:
make install
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ğı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
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 alana özgü karmaşık dilleri ve çerçeveye özgü tuhaflıkları (Cypress, Selenium, Playwright) ustalaşmasını gerektirir.
- Ortam Eşliği: Uygulama durumlarını kopyalamanın zorluğu ve test verilerini temizlemenin ek yüküyle uğraşma.
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 temsilcilerinin 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 yürütmesine olanak tanıyan evrensel bir adaptör olarak düşünebilirsiniz.
Geleneksel olarak, büyük dil modellerinin (LLM'ler) 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, genellikle "yapay zeka uygulamaları için USB-C" olarak tanımlanan evrensel bir standart oluşturduğundan büyük bir hazır yeniden kullanılabilirlik sağlar. Geliştiriciler MCP sunucusunu bir kez oluşturabilir ve MCP ile uyumlu herhangi bir yapay zeka ana makinesi, M x N entegrasyon sorununu ortadan kaldırarak anında bu sunucuya bağlanabilir. 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.
6. BrowserMCP ile otomasyon
BrowserMCP nedir?
Bugün ilk olarak bu araçla denemeler yapacağız. BrowserMCP, yapay zeka temsilcilerine web tarayıcısıyla etkileşim kurmak için ihtiyaç duyduğu "gözleri" ve "elleri" veren bir MCP sunucusudur. Özetle, 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.
- Temsilciniz 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, demo uygulamasının çalıştığı sekmenin geçerli sekme olmasını istersiniz.)
Ardından, MCP yapılandırmasını istemcimize eklememiz gerekir:
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
Bu ayarı nerede yapılandırabilirsiniz? Bu, temsilcinize bağlıdır. Örneğin, Gemini CLI'da: ~/.gemini/settings.json. Şuna benzeyecektir:
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. (Demo uygulamasının ilk terminal oturumumuzda çalıştığını hatırlayın.) Gemini CLI'da /mcp komutunu çalıştırarak düzgün şekilde yüklendiğini kontrol edin. 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ı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şletir veya değiştirirsek bu istem çalışmaya devam edecek ve çıkış, Markdown tablomuzda yakalanmaya devam edecektir.
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. Skills 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 tabanlı olmayan tarayıcılar desteklenmez.
- MCP sunucusunun çalıştığı makinede ayrı bir tarayıcı sürecinin çalışması gerekir.
- Yerel dosya sistemiyle çalışamaz. Örneğin, ekran görüntülerini kanıtlamak 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.
- "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ı yürütmek 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ı öğrenmemiz gerekmiyor. Bunun yerine bir temsilci becerisi kullanabiliriz.
Peki, aracı 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. Bu dokümanlarda talimatlar, en iyi uygulamalar ve bazen de belirli bir göreve göre uyarlanmış yardımcı komut dosyaları yer alır.
İşin en akıllıca kısmı ise 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 tutarak 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 Skills'i kullanmaya başlama
- Codelab: Google Antigravity becerileri oluşturma
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. Temsilciye Playwright becerisi kazandırdığı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 ve ilişkili becerisini kullanacağım.
Bu yaklaşımla Playwright CLI'yı yerel olarak yüklüyoruz ve ardından aracımıza bu CLI'yı kullanması 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 de 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. Gemini CLI'yı yeniden başlatın ve şu komutu çalıştırın:
/mcp disable browsermcp
Şimdi Gemini'a Playwright ile uygulamamıza gitmesini soracağız. Ancak BrowserMCP'den farklı olarak önce tarayıcıyı açmamız gerekmez. Playwright, yerel bir işlemle bunu bizim için yapar.
Gemini CLI'a şu istemi 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.
- 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 output klasöründe bir dashboard.png dosyası görürsünüz.
Araç çağrılarının Gemini CLI'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 present them 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. 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ı kendi başına belirler. Bu, 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. Playwright CLI'yı sevmemin nedenlerinden biri de bu!
9. 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:
- 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ızdan oturum açmasını, verilere gitmesini ve bunları sizin için özetlemesini istersiniz.
- "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.
10. 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), temsilcilerinize 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.
- Skills ve Playwright CLI, aşamalı açıklama ile desteklenen, tekrarlanabilir ve deterministik otomasyon testinin yeni bir seviyesini sunar.
- Antigravity'nin Browser Subagent'ı, kutudan çıkar çıkmaz otonom, çok formatlı gezinme ve yapay içerik kaydı sunarak bu durumu bir adım daha ileriye taşıyor.
Şimdi gidin ve sıkıcı şeyleri otomatikleştirin.
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
Temel Araçlar ve Çerçeveler
Temsilci Tabanlı Kavramlar ve Beceriler
- Eğitim: Google Antigravity becerilerini kullanmaya başlama
- Codelab: Antigravity Becerilerini Kullanmaya Başlama
- 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