Charles Proxy ile Hangi Test Senaryolarını Oluşturabiliriz? Nasıl Test Datası Üretebiliriz?
Bir önceki yazımda Charles Proxy kurulum ve konfigürasyonlarından bahsetmiştim.
Bu yazımda ise Charles Proxy kullanarak hangi test senaryolarının oluşturulup, test edilebileceğinden ve data çeşitliliğinin sağlanabileceğinden bahsedeceğim. Request & Response Rewrite, Network hızının simüle edilmesi, Breakpoint ekleme, Map Local & Map Remote ve Load Test gibi bir çok farklı senaryonun üzerinden geçeceğiz.
Proxy ve Tools menüsü altındaki özelliklerden faydalanarak test senaryolarını oluşturmaya geçmeden önce Charles Proxy’nin izlediği trafiğe ait isteklerin ve cevapların nasıl görüntüleneceğine göz atalım.
Odak Host Seçimi ve Request/Response Görüntülenmesi
Charles Proxy bilgisayarınızda çalışır durumda olan aplikasyonları ve açık web sayfalarını dinleyeceği için öncelikle test etmek istediğiniz uygulamaya ait olan isteklere odaklanmak kolaylık sağlayacaktır. Structure altında ağ trafiği takip edilen tüm uygulama ve sayfalar listelenir, Focus seçeneği ile takip etmek istediğiniz isteklerin kaynağı odak noktanız olur ve diğer trafikler Other Hosts altında listelenir.
Client’ın backend’e gönderdiği istekler ve aldığı cevaplar Structure-Contents alanında listelenir.
Request-Response Rewrite
Tools menüsü altında yer alan Rewrite; Charles Proxy üzerinden geçen tüm istek ve cevapları değiştirebilen kurallar yazmaya olanak sağlar.
Bir kaç örnek üzerinden test senaryoları oluşturalım;
Response Status Code Değiştirme
Rewrite Settings menüsünde kural seti ve bu sette yer alacak kurallar tanımlanır.
Location bölümünde hangi source üzerinden gelen isteklerin Rewrite kuralına takılacağı ve değiştirileceği belirlenir.
Kurallar Type => Action alanında tanımlanır. Response statüsünde değişiklik yapmak istiyorsak ve hata senaryosu test edeceksek; kategorilerden Response Status seçerek Match-Replace alanları üzerinden 200 response kodunun 500 ile değiştirilmesini tanımlayabiliriz ve hata senaryolarımızı test edebiliriz.
Kuralı tanımlayıp kural setini aktifleştirdiğimizde ilgili host ve belirttiğimiz path üzerinden gelen istekler response code-500 almış gibi düzenlenecektir.
Response Body Değiştirme
Client; backend’den iletilen response’lara göre davranır. Ön yüzde görüntülenmesini istediğimiz mesajları değiştirmek istiyorsak; rewrite özelliğinin Response Body kategorisini kullanabiliriz; böylelikle farklı hata mesajlarını ya da ekranda görüntülenmesini istediğimiz text’leri değiştirerek senaryo çeşitliliğini her bir senaryo için farklı bir data üretmeye gerek kalmadan sağlamış oluruz.
Value alanına önceden hazırladığımız ve görüntülenmesini beklediğimiz datayı içeren JSON formattaki texti ekleyelim.
Kuralları ve kural setini aktifleştirdikten sonra ilgili istek 500 alacak ve response-body kuralında belirttiğimiz hata mesajı ön yüzde gösterilecektir.
Array’e yeni bir object ekleme
Örnek olarak ekranda görüntülenecek olan drop-down-list’i ele alalım. Ön yüz; backend’in ilettiği response’ta bulunan array elemanlarını bu listede gösterecektir. Response’taki array’e object ekleyerek ön yüzde nasıl görüntüleneceğini test edebiliriz.
Match alanında value olarak ] ekleyip Regex seçtikten sonra; replace — value olarak aşağıdaki code blocktaki gibi eklemek istediğimiz elemanı yazıyoruz.
,
{“id”: “eee41cd0-bcdd-42e8-b3c8–16c8c1103a42”,
“question”: “Rewrite icin yazilan kural testi”}]
İlgili requestte rewrite kuralı çalışacak ve response’a 7. elemanı ekleyecektir.
Network Hızının Simüle Edilmesi
Charles Proxy’nin Proxy — Throttle Settings menüsünden network hızını simüle edebiliriz böylelikle uygulamanın düşük internet bağlantısına nasıl tepki verdiğini test edebiliriz.
Sunucunun ulaşılamaz olduğu durumlarda uygulamanın nasıl davrandığını test etmek için; host’u ya da ilgili ekranda tetiklenen servis isteğini Block List’e ekleyebiliriz.
Bir başka örnek olarak; Uygulamadaki icon veya resimler farklı bir sunucudan indiriliyorsa bu sunucu erişilemez olduğunda ön yüzün nasıl göründüğünü ve hızının hangi seviyede olduğunu test etmek için Block List’e ekleme methodunu kullanmak iş görecektir.
Breakpoint
Breakpoint özelliği; eklendiği servis Charles üzerinden geçmeden önce kullanıcının request ve response içeriğini düzenlemesi ya da request’i blocklamasına olanak sağlar.
Özellikle hata senaryolarını test ederken breakpoint kullanmak testlerimizde kolaylık sağlayacaktır.
Breakpoint eklenmesi ve Request Düzenlenmesi
Düzenlemek istenilen servise breakpoint eklendiğinde; servis request ve response’u için kullanıcıdan giriş yapması beklenecektir.
Örneğin; Frontend requestinde backend’in beklemediği bir parametre gönderildiğinde ya da backend tarafından beklenen parametrelerden biri eksik gönderildiğinde ortaya bir hata çıkmasını bekleriz. Breakpoint ekleyerek; hatanın oluşup/oluşmadığı ve hata oluştuğunda ön yüzde nasıl görüntülendiğinin testlerini gerçekleştirebiliriz.
Edit Request panelindeki request body’den Title parametresini silerek Execute butonuna bastığımızda servis requesti backend’e Title parametresi olmadan iletilecektir.
Servis çağrısından sonra edinilen response için de bir ekran görüntülenecektir. Eğer servis cevabını değiştirmek istemiyorsak bu ekrana Execute diyebiliriz.
Görüldüğü gibi bir parametre eksik gönderildiğinde backend beklenildiği gibi frontend’e hata dönüşü yapmıştır. Ön yüzde de bu hata mesajı gösterilmiştir.
Benzer yöntemi takip ederek; backend’den iletilen Response üzerinde de değişiklik yaparak data çeşitliliğini sağlayabiliriz. Örneğin; pagination yapısını test etmek için elimizde yeterli sayıda data yoksa; JSON text ile görüntülenmesini beklediğimiz kadar veriyi response olarak ekleyerek ön yüz testlerimizi gerçekleştirebiliriz.
Map Remote
Map Remote özelliği; yerel bir kaynağa yapılan isteklerin remote bir kaynağa yönlendirilmesine olanak sağlar. Bu özellik sayesinde isteklerinizi farklı kaynaklara yönlendirebilirsiniz ya da isteklerinizi farklı pathler üzerine yönlendirebilirsiniz.
Bir diğer örnek ise; developmenttan sunulan bazı isteklerle canlı ortamdaki kaynağı incelemek istiyorsanız;development ortamındayken css ve resim dizinlerini canlı ortam directory’sinden yüklemek için dev to live mapping’ini kullanabilirsiniz.
Bir örnek üzerinen nasıl yönlendirildiğini inceleyelim;
Yemeksepeti’nde Balçova — Korutürk mahallesindeki restoranları listelediğimizi düşünelim.
Client isteğini farklı bir şehir ya da farklı bir mahalleye ait restoran listesini getirmek için yönlendirebiliriz.
Yukarıdaki şekilde yönlendirme yaptığımızda Balçova — Korutürk için restoran listeleme isteği yapıldığında Karşıyaka — Bostanlı’ya ait olan restoran listesi görüntülenecektir.
Map Local
Map Local, isteklerinizi yönlendirerek servis response’larını localinizdeki dosyalardan ya da farklı bir ana bilgisayardaki dosyalardan getirmenize olanak sağlayan bir manipülasyon fonksiyonudur.
Benzer mantıkla isteğinizi localinizdeki json formattaki dosyanıza yönlendirebilirsiniz böylece backend henüz hazır olmasa ya da yeni geliştirme henüz deploy olmasa bile ön yüz testlerinizi gerçekleştirebilirsiniz.
Load Test
Endpointleri önceden tanımlanmış aralıklara tetiklemeye olanak sağlayan fonksiyondur. Load test bilgi ve beceri gerektiren bir uzmanlık alanıdır ancak Charles Proxy üzerinden sessionları kaydederek; endpointlerdeki performansa göz atabiliriz.
Iterations: Endpointe kaç adet çağrı yapılacağını belirtir.
Concurrency: Charles’ın aynı anda kaç adet istek göndereceğini belirtir.
Repeat Delay: Girilen zaman aralığında endpointe istek yapacaktır. Örneğin 60000 girilirse her 1 dakikada endpointe gidecektir.
Bu yazımda mobil ve web testlerinde oldukça sık kullandığım, testlerin kalitesini arttıran ve data manipülasyonlarında kolaylık sağlayan Charles Proxy özelliklerinden bahsettim. Bir sonraki yazıda görüşmek üzere🙋🏼♀️
