Cypress vs Playwright

Cypress’i incelediğimiz ve test yazdığımız yazıya ulaşmak için buraya tıklayabilirsin.

E2E Testlerin Önemi

Gerçek Kullanıcı Senaryoları: E2E testleri, yazılımın gerçek kullanıcı senaryolarında nasıl çalıştığını doğrular, böylece kullanıcı deneyimi en üst düzeye çıkarılır.

Tam Sistem Doğrulaması: Bu testler, yazılımın tüm bileşenlerinin birlikte sorunsuz çalıştığını doğrular, entegrasyon sorunlarını erken tespit eder.

Hataların Erken Tespiti: E2E testleri, hataları erken tespit ederek çözüm süresini kısaltır ve maliyetleri düşürür.

Kullanıcı Memnuniyeti: Sorunsuz bir kullanıcı deneyimi sağlayarak, kullanıcı memnuniyetini ve sadakatini artırır.

Regresyon Testi: Yeni özellikler eklenirken veya mevcut özellikler değiştirilirken, eski işlevselliklerin bozulmadığını garanti eder.

Zaman ve Kaynak Tasarrufu: Otomatikleştirilmiş E2E testler, manuel test süreçlerini azaltarak zamandan ve kaynaklardan tasarruf sağlar.

Dokümantasyon ve İzlenebilirlik: Test senaryoları, yazılımın nasıl çalıştığını ve hangi durumların test edildiğini belgeleyerek daha iyi izlenebilirlik sağlar.

Popüler Test Araçları

Projenizin gereksinimlerine ve özelliklerine bağlı olarak en uygun test aracını seçmek önemlidir. İşte bazı popüler test araçları:

Selenium: Web uygulamalarını otomatik olarak test etmek için yaygın olarak kullanılan ve farklı tarayıcılarla uyumlu bir araçtır.

Cypress: Modern web uygulamalarını test etmek için güçlü bir araç olan Cypress, gerçek zamanlı test etme yeteneği ve kolay kullanımıyla öne çıkar.

Playwright: Microsoft tarafından geliştirilen Playwright, Chromium, Firefox ve WebKit gibi tarayıcıları destekleyen ve otomatik testlerin yazılmasını sağlayan modern ve güçlü bir test aracıdır.

Mocha: JavaScript'te kullanılan bir test çerçevesi olan Mocha, esnek ve özelleştirilebilir bir yapı sunar. Farklı test tiplerini destekler ve geniş bir kullanıcı kitlesine sahiptir.

Jasmine: JavaScript için bir başka popüler test çerçevesi olan Jasmine, kolay anlaşılır ve okunabilir test yazmayı sağlar.

Karma: Farklı tarayıcılarda JavaScript kodunu çalıştırmak ve test etmek için kullanılan bir test çalışma ortamı olan Karma, farklı test çerçeveleriyle entegrasyonu kolaylaştırır.

Hangi Test Aracını Seçmeli?

Projenin Gereksinimleri: Projenizin özelliklerine ve gereksinimlerine bağlı olarak hangi aracın daha uygun olduğunu değerlendirin. Örneğin, bazı araçlar belirli tarayıcılarla daha iyi entegre olabilir veya belirli teknolojilere daha uygun olabilir.

Otomasyon Yetenekleri: Otomatik testlerin ne kadar etkili bir şekilde yazılabilir ve çalıştırılabilir olduğuna bakın. Araçların otomasyon yetenekleri ve kullanım kolaylığı, geliştirme sürecini büyük ölçüde etkileyebilir.

Topluluk Desteği: Bir aracın etrafında aktif bir topluluk varsa, sorunlarla karşılaşıldığında çözüm bulmak daha kolay olur. Aktif bir topluluğa sahip araçlar genellikle daha hızlı gelişir ve güncellenir.

Performans ve Hız: Testlerin ne kadar hızlı çalıştığı ve uygulamanın ne kadar hızlı test edildiği önemlidir. Özellikle büyük projelerde, hızlı ve verimli testler geliştirme sürecini hızlandırabilir.

Sonuç olarak, "Hangi test aracını kullanmalıyım?" sorusunun tek bir yanıtı yoktur. Projenizin özel gereksinimlerine ve koşullarına göre en uygun aracı seçmek için yukarıdaki faktörleri göz önünde bulundurmalısınız.

Cypress ve Playwright

Cypress

Cypress, modern web uygulamalarını test etmek için JavaScript tabanlı bir test otomasyon aracıdır. JavaScript tabanlı olduğu için, özellikle JavaScript ile yazılan web uygulamaları için etkilidir. Bu araç, testleri gerçek zamanlı olarak izleme, kolay hata ayıklama ve tarayıcı üzerinde doğrudan kontrol gibi özellikler sunar.

İşte Cypress’in bazı özellikleri:

• Gerçek Zamanlı Test Etme: Testleri gerçek zamanlı olarak izleme imkanı sunar, bu da hızlı hata ayıklama ve geliştirme sürecini kolaylaştırır.

• Kolay Kurulum ve Kullanım: Basit API yapısı ve kolay kurulumu sayesinde test yazmak ve çalıştırmak hızlı ve kolaydır.

• Otomatikleştirilmiş Bekleme: Sayfa yükleme sürelerini ve beklemeleri otomatik olarak yönetir, bu da daha güvenilir ve tutarlı testler sağlar.

• Debug Yetenekleri: Testlerinizi hata ayıklama modunda adım adım çalıştırma ve her adımda arayüzde duraklatma gibi güçlü hata ayıklama özellikleri sunar.

• Tarayıcı Denetimi: Tarayıcı üzerinde doğrudan denetim sağlar ve tarayıcı API’lerine erişim sunar. Bu, testlerinizi daha kapsamlı hale getirir ve daha fazla senaryoyu test etmenize olanak tanır.

• Eşzamanlı Testler: Eşzamanlı olarak birden çok test çalıştırma yeteneği sunar. Bu, test sürecini hızlandırır ve daha verimli hale getirir.

Playwright

Playwright, Microsoft tarafından geliştirilen, web uygulamalarını test etmek için modern ve güçlü bir test otomasyon aracıdır. Chromium, Firefox ve WebKit gibi tarayıcıları destekler ve otomatik testlerin yazılmasını sağlar.

Playwright’in bazı özellikleri:

• Çoklu Tarayıcı Desteği: Chromium, Firefox ve WebKit gibi tarayıcıları destekler, bu da geniş kapsamlı tarayıcı testi imkanı sunar.

• Paralel Test Çalıştırma: Farklı tarayıcılarda ve cihazlarda paralel olarak test çalıştırma yeteneği sunar, bu da test süreçlerini hızlandırır.

• Güçlü API: Ağ müdahaleleri, tarayıcı bağlamları ve kullanıcı etkileşimleri gibi geniş kapsamlı özellikler sunar.

• Erişilebilirlik Testleri: Erişilebilirlik testi yapma yeteneği sunar, böylece uygulamalarınızın erişilebilirlik standartlarına uyduğunu doğrulayabilirsiniz.

• Web ve Mobil Testler: Hem web hem de mobil uygulamalar için kapsamlı test senaryoları oluşturma imkanı sunar.

• CI/CD Entegrasyonu: DevOps süreçlerine kolayca entegre edilebilir ve sürekli entegrasyon/sürekli teslimat (CI/CD) araçlarıyla uyumlu çalışır.

Hangi Durumda Hangisini Kullanmalısınız?

Başlangıç ve Orta Seviye Kullanıcılar İçin:
Cypress, kullanımı ve öğrenmesi daha kolay olduğu için yeni başlayanlar ve hızlı sonuç almak isteyenler için idealdir. Basit kurulumu ve kullanıcı dostu arayüzü, test yazma ve çalıştırma süreçlerini hızlı ve verimli hale getirir.

Çoklu Tarayıcı Testleri ve İleri Seviye Özellikler İhtiyaçları İçin:
Playwright, çoklu tarayıcı desteği (Chromium, Firefox ve WebKit) ve gelişmiş özellikleri ile karmaşık test senaryoları ve geniş çaplı tarayıcı uyumluluk testleri için daha uygundur.

Genişletilebilirlik ve Eklentiler:
Cypress, zengin eklenti ekosistemi ve geniş topluluğu sayesinde entegrasyon ve genişletilebilirlik konusunda büyük avantaj sağlar. Çeşitli üçüncü parti eklentilerle testlerinizi kolayca genişletebilir ve projenize özel çözümler oluşturabilirsiniz.

Esneklik ve Performans:
Playwright, esnek API’leri ve yüksek performansı ile karmaşık ve büyük ölçekli projeler için daha uygun olabilir. Kullanıcı etkileşimleri ve ağ müdahaleleri gibi gelişmiş senaryoları kolayca test edebilmenizi sağlar.

Cypress ve Playwright’in Karşılaştırılması

Tek Tarayıcı veya Sınırlı Tarayıcı Desteği ile Çalışmak:
Cypress, daha hızlı kurulum ve kullanım kolaylığı sağlar. Eğer projeniz sadece belirli tarayıcıları destekliyorsa, Cypress sizin için ideal olabilir.

Geniş Çapraz Tarayıcı Testleri Yapmak:
Playwright, Chromium, Firefox ve WebKit desteği ile geniş tarayıcı uyumluluğu gerektiren projeler için daha uygundur. Farklı tarayıcılarda tutarlı sonuçlar elde etmenizi sağlar.

Farklı Programlama Dillerini Kullanmak:
Playwright, JavaScript dışında Python, C#, ve Java gibi dillerde de destek sunar. Bu, farklı dillerde test etme ihtiyacı olan projeler için daha esnek bir çözüm sağlar.

Playwright ile Giriş Sayfası Testi

Bu bölümde, Playwright kullanarak bir giriş sayfasını nasıl test edeceğimizi adım adım inceleyeceğiz. Her bir adımı detaylı olarak açıklayacağız.

Öncelikle Playwright’ı projemize dahil ediyoruz.

Playwright’ı çalıştırmak için npx playwright test — ui komutunu kullanabiliriz. Bu komutu çalıştırdıktan sonra karşımıza aşağıdaki gibi bir ekran çıkacak.

Şimdi uygulamamızın login ekranı için ilk testimizi yazmaya hazırız.

import { test, expect } from '@playwright/test';

test.describe('Login Page', () => {
  
  // Her testten önce giriş sayfasına git
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000/login'); // Giriş sayfasının URL'si
  });

  // Giriş sayfasının doğru görüntülendiğini kontrol et
  test('should display the login page', async ({ page }) => {
    await expect(page.locator('[data-testid="login-title"]')).toHaveText('Sign in to Continue'); // Başlık
    await expect(page.locator('[data-testid="login-description"]')).toHaveText('Enter your email to continue to your account'); // Açıklama
  });

  // Geçerli kimlik bilgileriyle giriş yapma testi
  test('should login with valid credentials', async ({ page }) => {
    await page.fill('input[name="email"]', 'name@shft.co');
    await page.fill('input[name="password"]', '123');
    await page.click('[data-testid="login-submit-button"]');
  });

  // Geçersiz kimlik bilgileriyle hata mesajı gösterme testi
  test('should show error message with invalid credentials', async ({ page }) => {
    await page.fill('input[name="email"]', 'invalid@example.com');
    await page.fill('input[name="password"]', 'wrongpassword');
    await page.click('[data-testid="login-submit-button"]');

    // Hata mesajının görünmesini bekleyin
    const errorMessageLocator = page.locator('.mb-2.rounded-2.border.bg-red-400');
    await expect(errorMessageLocator).toBeVisible({ timeout: 5000 });

    // Hata mesajının doğru olup olmadığını kontrol edin
    const errorMessage = await errorMessageLocator.textContent();
    expect(errorMessage).toContain('Email or password is incorrect'); // Hata mesajı içeriği
  });
});

Şimdi yukarıdaki teste adım adım bakalım.

1. Giriş Sayfasına Gitme

İlk olarak, her testten önce giriş sayfasına gitmeyi sağlıyoruz. Bu, testlerin her seferinde aynı başlangıç noktasından başlamasını sağlar ve tutarlılığı artırır.

import { test, expect } from '@playwright/test';

test.describe('Login Page', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000/login'); // Giriş sayfasının URL'si
  });

...

beforeEach bloğu, her testten önce çalışır ve page.goto yöntemi ile belirtilen URL'ye gider. Bu, testlerin başlangıç noktasının her seferinde aynı olmasını sağlar.

2. Giriş Sayfasının Doğru Görüntülendiğini Kontrol Etme

Giriş sayfasının doğru görüntülendiğini kontrol etmek için aşağıdaki testi ekliyoruz.

 test('should display the login page', async ({ page }) => {
    await expect(page.locator('[data-testid="login-title"]')).toHaveText('Sign in to Continue'); // Başlık
    await expect(page.locator('[data-testid="login-description"]')).toHaveText('Enter your email to continue to your account'); // Açıklama
  });

Bu test, giriş sayfasının başlığının ve açıklamasının doğru olup olmadığını kontrol eder. page.locator yöntemi ile belirli HTML elemanlarını seçer ve toHaveText yöntemi ile bu elemanların beklenen metne sahip olup olmadığını doğrular.

3. Geçerli Kimlik Bilgileriyle Giriş Yapma

Geçerli kimlik bilgileriyle giriş yapma işlemini test etmek için aşağıdaki testi ekliyoruz.

  test('should login with valid credentials', async ({ page }) => {
    await page.fill('input[name="email"]', 'name@shft.co');
    await page.fill('input[name="password"]', '123');
    await page.click('[data-testid="login-submit-button"]');
  });

Bu test, geçerli bir e-posta ve şifre ile giriş yapar. page.fill yöntemi ile e-posta ve şifre alanlarını doldurur ve page.click yöntemi ile giriş düğmesine tıklar. Bu adımlar, geçerli kimlik bilgileri kullanılarak giriş yapma senaryosunu simüle eder.

4. Geçersiz Kimlik Bilgileriyle Hata Mesajı Gösterme

Geçersiz kimlik bilgileri ile giriş yapma durumunda hata mesajının doğru görüntülendiğini kontrol etmek için aşağıdaki testi ekliyoruz.

test('should show error message with invalid credentials', async ({ page }) => {
    await page.fill('input[name="email"]', 'invalid@example.com');
    await page.fill('input[name="password"]', 'wrongpassword');
    await page.click('[data-testid="login-submit-button"]');

    const errorMessageLocator = page.locator('.mb-2.rounded-2.border.bg-red-400');
    await expect(errorMessageLocator).toBeVisible({ timeout: 5000 });

    const errorMessage = await errorMessageLocator.textContent();
    expect(errorMessage).toContain('Email or password is incorrect'); // Hata mesajı içeriği
  });

Playwright kullanarak bir giriş sayfasını nasıl test edeceğimizi adım adım inceledik. Testlerin her bir adımını parçalara ayırarak, her bir adımın neden önemli olduğunu ve nasıl uygulandığını açıkladık.

Sonuç

Hangi test otomasyon aracını tercih etmeniz gerektiği, projenizin özelliklerine ve hedeflerine bağlıdır. Örneğin, JavaScript odaklı bir proje ve tek bir tarayıcıda test etme ihtiyacınız varsa, Cypress sizin için daha uygun olabilir. Ancak, farklı dillerde test etme veya çoklu tarayıcı desteği gibi ihtiyaçlarınız varsa, Playwright daha esnek bir çözüm sunabilir.

Her iki araç da modern web uygulamalarının test edilmesi için güçlü seçeneklerdir. Projelerinizin gereksinimlerini dikkate alarak hangi aracın sizin için daha uygun olduğunu değerlendirebilirsiniz. Hangi aracı seçerseniz seçin, her iki araç da test otomasyonunu başarılı bir şekilde gerçekleştirebilecek kapasitededir.