P2ER, temsilciler için Chrome Geliştirici Araçları ile temsilci kodlaması için nasıl yüksek güvene sahip bir ortam oluşturdu?

Peer Weidner
Peer Weidner
GitHub LinkedIn
José Luis Zapata

Yayınlanma tarihi: 22 Haziran 2026

Dijital çözümler ajansı P2ER, yalnızca doğrulanmış ve çalışan yazılımların son inceleme için kullanıcılara iletilmesini sağlamak amacıyla aracılar için Chrome Geliştirici Araçları'nı kullanıyor. İş akışlarını ajan tabanlı bir altyapıya dönüştürerek yapay zeka ajanlarının deneysel kullanıcı arayüzü doğrulaması yapmasını sağladılar ve dağıtım sıklığını haftada bir kezden günde birden fazla kez olacak şekilde artırdılar.

Zorluk: Mevcut uygulamalarda kaliteyi ölçeklendirme

P2ER, otomobil üreticileri, saat markaları ve konaklama şirketleri gibi global markalar için üst düzey dijital deneyimler sunar. Birçok şirkette olduğu gibi bu şirketin de temel zorluğu, karmaşık ve mevcut uygulamalarla çalışmaktı. Temsilci tabanlı kodlamayı benimseyen ekip, üç büyük engelle karşılaştı:

  • Kırılgan kullanıcı arayüzü testi. Standart test paketleri, P2ER'nin bazı projelerindeki dalgalanan otel fiyatları veya sezonluk teklifler gibi dinamik verilerle ilgili sorunlar yaşıyordu. Sahte veriler genellikle bir test uzmanının hemen bulacağı entegrasyon kusurlarını gizler.
  • Ajan güvenilirliği sorunları. Açık talimatlar olmadan yapay zeka aracı bazen bir görevi doğrulamadan tamamlandığını iddia ediyordu.
  • Bağlam kaybı. Geniş kapsamlı görevler ve model zaman aşımları, aracıların oturum hedeflerini takip etmesini zorlaştırıyordu. Bu durum, geliştiricilerin bir aracının başlattığı çalışmayı izlemesini ve devam ettirmesini zorlaştırıyordu.

Çözüm: El işçiliği için altyapı oluşturun

P2ER, yapay zekayı geliştirmenin tekrarlayan yönlerini de ele alabilecek bir "antrenman partneri" olarak ele alan bir altyapı oluşturdu. Bu yaklaşım, ekibin mimariye ve yaratıcı problem çözmeye odaklanarak işçiliği ölçeklendirmesini sağlar.

Geliştirici Araçları ile aracıların MCP sunucusu için deneysel doğrulamayı zorunlu kılma

P2ER, güvenilirliği sağlamak için Zorunlu Ampirik Doğrulama kuralını oluşturdu. Projenin AGENTS.md dosyasında belirtilen bu mühendislik zorunluluğu şunları ifade eder:

All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.

Ekip, temsilcinin sözüne güvenmek yerine Chrome Geliştirici Araçları'nı kullanarak temsilcilere uygulamada görsel ve etkileşimli olarak gezinmeleri için güvenli bir ortam sunar.

Bu "test aracıları", standart statik testlerin kaçırdığı birkaç önemli görevi yerine getirir:

  • Dinamik veri testi: Aşamalandırma ortamında bile, temsilciler uygulamayı tam olarak bir kullanıcı gibi deneyimlemek için gerçek ve dalgalanan verilerle (ör. sezonlar boyunca değişen otel fiyatları) test eder. Bu özellik, github-issue-test becerilerinde belirtilen new_page, navigate_page, fill, click ve hover gibi temsilcilerin etkileşim araçları için DevTools tarafından etkinleştirilir. Bu sayede temsilci, dinamik olarak kimlik doğrulayabilir ve gerçekçi bir kullanıcı tıklama yolu simüle edebilir.
  • Görsel denetimler: Temsilciler, Figma düzenleri ile gerçek uygulama arasındaki görsel tutarsızlıkları belirler. Geliştirici Araçları'ndaki take_screenshot aracını kullanan figma-validate becerisi, Figma dışa aktarma işlemleriyle yan yana karşılaştırma yapmak için canlı Storybook oluşturmalarının yüksek çözünürlüklü ekran görüntülerini alır.
  • Kullanılabilirlik kontrolleri: Temsilciler, otomatik komut dosyalarının genellikle gözden kaçırdığı eksik çevirileri veya kullanılabilirlik hatalarını yakalar. Erişilebilirlik ağacıyla doğrudan etkileşime girerek ve take_snapshot ile take_screenshot aracılığıyla alınan görsel anlık görüntüleri inceleyerek, temsilciler otomatik doğrulama iş akışlarında açıkça belirtildiği gibi MISSING_MESSAGE dizeleri gibi kullanıcı arayüzü anormalliklerini aktif olarak tarar.

Alt görevleri ayrıştırma ve kalıcı hale getirme

P2ER, oturum zaman aşımları ve bağlam kaybıyla mücadele etmek için alt temsilciler aracılığıyla çalışmayı kesin bir şekilde bölümlere ayırır. Ardından, temsilcilerine şu şekilde düzenleyici gibi davranmalarını söylerler:

Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.

Bu süreçte ürün sahiplerini bilgilendirmek için ekip, temsilcilerin GitHub sorunlarındaki çalışmalarını takip etmelerini sağlayan özel bir beceri entegre etti. Bu sayede, her alt aracı görevi ve sonuçları GitHub API kullanılarak alt sorun olarak kalıcı hale getirilir ve belgelenir. Böylece, diğer geliştiricilerin kullanabileceği net bir denetim izi ve kalıcı bağlam oluşturulur.

Paralel yürütme için ortamları yalıtma

P2ER, geliştirme sürecini ölçeklendirmek için birden fazla aracının kodu paralel olarak çalıştırmasını sağlamak amacıyla her görev için yalıtılmış ortamlar oluşturmasını zorunlu kılar. Bu, kullanıcı arayüzü doğrulaması sırasında durum çakışmalarını ve ağ sorunlarını önler.

Bu izolasyonun teknik kurulumu şunları içerir:

  • İzole edilmiş Git worktree'leri: Birden fazla aracı paralel olarak çalışırken dosya çakışmalarını ve çalışma alanının kirlenmesini önlemek için görevler izole edilmiş Git worktree'lerinde yürütülür. Her aracı, ortam değişkenlerinin kopyalandığı ve bağımlılıkların sembolik olarak bağlandığı özel bir dosya sistemi alanına sahip olur. Böylece dosya değişiklikleri hiçbir zaman birbirinin üzerine yazılmaz.
  • Benzersiz ortamlar: Her aracı ve görev, Next.js geliştirme sunucusunu benzersiz bir izole bağlantı noktasında çalıştırır. Proje kurallarına göre, ağ çakışmaları olmadan paralel yürütmeyi sağlamak için sunucular npx next dev -p <custom_port> --turbopack ile dinamik olarak başlatılır.
  • Veritabanı klonları: Paralel test sırasında veri çakışmalarını önlemek için P2ER, aracı başlatılırken ana veritabanını görevlere özel bir şemada programatik olarak kopyalar. Aracı doğrulamasını tamamlayıp görev onaylandıktan sonra, otomatik bir temizleme işlemiyle izole edilmiş veritabanı bırakılır. Bu yaşam döngüsü, her aracının temiz bir çalışma alanında çalışmasını ve geride asılı veri bırakmamasını sağlar.
  • Hedefli test: Temsilciler için Chrome Geliştirici Araçları üzerinden yapılan tüm tarayıcı testleri, söz konusu temsilci örneğine ayrılan özel bağlantı noktasını hedeflemelidir. Test zorunluluğu, varsayılan bağlantı noktalarının sabit kodlanmasını yasaklayarak http://localhost:<custom_port> gibi test hedefi URL'lerinin kullanılmasını zorunlu kılar.

Etki: Kaliteyi koruyarak geliştirme hızında 10 kat artış

Yüksek güvenilirliğe sahip koruma sınırlarıyla birlikte yapay zeka destekli kodlamaya geçiş, P2ER'nin çıktısını dönüştürdü. Bu değişiklikler, başlangıçta temsilcinin güvenilir bir şekilde çalışmasını sağlamak için gerekliydi ancak tüm geliştirme yaşam döngüsüne de fayda sağladı:

  • 10 kat daha hızlı iş döngüleri: Çoğu sorun artık önceki 1-3 günlük ortalamaya kıyasla tek bir gün içinde kapatılıyor. Dağıtım sıklığı haftada bir kezden günde birden çok kez olacak şekilde arttı.
  • KG ekipleri için stratejik odaklanma: Artık temel gerilemeleri ve kolayca çözülebilecek sorunları yakalayan aracılar sayesinde, insan test ekibi daha ayrıntılı ve karmaşık test senaryolarına odaklanabilir.
  • Paydaşlar için güçlü uygulamalar: Testler, programcının standart "sorunsuz yol"unun ötesine geçtiği için uygulamalar artık daha esnek.
  • Daha net iletişim ve izlenebilirlik: "İnsani sorunlardan uygulama alt sorunlarına" kuralı uygulandığında paydaşlar, teknik uygulama ayrıntılarıyla dolu biletleri okumak ve bunları nasıl test edeceklerini öğrenmek yerine hangi mantıksal iyileştirmelerin yapıldığına dair net talimatlar alır.

Bu durumun geliştirme hızını nasıl etkilediğine dair bir örnek olarak P2ER'nin, yerleşik yöntemlerini kullanarak yıllar sürecek yeni bir platformu altı ayda oluşturmasını gösterebiliriz. İnsan, son kalite kontrolü olarak kalır ve aracıların önceden doğruladığı çekme isteklerini inceler.

Ekipler için teknik analizler

P2ER, bu iş akışını oluştururken deneme aşamasından olgun, aracı destekli bir geliştirme modeline geçiş yapmalarına yardımcı olan çeşitli stratejiler belirledi.

Bu stratejiler, diğer ekiplerin kendi yapay zeka uygulamalarını iyileştirmesine yardımcı olabilir:

Komut dosyası yerleştirme ve KSA toplu işleme ile jeton kullanımını optimize etme

Aracıların yalnızca adım adım gezinmeye (ör. anlık görüntü alma, kimlik bulma, giriş doldurma ve bekleme) güvenmesi durumunda, uzun geliştirme oturumları sırasında MCP sunucularında çok fazla jeton kullanılabilir. P2ER, bu ek yükü en aza indirmek için iki yönlü bir yaklaşım kullanır:

  • Satır içi komut dosyası ekleme: Müşteri temsilcileri, karmaşık React formları üzerinden kimlik doğrulama gibi hedeflenen etkileşimler için evaluate_script aracını kullanarak doğrudan tarayıcıya vanilla JavaScript ekler. Bu, yerleşik belirleyici geçersiz kılmalarını atlar ve birden fazla işlemi aynı anda yürüterek çok sayıda görüşme dönüşünü kaydeder.
  • KSA komut dosyası toplama: Temsilciler bir "aksaklık" yaşadığında veya aşırı uzun ve tekrarlayan bir tarayıcı akışıyla karşılaştığında KSA toplama yedeklemesine geçer. P2ER, tekrarlanan, ayrı MCP araçlarına jeton harcamak veya özel otomasyon komut dosyalarını sıfırdan yazmak yerine Chrome Geliştirici Araçları CLI'sını tarayıcı işlemlerini kalıcı hale getirmeye ve toplu olarak işlemeye yönlendirir. Bu sayede, ajanlar çok adımlı akışların tamamını tek seferde programatik olarak yürütebilir ve modelden araca sürekli iletişim kurmanın getirdiği yükü önemli ölçüde azaltabilir.

İz analizi ile performans izlemeyi otomatikleştirme

P2ER, tamamen insan algısına güvenmek yerine, otomatik Lighthouse denetimleri ve performans izlemeleri çalıştırmak için aracıların Geliştirici Araçları'nı kullandığı bir review-performance becerisi oluşturdu.

Temsilciler, Core Web Vitals (LCP, INP, CLS) değerlerini yakalayıp incelemek ve ana iş parçacığı darboğazlarını veya düzen kaymalarını belirlemek için performance_start_trace ve performance_analyze_insight aracını kullanır. Kalite kontrolünü tamamlamak için temsilciler, lighthouse_audit komutunu çalıştırarak özellikle Erişilebilirlik (a11y), SEO ve genel web'deki en iyi uygulamalarda gerilemeleri önleyebilir. Böylece, çekme isteği için yalnızca yüksek kaliteli kod gönderilir.

Temsilciler için Chrome Geliştirici Araçları ile doğrulamayı geliştirme

P2ER, özel becerilerinin yanı sıra işlevsel doğrulama yapmak için Chrome Geliştirici Araçları'nın temel özelliklerini de kullanır. Buna, farklı cihazları taklit etmek ve duyarlılığı test etmek için sunucuyu kullanmak, kullanıcı arayüzünün farklı ekran boyutlarında ve cihazlarda çalıştığından emin olmak da dahildir.

Uygulamada gezinmek için MCP sunucusunu kullanan temsilciler, düzenler ve gerçek uygulama arasındaki görsel tutarsızlıkları belirleyebilir. Böylece, statik testlerin genellikle gözden kaçırdığı hataları tespit edebilirler.

Kaynaklar

P2ER'nin kullanım alanını daha da ayrıntılı incelemek için ilgili GitHub deposunda bahsedilen tüm becerileri inceleyin.

Benzer iş akışlarını DevTools for Agents ile uygulama hakkında daha fazla bilgi edinmek ve kendiniz denemek için aşağıdaki kaynakları inceleyin: