Cypress Nedir ?

Cypress, web uygulamalarının regresyon testi için kullanılan bir frontend test otomasyon aracıdır. Windows, Linux ve macOS işletim sistemlerinde çalışabilen Cypress, MIT Lisansı altında açık kaynaklı bir yazılım olarak sunulmaktadır. Ayrıca, Cypress Cloud adında bir web uygulaması da bulunmaktadır. Cypress, geliştiricilerin ve QA ekiplerinin web uygulamalarının kullanıcı gözünden davranışlarını test etmelerine yardımcı olur. Genellikle JavaScript ile yazılır.

Cypress’in Özellikleri

Gerçek tarayıcıda test çalıştırır (Chrome, Edge, Firefox gibi).
Hızlıdır ve interaktiftir: Testler anlık olarak tarayıcıda çalıştırılır ve sonuçları canlı olarak görürsünüz.
Kolay kurulum: Tek bir komutla kurulabilir (npm install cypress).
Zengin GUI (Graphical User Interface) desteği vardır.
Snapshot (ekran görüntüsü) ve video kaydı alabilir.
Otomatik bekleme (wait) mekanizması sayesinde elementin görünmesini bekler.
API testleri de yapılabilir.

Cypress Avantajları

🚀 Hızlı ve gerçek zamanlı test çalıştırma
👀 Canlı önizleme ve hata ayıklama kolaylığı
⏱️ Otomatik bekleme (bekleme yazmak zorunda değilsin)
💻 Gerçek tarayıcıda test (Chrome, Firefox, Edge destekli)
🧪 Screenshot/video alma özelliği

Cypress ile Yapılabilecek Test Türleri

Test Türü	Açıklama
✅ End-to-End Test	Kullanıcı akışlarını baştan sona test eder
✅ Integration Test	Uygulama bileşenlerinin birlikte çalışmasını test eder
✅ Unit Test	Tekil bileşen veya fonksiyonları test eder
✅ API Test	`cy.request()` ile backend endpoint'lerini test eder

Cypress Kısıtlamaları

Sadece Chrome-tabanlı tarayıcılar ve Firefox destekleniyor.
Multi-tab (çok sekmeli) testler desteklenmiyor.
Mobil uygulama (native) testleri için uygun değil.

🚀 Cypress Kurulumu

  npm install cypress --save-dev
  npx cypress open

İlk komut Cypress’i yükler. İkinci komut ise Cypress GUI test runner’ı açar.

Cypress Klasör Yapısı (varsayılan)

/cypress
  /e2e           → Test dosyaları buraya yazılır
  /fixtures      → Test verileri (JSON, vs.)
  /support       → Ortak fonksiyonlar, setup dosyaları

Cypress Kullanımına Basit Bir Örnek

describe('Google Arama Testi', () => {
  it('Google ana sayfasını ziyaret eder ve arama yapar', () => {
    cy.visit('https://www.google.com');
    cy.get('input[name="q"]').type('Cypress nedir?{enter}');
    cy.contains('Cypress').should('be.visible');
  });
});

Cypress ile İlk Adım: Giriş ve Temel Bilgiler