Skill'in Kendi İfadeleriyle
Puppeteer üzerinden başsız (headless) Chrome başlatarak, tam olarak render edilmiş DOM'u yakalayarak, CSSOM kurallarını satır içine alarak ve görselleri base64 data URI'lerine dönüştürerek çalışan bir web uygulamasından tek, kendi kendine yeten bir HTML dosyası üretir. React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook gibi herhangi bir framework ile çalışır — MockPage.jsx gerektirmez.
Skill, ajanı ilerlemeden önce iki yakalama stratejisinden hangisinin kullanılacağını sormaya zorlar; Puppeteer snapshot'ını önerir ve yerel sunucu başladıktan sonra onay için durur. Bayraklar bekleme süresini, viewport'u, karanlık modu, sabit öğelerin kaldırılmasını, canvas'ın satır içine alınmasını ve giriş korumalı sayfalar için bir kimlik doğrulama betiğini kapsar. Belgelenmiş bir ek, uygulama yerel olarak çalıştırılamadığında React bileşenlerini elle oluşturulmuş bir MockPage.jsx içine düzleştirir.
Neler üretir
- Yakalanan her rota için, stilleri satır içine alınmış ve görselleri base64 olarak gömülmüş, kendi kendine yeten bir HTML dosyası.
- Birden fazla görünümü yakaladığınızda rota başına bir dosya; örneğin ana sayfa, fiyatlandırma ve gösterge paneli.
- Canvas bayrağı kullanıldığında canvas öğelerinden base64 görsellere serileştirilen grafikler.
Nasıl Çalışır
- 01Kullanıcının Bir Strateji Seçmesine İzin Verin
Herhangi bir çıkarma işleminden önce ajan A/B karşılaştırmasını sunar, Puppeteer yolunu önerir ve açık bir seçim için bekler.
- 02Snapshot Betiğini Rota Başına Çalıştırın
URL başına bir komut; her yakalamayı ağ boşta kaldıktan sonra sabit bir beklemeyle .stitch içinde kendi dosyasına yazar.
- 03Betiğin Sayfayı Satır İçine Almasına İzin Verin
CSSOM kuralları, bağlı stil sayfaları, görseller, srcset kaynakları ve aynı kökenden simge fontları dosyaya katlanır; böylece hiçbir şey çalışan bir sunucuya bağlı olmaz.
- 04Bayrakları Framework'e Göre Ayarlayın
Bekleme süreleri ve URL'ler yığına göre farklılık gösterir; örneğin framework sunucu tarafında render edilmiş işaretlemeyi hidrate ederken daha uzun bir bekleme gerekir.
- 05Korumalı Sayfalarda Kimlik Doğrulaması Yapın
Bir kimlik doğrulama modülü Puppeteer oturumu içinde çalışır; bunun ardından betik, oturum yerinde olacak şekilde orijinal URL'ye geri döner.
- 06Yalnızca Gerekirse Bir Mock'a Geri Dönün
Uygulama hiç başlatılamadığında, ek rota canlı bir render yakalamak yerine bileşenleri tek bir JSX dosyasına düzleştirir.