Playwright ve Cypress ile E2E Otomasyon Testi Rehberi

Modern web yazılım geliştirme süreçlerinde kullanıcı deneyimini kesintisiz kılmak ve canlı ortamda oluşabilecek kritik hataların önüne geçmek için otomasyon süreçleri hayati bir rol oynar. Yazılım dünyasında gerçek kullanıcı davranışlarını baştan sona simüle eden Playwright ve Cypress ile E2E otomasyon testi, karmaşık web uygulamalarının kalitesini güvence altına almanın en etkili yoludur. Önceden manuel olarak saatler alan karmaşık regresyon testleri, günümüzde sürekli entegrasyon (CI/CD) hatlarına dahil edilen modern test framework'leri sayesinde dakikalar içinde tamamlanmaktadır. Yazılım testlerinin temelleri ve stratejileri hakkında genel bilgi edinmek isterseniz yazılım testi nedir başlıklı yazımıza göz atabilirsiniz.

End-to-End (E2E) yani uçtan uca testler, bir kullanıcının uygulamanızda gerçekleştirdiği tüm yolculuğu kapsar. Giriş yapmaktan ödeme yapmaya kadar uzanan bu süreçte veri tabanı, API servisleri ve ön yüz entegrasyonu tek bir senaryoda doğrulanır. Bu rehberde, 2026 yılı itibarıyla test otomasyon dünyasını domine eden iki büyük aracı; Cypress ve Playwright'ı mimari açıdan inceleyecek, adım adım kod örnekleriyle uygulamalı olarak karşılaştıracağız.

E2E Test Mimarisi: Cypress ve Playwright Nasıl Çalışır?

Test otomasyonu araçlarını doğru seçmek için öncelikle mimari çalışma prensiplerini anlamak gerekir. Geleneksel Selenium altyapısının yerini alan Cypress ve Playwright, tarayıcı ile iletişim kurma noktasında köklü mimari farklılıklara sahiptir.

Cypress Mimarisinin Detayları

Cypress, doğrudan tarayıcının içinde (in-browser) çalışan bir mimariye sahiptir. Node.js tabanlı bir sunucu süreci başlatır ve test kodlarınızı tarayıcıda yürütülen iframe yapısı içerisine enjekte eder. Bu durum Cypress'e şu avantajları ve kısıtlamaları getirir:

• Aynı Döngüde Çalışma: Test kodunuz uygulama kodunuzla aynı olay döngüsünde (event loop) çalıştığı için DOM elemanlarına erişim son derece hızlıdır.
• Ağ Trafiğini Dinleme: DOM manipülasyonlarını ve HTTP isteklerini anlık olarak yakalayıp müdahale etmek (stubbing/mocking) oldukça kolaydır.
• Kısıtlamalar: Çoklu tarayıcı sekmesi (multi-tab) ve birden fazla kök alan adı (cross-domain) desteği mimari nedenlerle kısıtlıdır veya ek konfigürasyon gerektirir.

Playwright Mimarisinin Detayları

Microsoft tarafından geliştirilen Playwright ise tarayıcıları doğrudan Chrome DevTools Protocol (CDP) ve benzeri düşük seviyeli websocket protokolleri üzerinden dışarıdan (out-of-process) kontrol eder.

• Tek Süreçte Çoklu Bağlam: Tek bir Playwright süreci içerisinde birbirinden tamamen izole edilmiş yüzlerce BrowserContext oluşturulabilir. Bu da paralel test çalıştırmada muazzam bir hız kazandırır.
• Çoklu Dil Desteği: Playwright sadece JavaScript/TypeScript değil; Python, Java ve C# gibi dilleri de destekler. Örneğin Python ile otomasyon projeleri geliştiren ekipler Python ile programlamaya başlama rehberi içeriğimizdeki prensipleri Playwright ile birleştirebilir.
• Gerçek Çoklu Sekme Desteği: Birden fazla sekme, iframe ve farklı alan adları arasındaki geçişler yerel olarak desteklenir.

Cypress ile E2E Otomasyon Testi Kurulumu ve İlk Senaryo

Cypress kurulumu Node.js ekosisteminde oldukça basittir. Sıfırdan bir projede Cypress'i devreye almak için aşağıdaki adımları izleyebilirsiniz.

1. Kurulum Adımları

Proje dizininizde terminali açın ve paketi projenize geliştirici bağımlılığı olarak ekleyin:

mkdir cypress-e2e-demo
cd cypress-e2e-demo
npm init -y
npm install cypress --save-dev

Cypress'i ilk kez başlatmak ve gerekli klasör yapısını otomatik oluşturmak için şu komutu çalıştırın:

npx cypress open

Açılan arayüzden E2E Testing seçeneğini belirleyip konfigürasyon dosyalarının (cypress.config.js) oluşturulmasını onaylayın.

2. Örnek Cypress Test Senaryosu

Aşağıdaki örnekte bir kullanıcı giriş formunun doğrulanması senaryosu yer almaktadır. cypress/e2e/login.cy.js adında bir dosya oluşturup şu kodları ekleyin:

describe('Kullanıcı Giriş Senaryosu - Cypress', () => {
  beforeEach(() => {
    // Her test öncesi login sayfasına git
    cy.visit('https://example.com/login');
  });

  it('Geçerli bilgilerle başarılı giriş yapılabilmeli', () => {
    // Input alanlarına veri yazma
    cy.get('input[name="email"]').type('testkullanici@example.com');
    cy.get('input[name="password"]').type('GuvenliSifre123!');
    
    // Butona tıklama
    cy.get('button[type="submit"]').click();

    // Yönlendirme ve dashboard kontrolü
    cy.url().should('include', '/dashboard');
    cy.get('.welcome-message')
      .should('be.visible')
      .and('contain', 'Hoş geldiniz');
  });

  it('Hatalı şifre girildiğinde uyarı mesajı görünmeli', () => {
    cy.get('input[name="email"]').type('testkullanici@example.com');
    cy.get('input[name="password"]').type('YanlisSifre');
    cy.get('button[type="submit"]').click();

    cy.get('.error-alert')
      .should('be.visible')
      .and('have.text', 'E-posta veya şifre hatalı.');
  });
});

Cypress'in should zinciri sayesinde açık bir bekleme (sleep) koymanıza gerek kalmaz; Cypress eleman ekranda belirene kadar otomatik olarak bekler (auto-waiting).

Playwright ile E2E Otomasyon Testi Kurulumu ve İleri Seviye Özellikler

Playwright, modern web test ihtiyaçlarına yanıt vermek üzere tasarlanmıştır. Kurulum sihirbazı tarayıcı sürücülerini (Chromium, Firefox, WebKit) otomatik olarak indirir.

1. Kurulum Adımları

Tek bir komutla Playwright projesini başlatabilirsiniz:

npm init playwright@latest

Bu komut size TypeScript/JavaScript tercihinizi, test klasörü adını ve GitHub Actions CI konfigürasyonunun eklenip eklenmeyeceğini sorar. Kurulum bittiğinde tüm gerekli tarayıcı motorları bilgisayarınıza indirilir.

2. Örnek Playwright Test Senaryosu

Playwright, varsayılan olarak TypeScript desteği ile gelir ve async/await yapısını kullanır. tests/login.spec.ts dosyası oluşturarak aşağıdaki testi yazabilirsiniz:

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

test.describe('Kullanıcı Giriş Senaryosu - Playwright', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com/login');
  });

  test('Geçerli bilgilerle başarılı giriş yapılabilmeli', async ({ page }) => {
    // Elemanları kullanıcı odaklı (locator/role) yöntemle seçme
    await page.getByLabel('E-Posta Adresi').fill('testkullanici@example.com');
    await page.getByLabel('Şifre').fill('GuvenliSifre123!');
    
    await page.getByRole('button', { name: 'Giriş Yap' }).click();

    // Doğrulama (Assertion)
    await expect(page).toHaveURL(/.*dashboard/);
    await expect(page.getByTestId('welcome-text')).toBeVisible();
  });

  test('Paralel sekme açma ve doğrulama', async ({ context, page }) => {
    await page.goto('https://example.com/dashboard');
    
    // Yeni bir sekme tetikleyen bağlantıya tıklama
    const [newPage] = await Promise.all([
      context.waitForEvent('page'),
      page.getByRole('link', { name: 'Raporu Yeni Sekmede Aç' }).click()
    ]);

    await newPage.waitForLoadState();
    await expect(newPage).toHaveTitle('Detaylı Rapor');
  });
});

Playwright ve Cypress Karşılaştırması: Hangi Aracı Seçmelisiniz?

İki araç da harika ekosistemlere sahip olsa da proje gereksinimlerinize göre doğru seçimi yapmak performans ve bakım kolaylığı açısından kritik önem taşır. 2026 standartlarında öne çıkan temel farklar şunlardır:

• Tarayıcı Desteği: Playwright; Chromium (Chrome, Edge), Firefox ve WebKit (Safari motoru) için tam destek sunar. Cypress ise Chrome, Edge, Electron ve Firefox destekler fakat Safari (WebKit) desteği deneysel seviyededir.
• Çoklu Sekme ve Pencere Yönetimi: Playwright birden fazla sekme ve pencereyi sorunsuz şekilde tek bir test senaryosunda kontrol edebilir. Cypress ise aynı test içinde birden fazla sekmeyi doğrudan desteklemez; bunun yerine hedef URL'ye gitmenizi önerir.
• Test Yürütme Hızı ve Paralelleştirme: Playwright, varsayılan olarak test dosyalarını paralel iş parçacıklarında (worker) çalıştırır. Her test için ayrı bir tarayıcı bağlamı (BrowserContext) açtığı için testler milisaniyeler içinde başlar. Cypress'te ise paralel çalıştırma için genellikle Cypress Cloud hizmeti veya karmaşık CI yapılandırmaları gerekir.
• Dil Desteği: Cypress yalnızca JavaScript ve TypeScript destekler. Playwright ise Node.js, Python, Java ve C# sürümlerine sahiptir.
• Görsel Karşılaştırma (Visual Regression): Playwright içinde yerleşik piksel bazlı ekran görüntüsü karşılaştırma özelliği (expect(page).toHaveScreenshot()) ile gelir. Cypress'te bu işlem için üçüncü parti eklentiler kullanılması gerekir.

Gerçek Senaryo: E-Ticaret Sepet Otomasyonu ve API Entegrasyonu

Sadece arayüz (UI) üzerinden yapılan E2E testleri zaman zaman yavaş olabilir. Modern otomasyon yaklaşımında test kurulumları (örneğin kullanıcı oturumu açma veya sepete ürün ekleme) doğrudan API istekleri ile yapılır, ardından ön yüzdeki nihai durum doğrulanır.

API seviyesinde test otomasyonu temellerini öğrenmek için Postman ile API testi nasıl yapılır rehberimizi inceleyebilirsiniz.

Aşağıda, Playwright kullanarak kullanıcı oturumunu API üzerinden saniyeler içinde oluşturan ve doğrudan sepet sayfasını test eden gelişmiş bir senaryo örneği verilmiştir:

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

test('API ile Oturum Açıp Sepet Sayfasını Doğrulama', async ({ request, page }) => {
  // 1. Adım: Arayüzü kullanmadan doğrudan API üzerinden login olunur
  const loginResponse = await request.post('https://example.com/api/v1/auth/login', {
    data: {
      username: 'testuser',
      password: 'password123'
    }
  });
  
  expect(loginResponse.ok()).toBeTruthy();
  const { token } = await loginResponse.json();

  // 2. Adım: Alınan JWT Token tarayıcı çerezine/yerel depolamasına enjekte edilir
  await page.addInitScript(storageToken => {
    window.localStorage.setItem('authToken', storageToken);
  }, token);

  // 3. Adım: Doğrudan sepet sayfasına gidilir (Login adımları atlandı)
  await page.goto('https://example.com/cart');
  
  // 4. Adım: Arayüz kontrolleri gerçekleştirilir
  const cartItem = page.locator('.cart-item');
  await expect(cartItem).toHaveCount(1);
  await expect(page.getByTestId('checkout-button')).toBeEnabled();
});

Bu yöntem sayesinde her test senaryosunda tekrar tekrar giriş formunu doldurma zorunluluğu ortadan kalkar ve test suitinizin toplam çalışma süresi %60 ila %80 oranında kısalır.

Kararsız (Flaky) Testleri Önleme ve En İyi Uygulamalar

Otomasyon projelerinin en büyük düşmanı "Flaky Test" yani bir çalışmada geçen, diğerinde sebepsizce kalan kararsız testlerdir. Kararsız testleri engellemek için aşağıdaki kurallara uyulmalıdır:

İpucu: Test ortamınızın canlı ortama yakın hıza sahip olması için sunucu tarafındaki optimizasyonlar da önemlidir. Sunucu performansını artırmak için bir içerik dağıtım ağı kullanıyorsanız, detaylar için CDN nedir, Cloudflare ile site hızlandırma rehberimizi okuyabilirsiniz.

Sonuç

Her iki araç da modern web otomasyonu için son derece güçlü çözümler sunar. Projenizde tek bir tarayıcı odağı, zengin bir görsel UI arayüzü ve kolay hata ayıklama (debugging) arıyorsanız Cypress harika bir seçenektir. Ancak yüksek hız, safari/webkit dahil tam çoklu tarayıcı desteği, paralel test yürütme performansı ve çoklu dil esnekliği hedefliyorsanız Playwright bir adım öne çıkmaktadır.

Sonraki Adım Önerisi: Projenizde küçük bir modülü (örneğin iletişim formu veya giriş sayfası) belirleyin. Önce Cypress ardından Playwright ile aynı senaryoyu yazarak ekibinizin geliştirme deneyimini ve testlerin execution sürelerini kıyaslayın. Ardından kazanan aracı GitHub Actions veya GitLab CI süreçlerinize entegre edin.