Yayınlanma tarihi: 10 Kasım 2026
Policybazaar, 97 milyondan fazla kayıtlı müşterisiyle Hindistan'ın önde gelen sigorta platformlarından biridir. Müşterilerinin yaklaşık %80'i her ay web sitesini ziyaret ediyor. Ana şirketi PB Fintech, kısa süre önce Paisabazaar Marketing & Consulting Private Limited bünyesinde bir marka olan uçtan uca emeklilik planlama platformu Pensionbazaar'ı kullanıma sundu.
İki ekip de kodlama temsilcileri kullanıyor. Bu temsilciler hızlıca kod yazabiliyor ancak kodun tarayıcıda ne yaptığını göremiyor. Temsilciler genellikle güncelliğini yitirmiş web kalıplarına başvuruyordu ve bir ekranın doğru şekilde oluşturulup oluşturulmadığını kontrol etmenin bir yolu yoktu. Bu nedenle mühendislerin her şeyi manuel olarak doğrulaması gerekiyordu.
Bu sorunu çözmek için her iki şirket de temsilci tabanlı iş akışlarında iki aracı birleştirdi: Modellere modern web standartlarını öğretmek için Modern Web Rehberi ve bu temsilcilere çalışmalarını inceleyip doğrulamaları için canlı, başsız bir tarayıcı sunan temsilciler için Chrome Geliştirici Araçları.
Bu durumun etkisi şu şekildedir:
%92
Yaklaşık 30 Policybazaar açılış sayfasında daha az manuel denetim çabası
>%90
Yeni Pensionbazaar sayfaları için geliştirme ve test süresi yaklaşık dört günden birkaç saate indi.
>%90
Yeni Pensionbazaar ekranlarında daha az kullanıcı arayüzü hatası bildirildi.
Zorluk: Hızlı kod, yavaş doğrulama
Policybazaar ve Pensionbazaar, standart yapay zeka kodlama iş akışlarının üretim düzeyinde optimize edemediği iki farklı darboğazla karşılaştı.
Pensionbazaar: Uzun kalite güvencesi döngüleri olan yeni ekranlar
Pensionbazaar'ın çok adımlı Retirement Freedom Score hesaplayıcısı, özelleştirilebilir yatırım gideri projeksiyonları ve otomatik öneri raporları gibi düzinelerce yeni ve karmaşık ekrana ihtiyacı vardı. Ekip, kodlama temsilcileri ve Figma MCP sunucusuyla bunları oluşturdu ancak iki sorun nedeniyle kalite güvencesi döngüleri uzun sürdü.
İlk olarak, temsilciler karanlıkta kodlama yapıyordu. Temel model kod oluşturabilir ancak oluşturulan arayüzü göremez, hesaplanan stilleri tasarım özellikleriyle karşılaştıramaz, düzen kaymalarını algılayamaz veya ağ şelalesini okuyamaz. Bu nedenle, kırpılmış kullanıcı arayüzü ve düzen kaymaları gibi ilgili sorunlar manuel kalite güvencesine kadar ulaştı.
İkinci olarak, oluşturulan kod geçmişte kalmıştı. Temsilciler, modern web platformu hakkında bilgi sahibi olmadıkları için eski geçici çözümlere başvurdu. Yerleşik <dialog> öğesini kullanmak yerine ağır JavaScript modalları yazdı, gereksiz polyfill'ler ekledi ve fetchpriority gibi performans ipuçlarını atladı.
Policybazaar: 30 açılış sayfası ve manuel denetim
Policybazaar'ın hayat sigortası ekibi, farklı sigorta ürünleri için yaklaşık 30 açılış sayfası yayınlıyor ve her sayfanın farklı pazarlama kampanyaları için varyasyonları olabiliyor. Bu siteler günde toplam 200.000 ila 300.000 ziyaretçi alıyor ve her sayfa, aylık tasarım ve iş mantığı güncellemeleri alıyor. Ekip, Core Web Vitals puanlarını yüksek tutmalı ve her varyantın erişilebilir olmasını ve her ekran boyutunda doğru şekilde oluşturulmasını sağlamalıdır.
Otomasyondan önce bir mühendis her sayfayı manuel olarak denetlerdi:
- Gerçek dünyadan kullanıcı verileri toplamak için PageSpeed Insights'ı çalıştırın.
- Core Web Vitals puanlarını ve önerilerini değerlendirin.
- Geliştirme veya hazırlık derlemesini inceleyin, puanların arkasındaki sorunları teşhis edin ve kod düzeltmeleri uygulayın.
Süreç yavaş, tekrarlayıcı ve ölçeklenebilir değildi. Bu durum, optimizasyonların kaçırılmasına, tutarsız denetim kapsamına, tespit edilemeyen performans gerilemelerine ve geciken sürümlere neden oluyordu.
Ekipler, iş akışlarını değiştirmeden önce üç hedef belirledi: Geliştiricilerin performans denetimlerine harcadığı süreyi %80'den fazla azaltırken denetim kapsamını sürekli hale getirmek, doğrulanmış raporlarla kalite güvencesi geri dönüş süresini kısaltmak ve bir ekranın tel kafesleriyle eşleşmemesi nedeniyle ortaya çıkan kullanıcı arayüzü hatalarını azaltmak.
Çözüm: Doğrulama kodu döngüsü
Pensionbazaar, kod yazma ve kodu kontrol etme arasındaki boşluğu kapattı. Temsilci, kodu yazar, temiz bir tarayıcı örneği başlatır, sayfayı görsel eşdeğerlik, düzen bozulması, konsol hataları ve performans açısından programatik olarak denetler ve bulduğu sorunları minimum insan müdahalesiyle düzeltir. Temsilcileri, tasarımı Figma MCP'den alır. Böylece, oluşturulan sayfayı tasarımcıların amaçladığı tasarımla karşılaştırabilir.
Aşağıdaki videoda bu döngünün işleyişi gösterilmektedir. Temsilci, yeni bir ekran için Figma tasarımlarını okur, uygular ve ardından oluşturulan sayfayı incelemek ve bulduğu farklılıkları düzeltmek için temsilciler için Chrome Geliştirici Araçları'nı kullanır.
1. adım: Temsilciyi modern web standartlarına dayandırın
Pensionbazaar ekibi, oluşturulan kodun modern web ile ilgili en iyi uygulamalara uymasını, mevcut platform özelliklerini kullanmasını ve eski tarayıcılarda da çalışmasını istiyordu. Bu, manuel olarak kontrol edilmesi zor bir işlemdir ve temsilciler platformla ilgili her zaman güncel bilgilere sahip olmayabilir. Modern Web Rehberi bu sorunu çözer. Chrome ve web topluluğundan web uzmanları tarafından yazılan ve yönetilen bu temsilci becerisi, 200'den fazla kullanım alanını kapsar. Temsilcileri modern web platformu API'lerine ve Baseline hedefinize uygun performans ve erişilebilirlik ile ilgili en iyi uygulamalara yönlendirir. Hedef belirlemezseniz varsayılan olarak Baseline Widely Available kullanılır.
Temsilci, Figma dosyalarından bağlamı aldıktan sonra kod yazarken Modern Web Rehberi'ni kullanır. Pensionbazaar için bu durum, kodda üç farklı değişikliğe yol açtı:
- Yerel öğeler, JavaScript geçici çözümlerinin yerini aldı. Temsilci, plan ayrıntısı modalları için yerleşik
<dialog>öğesini ve Popover API'yi, finansal özet kartları için ise CSS Grid ve Flexbox'ı kullandı. - Temsilci, temel modellerin genellikle atladığı performans ipuçları ekledi.
Bunlar arasında, Interaction to Next Paint'i (INP) korumak için hero LCP resimlerinde
fetchpriority="high", ekranın alt kısmındaki plan kartlarındaloading="lazy"vescheduler.yield()ile zamana dayalı yürütme bütçesi yer alıyordu. - Modern özellikler eski tarayıcıları bozmadı. Pensionbazaar, Browserslist'te tanımladığı eski tarayıcı sürümlerini destekler. Temsilci, tek kullanımlık şifre (OTP) alanında
:user-invalidCSS sözde sınıfı veautoComplete="one-time-code"gibi özellikleri kullandı. Eski tarayıcılar bunları yoksayar ve temel işlevler çalışmaya devam eder.
Temel modeller de fena değildi. Ekip, performans açısından en iyi uygulamalarla yaklaşık %70 uyumlu olduklarını tespit etti. Temsilcinin kendi raporunda, kalan farkı kapatan 12 Modern Web Rehberi kuralı listelendi. Dört örnek:
| Bölge | Temel model boşluğu | Modern Web Rehberi kuralı |
|---|---|---|
| Resim yükleniyor | fetchpriority="high" ile loading="lazy"'i eşleştirmek gibi çelişkili kombinasyonlar uyduruldu. |
Bunların birleştirilmesini açıkça yasaklar ve yüksek öncelikli görselleri sayfa başına bir veya iki ile sınırlandırır. |
| Düzen kararlılığı | Performans için content-visibility: auto önerildi ancak contain-intrinsic-size atlandı. |
İçerik oluşturulurken ciddi düzen kaymalarını önlemek için iki özelliğin eşlenmesi gerekir. |
| Ana iş parçacığı verimi | scheduler.yield(), son tarih kalıbı olmadan genel olarak kullanılmış. |
Interaction to Next Paint (INP) metriğini korumak için zamana dayalı katı bir son tarih (performance.now() + 50) uygular. |
| Hizmet çalışanı önbelleğe alma | Çevrimdışı form gönderimleri hesaba katılmadı. | Temsilciyi, hizmet çalışanlarının GET dışı istekleri yerel olarak önbelleğe alamayacağı konusunda uyarır. |
Pensionbazaar için önceliğimiz, daha sonra teknik borçtan kaçınmak için ilk günden itibaren kaliteli kod oluşturmaktı. Modern Web Rehberi, kodlama temsilcimizi modern web standartlarını ve performansla ilgili en iyi uygulamaları benimsemeye yönlendirirken belirli tarayıcı uyumluluğu hedeflerimizi de göz önünde bulundurdu. Bu sayede ön uç kod incelemelerimiz önemli ölçüde kolaylaştı ve hızlandı. Sonuç olarak geliştirme sürecimiz de kısaldı.
Aman Soni, Mühendislik Müdürü, Policybazaar
2. adım: Temsilciye bir tarayıcı verin
Ajanlar için Chrome Geliştirici Araçları; kodlama ajanlarına konsol günlükleri, ağ trafiği, erişilebilirlik ağacı ve diğer Geliştirici Araçları özellikleri gibi çalışma zamanı hata ayıklama verilerine gerçek zamanlı erişim sağlayan bir MCP sunucusu, CLI ve ajan becerileri içeren bir araç setidir.
Ekip, kodlama temsilcisi Claude Code'a eklenti olarak ajanlar için Chrome Geliştirici Araçları'nı yükledi:
# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Ekip, her testin temiz bir tarayıcı örneğinde çalıştırılmasını istedi. Böylece, yüklü Chrome uzantıları sonuçları etkileyemez ve kişisel veya hassas veriler sızdırılamaz. Bunu elde etmek için MCP sunucusu yapılandırmasındaki args dizisine --isolated ekleyin:
{
"args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}
Testleriniz için mevcut bir oturum açılmış tarayıcı oturumu gerekiyorsa --autoConnect kullanın.
3. adım: Temsilcinin kendi çalışmasını kontrol etmesine ve düzeltmesine izin verin
Mühendislik ekibi, kontrolleri temsilcinin talimatlarında istem veya temsilci becerisi olarak listeler. Özetle temsilci şunları yapar:
- DOM ağacını ve hesaplanan CSS'yi inceler ve bunları Figma tasarımıyla karşılaştırır.
- Duyarlılığı test etmek için sayfayı mobil görüntü alanlarına göre yeniden boyutlandırır.
- Komut dosyaları, oluşturmayı engelleyen kaynaklar ve diğer performans sorunlarından kaynaklanan işlenmesi uzun süren animasyon çerçevelerini (LoAF) bulmak için performans izlerini kaydeder.
- Tasarım uyuşmazlıklarını, performans sorunlarını ve konsol istisnalarını düzeltmek için kodu bir mühendis incelemeden önce yeniden yazar.
Aşağıdaki tabloda, her bir kontrolü destekleyen ajanlar için Chrome Geliştirici Araçları araçları gösterilmektedir:
| Kontrol Et | Araçlar |
|---|---|
| Görüntü alanları genelinde duyarlılığı test etme | resize_page, sayfanın penceresini belirli boyutlara göre yeniden boyutlandırır. emulate, belirli cihaz ortamlarının emülasyonunu yapar. take_screenshot, sonucu yakalar. |
| DOM ve hesaplanan CSS'yi Figma tasarımıyla karşılaştırma | take_snapshot, erişilebilirlik ağacına göre sayfanın metin anlık görüntüsünü döndürür. get_css_styles, uygulanan CSS kurallarını okur. evaluate_script, sayfa içinde bir JavaScript işlevi çalıştırır. |
| LoAF, oluşturmayı engelleyen kaynaklar ve Core Web Vitals sorunlarını bulma | click ve drag, etkileşimleri taklit eder. performance_start_trace ve performance_stop_trace performans izi kaydeder. performance_analyze_insight, izdeki analizler için ayrıntılı teşhis bilgileri döndürür. list_network_requests ve get_network_request ağ etkinliğini gösterir. lighthouse_audit, SEO ve erişilebilirlik gibi performans dışı alanları denetler. |
Temsilci, küçük ekranlarda metnin kesilmesi, bozuk bir flex wrap veya düzen kaymasına neden olan optimize edilmemiş bir resim gibi bir sorun bulduğunda kısa bir düzeltme döngüsü çalıştırır:
- Ajanlar için Chrome Geliştirici Araçları, hatayı tam olarak yakalar.
- Temsilci, verileri analiz eder ve sorunlu CSS veya JavaScript'i yeniden yazar.
- Temsilci, düzeltmeyi onaylamak için sayfayı yeniden yükler.
Temsilci, bir ekranda sayfayı oluşturdu ve başlık düzeninin, boşlukların ve gradyanın tasarımla eşleşmediğini tespit etti. İlgili .scss dosyayı düzeltti. Ayrıca, açık durumlarının tasarımlarla eşleştiğini kontrol etmek için akordeonları genişletmek gibi sayfayla etkileşimde de bulundu.
4. adım: Doğrulanmış bir raporu kalite güvencesi ekibine teslim edin
Doğrulama tamamlandığında temsilci, kalite güvencesi ekibi için bir denetim raporuyla birlikte üretime hazır kodu sunar. Rapor şunları içerir:
- Ekran görüntüleri, DOM anlık görüntüleri ve hesaplanan stillerden oluşturulan, piksel farklılıklarını vurgulayan Figma tasarımıyla görsel bir karşılaştırma.
- Oluşturulan sayfanın farklı ekran boyutlarındaki ekran görüntüleri.
performance_start_traceveperformance_analyze_insight'dan alınan Core Web Vitals ve performans teşhisleri [ör. Speed Index ve Total Blocking Time (TBT)].lighthouse_auditiçin SEO, en iyi uygulamalar ve erişilebilirlik ile ilgili Lighthouse puanları.- Satırları daraltma ve açma/kapatma gibi etkileşimlerin yanı sıra konsol hataları ve satır düzenleme, satır silme ve boş durumlar gibi uygulama durumu değişiklikleri için başarılı veya başarısız kontrolleri.
Aynı yaklaşımı 30 kampanya sayfasına uygulayın
Policybazaar, ana platformunda manuel PageSpeed Insights çalıştırmalarını Kiro'da temsilciler için Chrome Geliştirici Araçları üzerinden yapılan denetimlerle değiştirdi. Kampanya sayfası yayınlanmadan önce bir mühendis, mobil ve masaüstü için hazırlık URL'sine karşı bir denetim tetikler. Temsilci, performans ve Lighthouse denetimleri çalıştırır. Temsilciler için Chrome Geliştirici Araçları, laboratuvar verilerinin yanı sıra gerçek dünyadaki Chrome Kullanıcı Deneyimi Raporu (CrUX) alan verilerini otomatik olarak alır. Bu sayede PageSpeed Insights adımını tamamen ortadan kaldırdık.
Ardından temsilci, performans puanlarını, bulduğu darboğazları ve bir mühendisin düzeltmesi için önceliklendirilmiş iyileştirme listesini raporlar. Yayın öncesi bir denetimde, sayfa yükleme sırasında birbiri ardına tetiklenen ve kritik oluşturma çalışmalarıyla rekabet eden kritik olmayan API çağrılarını işaretledi. Ekip, sayfa yayınlanmadan önce sorunu düzeltti.
Temsilci artık bir mühendisin bir denetimi tamamlaması için gereken sürede 12 performans denetimi tamamlıyor. Bu, manuel çalışmada %92'lik bir azalma anlamına geliyor.
Web performansı, iyi bir kullanıcı deneyimi sunmamız açısından önemli ancak onlarca açılış sayfasında manuel olarak denetim yapmak, şelaleleri ve izleri değerlendirmek sıkıcı ve önemli bir darboğazdı. Ajanlar için Chrome Geliştirici Araçları bu süreci dönüştürdü ve mühendislerimizin performans denetimi süresini %92 oranında azalttı. Böylece mühendislerimiz daha karmaşık görevlere odaklanabildi.
Aman Soni, Mühendislik Müdürü, Policybazaar
Etki
Policybazaar ve Pensionbazaar, Modern Web Rehberi ve ajanlar için Chrome Geliştirici Araçları sayesinde ön uç testlerini manuel ve reaktif bir süreçten otomatik ve proaktif bir sürece dönüştürdü. Aşağıdaki tabloda, değişiklikten önceki ve sonraki iş akışları karşılaştırılmaktadır:
| Bölge | Önceki durum: manuel inceleme ve temel modeller | Sonra: Modern Web Rehberi ve ajanlar için Chrome Geliştirici Araçları |
|---|---|---|
| Performans denetimi çalışması (Policybazaar) | Bir mühendis PageSpeed Insights'ı çalıştırdı, Core Web Vitals'ı inceledi ve yaklaşık 30 açılış sayfasının her biri için düzeltmeleri manuel olarak uyguladı. | %92 daha az manuel çalışma Temsilci, bir mühendisin tek bir denetim için ihtiyaç duyduğu sürede 12 denetim tamamlar. |
| Denetim kapsamı (Policybazaar) | Kampanya varyantları genelinde denetim kapsamı tutarsızdı. | Kampanya sayfaları için %100 performans testi kapsamı. |
| Yeni ekran dönüşü (Pensionbazaar) | Kodun girilmesinden doğrulanmış ekrana geçiş birkaç gün sürer. | Birkaç saat, %90'dan daha hızlı. |
| Tasarım eşdeğerliği hataları (Pensionbazaar) | Kırpılmış kullanıcı arayüzü ve düzen kaymaları manuel kalite güvencesine ulaştı. | Kullanıcı arayüzü hatalarında %90'dan fazla azalma görüldü. |
%92'lik azalma, ekibin %80'in üzerindeki hedefini aştı. Açılış sayfası gerilemeleri, hazırlık veya kalite güvencesi aşamasına ulaşmadan önce yakalanır. Pensionbazaar'da kod, çeşitli görüntü alanları için ekran görüntüleriyle birlikte denetlenmiş olarak gelir. Bu sayede tasarım, mühendislik ve kalite güvencesi arasındaki gidiş gelişler azalır.
Ekibinize avantaj sağlayacak konular
- Temsilcinizi yetkili kılavuzlarla destekleyin. Modern Web Rehberi gibi özel olarak hazırlanmış rehberler, temsilcileri eski kalıplardan uzak tutar ve kodunuzu temel hedefleriniz içinde tutar.
- Temsilcinin, oluşturulan sayfayı kontrol etmeden bir ön uç görevini tamamlandı olarak işaretlemesine izin vermeyin. Ajanlar için Chrome Geliştirici Araçları, ajanın gerçek bir tarayıcıda düzeni, görüntü alanlarını ve performans izlerini incelemesine olanak tanır.
- Döngü için net çıkış ölçütleri belirleyin. Temsilcinin döngüye girip jetonları boşa harcamaması için adım sınırları ve açık geçme ve başarısız olma koşulları belirleyin.
- Yüksek sıklıkta, şablon tabanlı sayfalarla başlayın. Kapalı döngü iş akışları, en çok işlerin hızlı tamamlanması gereken durumlarda faydalıdır.
- Denetimleri temiz bir tarayıcıda çalıştırın. Uzantıların ve önbelleğe alınmış verilerin sonuçları etkilememesi veya kişisel verileri açığa çıkarmaması için
--isolatedkullanın.