Cypress Nedir ve Ağ Trafiği Nasıl Denetlenir?

Cypress, modern web sitelerinin kullanıcı arayüzünü ve arka plan iletişimini tarayıcı içinde doğrudan çalışarak sınayan bir test otomasyon aracıdır. Bu araçla sayfadaki tıklama adımlarını doğrulayabilir, sunucuya giden istekleri dinleyip sahte yanıtlar üreterek senaryolarınızı kesintisiz tamamlayabilirsiniz. Böylece hataları kaynağında fark edip güvenli ürün sürümleri hazırlarsınız.

Modern web uygulamalarında Cypress nedir ve nasıl çalışır?

Kullanıcıların bir düğmeye tıklamasıyla başlayan arayüz hareketleri, arka planda karmaşık veri akışlarını tetikler. Web projeleri büyüdükçe bu hareketlerin doğruluğunu sınamak zorlaşır. Doğrulama süreçlerine adım atan ekipler için bu çatı, tarayıcıyla kurulan bağın yönünü değiştirmesi bakımından ayrışır. Geleneksel araçlar komutlarını tarayıcıya dışarıdan bir ağ köprüsüyle iletirken, bu sistem doğrudan tarayıcının kendi JavaScript yürütme döngüsü içinde çalışır. Kodunuz uygulamanın hemen yanı başında koştuğu için komutlar gecikmeden işlenir ve arayüz tepkileri anlık olarak takip edilir.

Doğrudan tarayıcı içinde yer almanın en somut faydası, sayfa bileşenleriyle kurulan temasta görülür. Sistem, DOM üzerindeki değişiklikleri, olay dinleyicilerini ve ağ isteklerini aynı bellek alanında izler. Araya harici bir sürücü ya da ek iletişim katmanı girmediği için komutların iletilmesinde yaşanan veri paket gecikmeleri ortadan kalkar. Böylece test adımları, kullanıcının gerçek bir tarayıcıda deneyimlediği akış hızına çok daha yakın biçimde icra edilir.

Otomatik bekleme ve senkronizasyon

Arayüz doğrulamasında yaşanan hataların büyük kısmı, sayfanın henüz yüklenmemiş bir parçasına tıklanmaya çalışılmasından kaynaklanır. Bu motor, hedeflenen öğe görünür hale gelene, animasyonunu bitirene veya tıklanabilir duruma erişene kadar kendiliğinden bekler. Kodlarınıza sabit bekleme süreleri eklemek zorunda kalmazsınız. DOM ağacındaki hareketler sürekli izlendiği için asenkron işlemler tamamlandığı anda sonraki komuta geçilir. Bu akış, testlerin gereksiz yere başarısız olmasını engeller ve denetimlerin güvenilirliğini artırır.

Mimarinin sağladığı hız ve kararlılık, uçtan uca test yazımını daha pratik hale getirir. Sağlam bir test piramidi kurgularken tabandaki birim denetimlerinin üzerine eklenen arayüz adımları, bu otomatik senkronizasyon sayesinde kırılgan olmaktan kurtulur. Geliştiriciler, testin ne zaman durup ne zaman devam edeceğini tek tek hesaplamak yerine doğrudan kullanıcı akışını tasarlamaya odaklanabilir.

Mimari sınırlar ve kısıtlamalar

Tarayıcının kendi kurallarına tabi olarak çalışmak bazı yapısal sınırları da beraberinde getirir. Test koşumu sırasında tarayıcı sekmeleri arasında geçiş yapamazsınız; bütün senaryonun tek bir pencere içinde tamamlanması beklenir. Benzer biçimde, güvenlik duvarları gereği aynı test adımı içinde tamamen bağımsız iki farklı alan adına serbestçe yönelmek doğrudan desteklenmez. Uygulamanız üçüncü taraf bir doğrulama servisine yönlenip geri dönüyorsa, bu akışı tek bir oturum içinde yürütmek için ek düzenlemeler yapmanız gerekir.

Söz konusu sınırları bilmek, projelerinizde doğru sınama yaklaşımını seçmenizi kolaylaştırır. Çok pencereli ya da birbirinden kopuk alan adlarına dağılan işlemler yerine tek sayfada akan kullanıcı yolculukları bu mimariyle son derece hızlı doğrulanır. Testlerinizi planlarken mimarinin getirdiği bu yapısal çerçeveyi dikkate alabilir ve senaryolarınızı tarayıcının tekil çalışma prensibine uygun şekilde bölümlere ayırabilirsiniz.

Test engineer için Cypress kurulumu ve temel bileşenler

Web otomasyon projelerinde ilk adımı atarken çalışma ortamını hızlıca hazır hale getirmek zaman kazandırır. Harici sürücüler indirmeden ya da işletim sisteminde karmaşık yol tanımlamaları yapmadan doğrudan Node.js ekosisteminden yararlanabilirsiniz. Projenizin kök dizininde terminali açıp npm veya yarn paket yöneticisini kullanarak kurulumu tek komutla tamamlarsınız. Örneğin terminal ekranına npm install cypress --save-dev yazdığınızda ya da yarn tercih ediyorsanız yarn add cypress --dev komutunu çalıştırdığınızda ilgili paket doğrudan geliştirme bağımlılıklarınız arasına eklenir. Böylece ek bir yazılıma gerek kalmadan test ortamınızı dakikalar içinde ayağa kaldırırsınız.

Kurulum bittikten sonra aracı ilk kez tetiklemek için iki temel yöntemden birini seçebilirsiniz. Terminale npx cypress open yazdığınızda karşınıza etkileşimli bir grafik kullanıcı arayüzü çıkar. Bu görsel panelde tarayıcı seçimini yapabilir, senaryolarınızın adım adım nasıl koştuğunu canlı olarak izleyebilirsiniz. Buna karşın sürekli entegrasyon sunucularında veya arka planda hızlı sonuç almak istediğiniz durumlarda npx cypress run komutunu çalıştırırsınız. Bu komut, testleri başsız yani headless modda yürütür ve tarayıcı penceresi açmadan tüm sonuçları doğrudan terminal ekranına yansıtır.

Dosya düzeni ve yapılandırma ayarları

Aracı ilk kez başlattığınızda sistem, projenizin ana dizinine cypress.config.js dosyasını ve standart bir klasör yapısını kendiliğinden yerleştirir. Bu yapılandırma dosyasında testlerin koşacağı temel URL adresini, genel zaman aşımı sürelerini ve ekran kaydı tercihlerini belirlersiniz. Otomasyon senaryolarınızı güncel web standartlarında yazarken modern bir alternatif olan Playwright test araçlarında olduğu gibi, burada da tüm çalışma kurallarını tek bir merkezden denetleme kolaylığı bulursunuz. Düzenli bir altyapı, senaryo sayısı arttığında projenin bakımını kolaylaştırır.

Oluşturulan temel dizin hiyerarşisi üç ana parçadan meydana gelir ve her parçanın görevi bellidir:

• e2e: Kullanıcıların sitede gerçekleştirdiği adımları baştan sona taklit eden test dosyalarını bir araya getirir.
• fixtures: Senaryolarda ihtiyaç duyulan statik sahte verileri ve yanıt kalıplarını barındıran JSON dosyalarını saklar.
• support: Tekrarlayan işlemleri pratik hale getirmek için yazdığınız özel komutları ve genel yardımcı fonksiyonları tutar.

Temel kurulumu bitiren ekipler için bu yapı, hem uçtan uca senaryoları hem de tekil React, Vue ya da Angular arayüz parçalarını tarayıcıda doğrudan çalıştıran bütünleşik bir JavaScript test aracı sunar. Bu düzen sayesinde uygulamanın tüm sayfalarını tek tek dolaşmadan yalnızca belirli bir bileşeni izole edip doğrulayabilirsiniz. Böyle bir yapı kurduğunuzda testlerinizi güvenle yazmaya başlayabilir ve ekibinizle ortak standartlarda ilerleyebilirsiniz.

Uçtan uca senaryolarda Cypress ağ trafiği denetleme adımları

Kullanıcıların arayüzde yaptığı her tıklama, arka planda çalışan sunuculara belirli veri paketleri gönderir. Bu isteklerin doğru adrese ulaşıp hedeflenen cevabı ürettiğini denetlemek, arayüz testlerini yüzeysel bir görsel kontrolden çıkarıp tam teşekküllü bir doğrulamaya dönüştürür. Geleneksel bir Selenium test kurgusunda tarayıcı seviyesindeki ağ trafiğini doğrudan yakalamak ek proxy araçları gerektirirken, modern yapılarda bu akış doğrudan test senaryosunun bir parçası haline gelir.

Ağ trafiğini izlemeye başlarken atacağınız ilk adım, cy.intercept() komutunu kullanarak dinlenecek REST API uç noktasını tanımlamaktır. Bu komuta HTTP yöntemini ve hedeflenen URL desenini aktararak tarayıcının göndereceği çağrıları filtreleyebilirsiniz. Örneğin bir oturum açma adımında yalnızca POST türündeki /api/v1/auth/login adresine giden çağrıları izlemeye alırsınız. Filtreyi belirledikten sonra, yakalanan isteğe as('alias') sözdizimi yardımıyla akılda kalıcı bir takma ad atarsınız. İstekleri bu şekilde adlandırmak, test kodunun ilerleyen satırlarında o çağrıya rahatça başvurmanızı sağlar.

Takma ad verdiğiniz bir isteği denetlemek için cy.wait() komutunu devreye alırsınız. Bu komut, arayüzdeki form gönderildikten sonra arka plan çağrısı başarıyla sonuçlanana kadar sonraki test adımlarını bekletir. Aksi takdirde test koşucusu henüz sunucudan yanıt gelmeden sayfa içeriğini doğrulamaya çalışır ve gereksiz test kırılmaları yaşanır. Bekleme tamamlandığında ise dönen HTTP durum kodunun 200 veya 201 olduğunu, ayrıca yanıt yükünün (payload) beklenen kullanıcı kimliği ya da yetki anahtarını içerdiğini tek bir doğrulama zinciriyle teyit edebilirsiniz.

Ağ denetiminde izleyebileceğiniz yöntemler ihtiyaca göre farklılık gösterir. Aşağıdaki tabloda projelerinizde tercih edebileceğiniz temel yaklaşımların özellikleri yer alır:

Cypress nedir?

Modern web uygulamalarını doğrudan tarayıcı içerisinde uçtan uca, bileşen ve ağ seviyesinde sınayan JavaScript tabanlı bir test otomasyon aracıdır. Bu yapı sayesinde ağ denetimi adımlarını kurarken harici sürücüler yapılandırmak zorunda kalmazsınız. Kullanıcı gibi davranarak arayüzde ilerlerken arka plandaki tüm veri transferini tek bir test dosyasında şeffafça takip edebilirsiniz.

Ağ isteklerini yakalama ve sahte yanıtlarla simüle etme yöntemleri

Kullanıcı arayüzlerinin dış kaynaklarla kurduğu iletişim her zaman pürüzsüz ilerlemez. Uzak sunuculardan kaynaklanan kesintileri veya beklenmeyen durumları canlı ortamda elle üretmek oldukça zordur. Uçtan uca test senaryolarını koşarken tarayıcı ağ trafiğini doğrudan araya girerek yönetebilen esnek bir test çatısının sunduğu imkanları değerlendirebilirsiniz. İlgili çağrıları durdurup kendi hazırladığınız sahte verileri arayüze ilettiğinizde, uygulamanın olumsuz senaryolardaki tepkilerini zahmetsizce gözlemlersiniz.

Ağ trafiğini yönlendirirken cy.intercept() komutuna statusCode ve body nesneleri ekleyebilirsiniz. Örneğin arka plandaki servisin çöktüğü bir anı canlandırmak için 500 durum kodunu ve hata mesajı içeren bir gövdeyi doğrudan istemciye dönebilirsiniz. Benzer şekilde aranan bir kaydın sistemde yer almadığı durumları denetlemek adına 404 yanıtı üreterek, sayfada belirmesi gereken "Kayıt bulunamadı" uyarısının ekrana gelip gelmediğini kontrol edersiniz. Böylece gerçek bir sunucu çöküşüne gerek kalmadan arayüzün savunma mekanizmasını sınarsınız.

Statik verilerle ve gecikmelerle test senaryoları

Döneceğiniz yanıt verisi birkaç satırdan daha uzun bir yapıya sahipse, bu bilgileri test dosyalarının içinde satır satır yazmak kodun okunurluğunu düşürür. Bunun yerine projenin fixtures dizini altına yerleştireceğiniz statik JSON dosyalarından faydalanabilirsiniz. Büyük bir ürün listesini veya karmaşık bir kullanıcı profilini temsil eden bu JSON verilerini cy.fixture() yardımıyla sahte yanıt olarak eşlersiniz. Kod tabanınız derli toplu kalırken, gerçek sunucunun döneceği karmaşık veri modellerini birebir taklit etmiş olursunuz.

Sadece dönen verinin içeriği değil, o verinin tarayıcıya ne kadar sürede ulaştığı da kullanıcı deneyimini doğrudan şekillendirir. Ağ gecikmelerini ve zaman aşımı davranışlarını test etmek için tanımlayacağınız delayMs parametresi, cevabın dönmesini dilediğiniz milisaniye kadar geciktirir. Yavaş bir mobil bağlantıyı ya da yoğunluktan dolayı geç yanıt veren bir mikroservisi bu yolla simüle edebilirsiniz. İstek geciktiğinde arayüzde bir yükleme göstergesinin (spinner) belirdiğini ve yanıt tamamlandığında yerini asıl içeriğe bıraktığını güvenle doğrulayabilirsiniz.

Farklı ağ durumlarını test ederken izleyebileceğiniz temel akış şu adımlardan oluşur:

• Dinlemek istediğiniz servis adresine uygun URL desenini belirleyip araya girersiniz.
• Senaryonun amacına göre 404, 500 gibi bir durum kodu veya fixtures klasöründeki bir JSON dosyasını yanıta bağlarsınız.
• Gerekiyorsa bağlantı yavaşlığını taklit etmek için milisaniye cinsinden bir gecikme süresi belirlersiniz.
• Sayfa üzerindeki butona tıklayarak isteği tetikler ve arayüzün beklenen hata ya da yükleme mesajını verdiğini incelersiniz.

Bu yaklaşım sayesinde harici sistemlerin erişilebilirliğine bağımlı kalmadan tüm sınır durumları ele alırsınız. Sunucu tarafında henüz geliştirilmemiş uç noktalar bulunsa bile, arayüz geliştirmelerinizi ve testlerinizi gecikmeden tamamlayabilirsiniz.

Hata ayıklama süreçlerinde tarayıcı konsolunu ve kayıtları kullanma

Otomasyon adımları beklenmedik bir anda kırmızıya döndüğünde, hatanın tam olarak hangi aşamada meydana geldiğini anlamak her zaman kolay olmaz. Sol tarafta yer alan Command Log paneli, çalıştırılan her komutu adım adım listeler. Bu panelde fare imlecini geçmiş bir eylemin üzerine getirdiğinizde, Time Travel özelliği devreye girer ve uygulamanın tam o andaki durumunu sağdaki önizleme alanına yansıtır. Böylece bir düğmenin tıklanmadan hemen önceki halini ya da sayfa yönlendirmesi gerçekleşmeden önce arayüzün nasıl göründüğünü anlık olarak görebilirsiniz.

Arayüzdeki DOM değişimlerini adım adım izlemek, test senaryolarında tahmin yürütme zorunluluğunu ortadan kaldırır. Örneğin bir form gönderimi başarısız olduğunda, Time Travel ile eylem öncesine ve sonrasına dönerek doğrulama mesajının çıkıp çıkmadığını kontrol edebilirsiniz. Çerçeve, her komut için DOM'un o saniyedeki anlık kopyasını bellekte tutar. Bu sayede uygulamanın akışını geri sararak sayfa öğelerinin zamanında yüklenip yüklenmediğini doğrudan gözlemleme şansı bulursunuz.

Tarayıcı konsolunda istek ayrıntılarını inceleme

Komut günlüğünde yer alan adımlardan birine tıkladığınızda, sistem o komuta ait tüm teknik ayrıntıları Chrome DevTools Console sekmesine aktarır. Test yürütülürken F12 tuşuyla açabileceğiniz bu alanda, seçtiğiniz adımın tetiklediği ağ istekleri, gönderilen başlık bilgileri ve arka plandan dönen ham gövde içerikleri listelenir. Web uygulamalarının davranışını incelerken geliştirme ekipleri, tarayıcıyla iç içe çalışan bu doğrudan hata ayıklama desteğini genellikle en faydalı yön olarak görür.

Konsol panelindeki nesneleri genişleterek sunucuya iletilen yüklerin doğruluğunu veya gelen yanıtın biçimini hemen o anda sorgulayabilirsiniz. Herhangi bir komut satırına tıkladığınızda DevTools üzerinde beliren tablolarda şu verileri bulursunuz:

• Komut argümanları: Fonksiyona iletilen seçiciler, yazılan metinler veya bekleme süreleri.
• Ağ çağrısı ayrıntıları: Uç noktaya yapılan isteklerin URL yolu, durumu, HTTP yöntemi ve yanıt nesnesi.
• DOM elemanı referansı: Komutun hedef aldığı HTML düğümü ve o anki görünürlük nitelikleri.

Bu ayrıntılı çıktılar, hatanın kullanıcı arayüzündeki bir render sorunundan mı yoksa arka plandaki geçersiz bir ağ yanıtından mı kaynaklandığını saniyeler içinde ayırt etmenizi sağlar. Geliştirici araçlarındaki JavaScript konsolunda doğrudan değişkenleri çağırabilir ve sayfa öğeleri üzerinde geçici denemeler yapabilirsiniz.

Kayıtlar ve ekran görüntüleri ile çalışma

Testlerinizi görsel bir pencere olmadan terminal üzerinden cypress run komutuyla yürüttüğünüzde, hata anlarını yakalamak için kayıt mekanizmaları devreye girer. Bu modda meydana gelen her başarısızlıkta sistem, testin patladığı anı gösteren tam ekran bir ekran görüntüsünü proje dizinindeki özel klasöre kaydeder. Ek olarak tüm koşuyu baştan sona kaydeden video dosyası da oluşturulur; böylece yerel geliştirme ortamınızda ortaya çıkmayan ancak uzak sunucu üzerinde patlak veren gecikmeleri dizinden bu videoları izleyerek kolayca tespit edebilirsiniz.

Cypress test otomasyonu hakkında uzmanından bilgi alın

Ağ trafiği denetimi ve test süreçlerinizi nasıl optimize edebileceğinizi birlikte değerlendirelim.

Bilgi Al WhatsApp