Playwright ile End-to-End Testing: Modern Tarayıcı Otomasyonu

Playwright, Microsoft''un 2020''de açık kaynak yaptığı ve bugün E2E testing''in gerçek standardına dönüşen tarayıcı otomasyon framework''üdür. Chromium, Firefox ve WebKit''i tek API ile yönetir; Cypress''in kısıtlarını (iframe, multi-tab, file upload) aşar.

Kurulum

İlgili rehberler: Yazılım geliştirme süreçleri · PostgreSQL optimizasyonu · Git ileri seviye komutlar · Redis nedir, nasıl kullanılır · Docker ile deploy

npm init playwright@latest
# Sorular: TS mi, tests klasörü, GitHub Actions workflow, browsers install

# Test çalıştır
npx playwright test
npx playwright test --headed         # browser'ı gör
npx playwright test --ui             # interaktif UI mode
npx playwright show-report           # HTML rapor

İlk Test

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('kullanıcı giriş yapabilir', async ({ page }) => {
    await page.goto('https://example.com/login');

    await page.getByLabel('Email').fill('test@example.com');
    await page.getByLabel('Parola').fill('password123');
    await page.getByRole('button', { name: 'Giriş yap' }).click();

    await expect(page).toHaveURL(/\/dashboard/);
    await expect(page.getByText('Hoş geldin, Test')).toBeVisible();
});

Selector Stratejileri

Playwright''in tercih ettiği user-facing selector sıralaması:

// 1) Role (erişilebilirlik odaklı — en sağlam)
page.getByRole('button', { name: 'Kaydet' });
page.getByRole('heading', { level: 1, name: 'Başlık' });

// 2) Label — form input
page.getByLabel('Email');

// 3) Text — görünür metin
page.getByText('Hoş geldiniz');

// 4) Placeholder
page.getByPlaceholder('Arama...');

// 5) Test ID (dev control altında)
page.getByTestId('submit-btn');
// <button data-testid="submit-btn">Kaydet</button>

// SON ÇARE — CSS/XPath
page.locator('.btn-primary');  // kırılgan, kaçın

Auto-wait ve Assertions

Playwright''te wait_for artık gerekmez — her aksiyon element''in hazır olmasını otomatik bekler. Assert''ler de retry''lı.

// Otomatik bekleme — element DOM'a gelsin, visible olsun, stable olsun
await page.getByRole('button', { name: 'Yükle' }).click();

// Retry-able assertions (web-first)
await expect(page.getByText('Başarılı')).toBeVisible();  // 5 sn retry
await expect(page.getByRole('list')).toHaveCount(10);
await expect(page).toHaveTitle('Dashboard');
await expect(page).toHaveURL('/dashboard');

Fixture ve Auth

// playwright.config.ts — login state'i bir kere kaydet
import { defineConfig } from '@playwright/test';

export default defineConfig({
    globalSetup: './global-setup.ts',
    use: {
        storageState: 'storage-state.json',
        baseURL: 'http://localhost:3000',
        trace: 'on-first-retry'
    }
});

// global-setup.ts
import { chromium } from '@playwright/test';

export default async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('/login');
    await page.getByLabel('Email').fill('admin@test.com');
    await page.getByLabel('Parola').fill('admin');
    await page.getByRole('button', { name: 'Giriş' }).click();
    await page.waitForURL('/dashboard');
    await page.context().storageState({ path: 'storage-state.json' });
    await browser.close();
};

API Mocking

test('user list fetch fails gracefully', async ({ page }) => {
    // Network intercept
    await page.route('/api/users', route => {
        route.fulfill({ status: 500, body: 'Server error' });
    });

    await page.goto('/users');
    await expect(page.getByText('Hata oluştu')).toBeVisible();
});

Mobile ve Multi-Browser

// playwright.config.ts
export default defineConfig({
    projects: [
        { name: 'chromium',  use: { ...devices['Desktop Chrome'] } },
        { name: 'firefox',   use: { ...devices['Desktop Firefox'] } },
        { name: 'webkit',    use: { ...devices['Desktop Safari'] } },
        { name: 'mobile',    use: { ...devices['iPhone 14'] } },
        { name: 'tablet',    use: { ...devices['iPad Pro'] } }
    ]
});

// Çalıştır — tüm projeler
npx playwright test
// Sadece chromium
npx playwright test --project=chromium

Trace Viewer

Flaky test''in ne zaman fail ettiğini anlamak için trace altın değerinde. Her aksiyonun DOM snapshot''ı, network log''u, console output''u.

# config'te aktif: trace: 'on-first-retry'
npx playwright test
npx playwright show-trace trace.zip
# Tarayıcıda timeline açılır, tıkladığın her adımda DOM + screenshot

Parallel Testing

Playwright default paralel çalışır — her .spec.ts ayrı worker''da. Tek dosyadaki testler sıralıdır ama test.describe.parallel ile onları da paralel hâle getirebilirsin.

CI (GitHub Actions)

# .github/workflows/e2e.yml
name: E2E
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npm run build
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Playwright vs Cypress

Modern Yazılım Geliştirme ve DevOps Pratikleri

Profesyonel yazılım geliştirme süreci üç pillar üzerine kuruludur: kaynak kontrolü (Git + GitHub/GitLab pull request akışı, code review zorunlu), CI/CD pipeline (otomatik test + lint + build + deploy), ve gözlemlenebilirlik (Sentry/Datadog/Grafana ile log, metric, trace toplama). Test piramidi (unit > integration > e2e) ile kod kalitesini garantilemek, mikroservis mimarisinde Docker container ve Kubernetes orkestrasyonu kullanmak, REST veya GraphQL API tasarımında OpenAPI/GraphQL Schema sözleşmesi tutmak modern standardlardır. Yazılım geliştirme yaşam döngüsü boyunca (gereksinim → tasarım → implementasyon → test → deploy → bakım) Agile/Scrum sprintleri 1-2 hafta, DevOps takımları sürekli teslim (continuous delivery) prensibiyle çalışır.