Cypress Optimizasyon Rehberi: Yüksek Performanslı Testler

## Cypress ile Modern Test Otomasyonuna Giriş **Cypress**, modern web uygulamaları için geliştirilmiş, JavaScript tabanlı bir uçtan uca (E2E) test çerçevesidir. Geleneksel Selenium tabanlı araçların aksine, Cypress doğrudan tarayıcı içerisinde çalışarak daha hızlı, daha güvenilir ve daha kolay hata ayıklanabilir bir yapı sunar. Günümüzde **AI ve Machine Learning** modellerinin web arayüzlerine entegrasyonu arttıkça, bu karmaşık yapıların test edilmesi için yüksek performanslı otomasyon araçlarına olan ihtiyaç da doğru orantılı olarak artmıştır. Bu rehberde, Cypress testlerinizi nasıl optimize edeceğinizi, yürütme sürelerini nasıl düşüreceğinizi ve kurumsal düzeyde bir test mimarisini nasıl inşa edeceğinizi detaylandıracağız. Performans odaklı bir yaklaşım, yalnızca zaman kazandırmakla kalmaz, aynı zamanda CI/CD süreçlerindeki maliyetleri de minimize eder. ## Test Süreçlerinde AI ve Makine Öğrenmesi Entegrasyonu Yapay zeka tabanlı uygulamaların test edilmesi, deterministik olmayan çıktılar nedeniyle zordur. Cypress, bu noktada **AI model çıktılarını** doğrulamak için güçlü bir araç seti sunar. Özellikle büyük veri setleri ile çalışan ML modellerinin arayüz yansımalarını test ederken, asenkron süreçlerin yönetimi kritik önem taşır. Modern test stratejilerinde AI, "self-healing" (kendi kendini iyileştiren) test senaryoları oluşturmak için kullanılır. Cypress'in esnek yapısı, üçüncü taraf AI kütüphaneleriyle entegre olarak, değişen DOM yapılarına karşı dirençli testler geliştirilmesine olanak tanır. ## Cypress Kurulumu ve Performans Odaklı Yapılandırma Optimizasyon, henüz kurulum aşamasında başlar. Standart bir kurulum yerine, kurumsal ihtiyaçlara göre özelleştirilmiş bir yapılandırma tercih edilmelidir. `cypress.config.js` dosyası üzerinde yapılacak ince ayarlar, test çalışma süresini %30'a kadar iyileştirebilir. ```javascript const { defineConfig } = require("cypress"); module.exports = defineConfig({ e2e: { baseUrl: 'https://api.ai-app.com', viewportWidth: 1280, viewportHeight: 720, video: false, // Performans için video kaydını kapatın screenshotOnRunFailure: true, chromeWebSecurity: false, experimentalMemoryManagement: true, // Bellek sızıntılarını önler numTestsKeptInMemory: 5, // Tarayıcı belleğini korumak için düşük tutun setupNodeEvents(on, config) { // Node tabanlı event listener'lar buraya }, }, }); ``` ## Seçici Seçiciler (Selectors) ve DOM Etkileşim Stratejileri Testlerin kırılganlığını azaltmak ve hızını artırmak için doğru seçici (selector) kullanımı hayati önem taşır. CSS selector'ları yerine, testlere özel `data-cy` veya `data-test` nitelikleri kullanılmalıdır. Bu, frontend geliştiricileri sınıf isimlerini değiştirse bile testlerinizin çalışmaya devam etmesini sağlar. ```javascript // Kötü Uygulama cy.get('.btn-submit-large-blue').click(); // İyi Uygulama (Performanslı ve Güvenilir) cy.get('[data-cy="submit-button"]').click(); ``` > **Not:** Cypress, elementleri bulmak için otomatik bekleme (automatic waiting) uygular. Ancak, `cy.wait(5000)` gibi hard-coded beklemelerden kaçınmalı, bunun yerine elementin görünürlüğünü bekleyen `assertion` yapıları kullanmalısınız. ## API Testing ve Mocking ile Test Hızlandırma Uçtan uca testlerin en yavaş kısmı genellikle veritabanı ve ağ istekleridir. **AI & Machine Learning** uygulamalarında modelin yanıt vermesi saniyeler sürebilir. Bu tür durumlarda `cy.intercept` kullanarak API yanıtlarını simüle etmek (mocking), test hızını dramatik şekilde artırır. ```javascript // API isteğini yakalama ve sahte veri dönme cy.intercept('GET', '/api/v1/predict', { statusCode: 200, body: { prediction: 'positive', confidence: 0.98 } }).as('getPrediction'); cy.visit('/predict-page'); cy.wait('@getPrediction'); ``` ## Paralel Test Çalıştırma ve CI/CD Optimizasyonu Kurumsal projelerde yüzlerce test senaryosu bulunur. Bu testlerin tek bir makinede çalışması saatler sürebilir. Cypress'in **paralelleştirme** özelliği, testleri farklı makineler arasında dağıtarak toplam süreyi dakikalara indirir. | Strateji | Açıklama | Performans Etkisi | | :--- | :--- | :--- | | **Parallelization** | Testleri birden fazla CI makinesinde aynı anda çalıştırır. | Çok Yüksek | | **Load Balancing** | Testleri çalışma sürelerine göre makinelere dengeli dağıtır. | Yüksek | | **Sharding** | Test setlerini manuel olarak bölümlere ayırır. | Orta | ```bash # CI ortamında paralel çalıştırma komutu npx cypress run --record --key --parallel --browser chrome ``` ## Cypress Cloud ve Dashboard ile Metrik Analizi Performansı iyileştirmek için önce mevcut durumu ölçmek gerekir. Cypress Cloud, hangi testlerin en çok zaman aldığını, hangi testlerin "flaky" (istikrarsız) olduğunu ve hata oranlarını görselleştirir. **Önemli Metrikler:** - **Execution Time:** Testin toplam çalışma süresi. - **Flakiness Rate:** Testin bazen geçip bazen kalma oranı. - **Failure Rate:** Hangi adımlarda en çok hata alındığı. ## Bellek Yönetimi ve Memory Leak Önleme Teknikleri Uzun süren test setlerinde tarayıcı belleği dolabilir ve bu durum testlerin çökmesine neden olur. Özellikle büyük veri setlerinin işlendiği ML dashboard testlerinde bellek yönetimi kritiktir. `experimentalMemoryManagement` ayarı ve `numTestsKeptInMemory` değerinin optimize edilmesi bu sorunu çözer. ```javascript // Bellek temizliği için custom command örneği Cypress.Commands.add('clearLocalStorageAndCookies', () => { cy.clearCookies(); cy.clearLocalStorage(); cy.window().then((win) => { win.sessionStorage.clear(); }); }); ``` ## Custom Commands ve Plugin Kullanımı ile Verimlilik Tekrarlayan işlemleri (Login, veri hazırlama vb.) `support/commands.js` içerisinde tanımlayarak kod tekrarını önleyebilir ve bakımı kolaylaştırabilirsiniz. ```javascript // Login işlemini hızlandırmak için session kullanımı Cypress.Commands.add('loginViaAPI', (email, password) => { cy.session([email, password], () => { cy.request('POST', '/api/auth/login', { email, password }).then((res) => { window.localStorage.setItem('token', res.body.token); }); }); }); ``` ## Sık Yapılan Hatalar ve Anti-Pattern'ler 1. **Bağımlı Testler:** Her test izole olmalıdır. Bir testin başarısı diğerine bağlı olmamalıdır. 2. **Gereksiz Arayüz Kullanımı:** Login gibi işlemler arayüzden değil, API üzerinden yapılmalıdır. 3. **Yanlış Bekleme Kullanımı:** `cy.wait(number)` yerine her zaman `cy.wait('@alias')` veya element kontrolü tercih edilmelidir. 4. **Büyük Fixture Dosyaları:** Çok büyük JSON dosyaları yerine dinamik veri üretimi (faker.js) tercih edilmelidir. ## Performans İyileştirme Metrikleri ve Raporlama Test sonuçlarını raporlamak için `mochawesome` gibi kütüphaneler kullanarak, paydaşlara teknik olmayan, anlaşılır raporlar sunabilirsiniz. AI projelerinde, modelin doğruluk oranlarını da bu raporlara dahil etmek mümkündür. ```javascript // Raporlama konfigürasyonu "reporter": "mochawesome", "reporterOptions": { "reportDir": "cypress/reports", "overwrite": false, "html": true, "json": true } ``` ## Sık Sorulan Sorular (FAQ) 1. **Cypress neden Selenium'dan daha hızlı?** Cypress tarayıcının içinde çalışır ve ağ gecikmesi olmadan doğrudan DOM ile etkileşime girer. 2. **Flaky testleri nasıl önleyebilirim?** Test retries özelliğini kullanın ve asenkron işlemler için doğru assertion yapılarını kurgulayın. 3. **Cypress ile mobil uygulama testi yapılır mı?** Cypress web tabanlı uygulamalar ve mobil web (responsive) için uygundur; native mobil uygulamalar için Appium tercih edilmelidir. 4. **Video kaydı performansı etkiler mi?** Evet, özellikle CI ortamlarında video kaydı CPU tüketimini artırır. Sadece hata durumunda kayıt açılması önerilir. 5. **API testleri için Cypress kullanmak mantıklı mı?** Kesinlikle. Cypress'in `cy.request` komutu API testleri için oldukça hızlı ve etkilidir. ## Özet ve Sonuç Cypress, modern yazılım geliştirme süreçlerinde, özellikle **AI ve ML** entegrasyonuna sahip projelerde vazgeçilmez bir araçtır. Performans optimizasyonu; doğru seçici kullanımı, API mocking, paralel test yürütme ve etkili bellek yönetimi ile mümkündür. Bu rehberdeki stratejileri uygulayarak, test süreçlerinizi daha güvenilir ve maliyet etkin hale getirebilirsiniz.