everything-claude-code/docs/tr/commands/e2e.md

description

description
Playwright ile end-to-end testler oluştur ve çalıştır. Test yolculukları oluşturur, testleri çalıştırır, ekran görüntüleri/videolar/izlemeler yakalar ve artifact'ları yükler.

E2E Komutu

Bu komut, Playwright kullanarak end-to-end testleri oluşturmak, sürdürmek ve yürütmek için e2e-runner agent'ını çağırır.

Bu Komut Ne Yapar

1. Test Yolculukları Oluştur - Kullanıcı akışları için Playwright testleri oluştur
2. E2E Testlerini Çalıştır - Testleri tarayıcılar arasında yürüt
3. Artifact'ları Yakala - Hatalarda ekran görüntüleri, videolar, izlemeler
4. Sonuçları Yükle - HTML raporları ve JUnit XML
5. Dengesiz Testleri Tanımla - Kararsız testleri karantinaya al

Ne Zaman Kullanılır

/e2e komutunu şu durumlarda kullanın:

• Kritik kullanıcı yolculuklarını test ederken (giriş, ticaret, ödemeler)
• Çok adımlı akışların uçtan uca çalıştığını doğrularken
• UI etkileşimlerini ve navigasyonu test ederken
• Frontend ve backend arasındaki entegrasyonu doğrularken
• Üretime dağıtım için hazırlanırken

Nasıl Çalışır

e2e-runner agent'ı şunları yapacaktır:

1. Kullanıcı akışını analiz edecek ve test senaryolarını tanımlayacak
2. Page Object Model deseni kullanarak Playwright testi oluşturacak
3. Testleri çalıştıracak (Chrome, Firefox, Safari)
4. Ekran görüntüleri, videolar ve izlemelerle hataları yakalayacak
5. Sonuçlar ve artifact'larla rapor oluşturacak
6. Dengesiz testleri tanımlayacak ve düzeltme önerilerinde bulunacak

Örnek Kullanım

Kullanıcı: /e2e Piyasa arama ve görüntüleme akışını test et

Agent (e2e-runner):
# E2E Test Oluşturma: Piyasa Arama ve Görüntüleme Akışı

## Tanımlanan Test Senaryosu

**Kullanıcı Yolculuğu:** Piyasa Arama → Sonuçları Görüntüle → Piyasaya Tıkla → Detayları Görüntüle

**Test Kapsamı:**
1. Piyasalar sayfasına git
2. Semantik arama yap
3. Arama sonuçlarını doğrula
4. İlk sonuca tıkla
5. Piyasa detay sayfasının yüklendiğini doğrula
6. Grafiğin render olduğunu doğrula

## Oluşturulan Test Kodu

```typescript
// tests/e2e/markets/search-and-view.spec.ts
import { test, expect } from '@playwright/test'
import { MarketsPage } from '../../pages/MarketsPage'
import { MarketDetailsPage } from '../../pages/MarketDetailsPage'

test.describe('Market Search and View Flow', () => {
  test('kullanıcı piyasaları arayabilir ve detayları görüntüleyebilir', async ({ page }) => {
    // 1. Piyasalar sayfasına git
    const marketsPage = new MarketsPage(page)
    await marketsPage.goto()

    // Sayfanın yüklendiğini doğrula
    await expect(page).toHaveTitle(/Markets/)
    await expect(page.locator('h1')).toContainText('Markets')

    // 2. Semantik arama yap
    await marketsPage.searchMarkets('election')

    // API yanıtını bekle
    await page.waitForResponse(resp =>
      resp.url().includes('/api/markets/search') && resp.status() === 200
    )

    // 3. Arama sonuçlarını doğrula
    const marketCards = marketsPage.marketCards
    await expect(marketCards.first()).toBeVisible()
    const resultCount = await marketCards.count()
    expect(resultCount).toBeGreaterThan(0)

    // Arama sonuçlarının ekran görüntüsünü al
    await page.screenshot({ path: 'artifacts/search-results.png' })

    // 4. İlk sonuca tıkla
    const firstMarketTitle = await marketCards.first().textContent()
    await marketCards.first().click()

    // 5. Piyasa detay sayfasının yüklendiğini doğrula
    await expect(page).toHaveURL(/\/markets\/[a-z0-9-]+/)

    const detailsPage = new MarketDetailsPage(page)
    await expect(detailsPage.marketName).toBeVisible()
    await expect(detailsPage.marketDescription).toBeVisible()

    // 6. Grafiğin render olduğunu doğrula
    await expect(detailsPage.priceChart).toBeVisible()

    // Piyasa adının eşleştiğini doğrula
    const detailsTitle = await detailsPage.marketName.textContent()
    expect(detailsTitle?.toLowerCase()).toContain(
      firstMarketTitle?.toLowerCase().substring(0, 20) || ''
    )

    // Piyasa detaylarının ekran görüntüsünü al
    await page.screenshot({ path: 'artifacts/market-details.png' })
  })

  test('sonuç olmayan arama boş durumu göstermeli', async ({ page }) => {
    const marketsPage = new MarketsPage(page)
    await marketsPage.goto()

    // Var olmayan piyasayı ara
    await marketsPage.searchMarkets('xyznonexistentmarket123456')

    // Boş durumu doğrula
    await expect(page.locator('[data-testid="no-results"]')).toBeVisible()
    await expect(page.locator('[data-testid="no-results"]')).toContainText(
      /no.*results|no.*markets/i
    )

    const marketCount = await marketsPage.marketCards.count()
    expect(marketCount).toBe(0)
  })

  test('aramayı temizleyebilir ve tüm piyasaları tekrar görebilir', async ({ page }) => {
    const marketsPage = new MarketsPage(page)
    await marketsPage.goto()

    // İlk piyasa sayısı
    const initialCount = await marketsPage.marketCards.count()

    // Arama yap
    await marketsPage.searchMarkets('trump')
    await page.waitForLoadState('networkidle')

    // Filtrelenmiş sonuçları doğrula
    const filteredCount = await marketsPage.marketCards.count()
    expect(filteredCount).toBeLessThan(initialCount)

    // Aramayı temizle
    await marketsPage.searchInput.clear()
    await page.waitForLoadState('networkidle')

    // Tüm piyasaların tekrar gösterildiğini doğrula
    const finalCount = await marketsPage.marketCards.count()
    expect(finalCount).toBe(initialCount)
  })
})

Testleri Çalıştırma

# Oluşturulan testi çalıştır
npx playwright test tests/e2e/markets/search-and-view.spec.ts

3 worker kullanarak 3 test çalıştırılıyor

  ✓  [chromium] › search-and-view.spec.ts:5:3 › user can search markets and view details (4.2s)
  ✓  [chromium] › search-and-view.spec.ts:52:3 › search with no results shows empty state (1.8s)
  ✓  [chromium] › search-and-view.spec.ts:67:3 › can clear search and see all markets again (2.9s)

  3 passed (9.1s)

Oluşturulan artifact'lar:
- artifacts/search-results.png
- artifacts/market-details.png
- playwright-report/index.html

Test Raporu

╔══════════════════════════════════════════════════════════════╗
║                    E2E Test Sonuçları                        ║
╠══════════════════════════════════════════════════════════════╣
║ Durum:      ✅ TÜM TESTLER GEÇTİ                             ║
║ Toplam:     3 test                                           ║
║ Geçti:      3 (%100)                                         ║
║ Başarısız:  0                                                ║
║ Dengesiz:   0                                                ║
║ Süre:       9.1s                                             ║
╚══════════════════════════════════════════════════════════════╝

Artifact'lar:
📸 Ekran Görüntüleri: 2 dosya
📹 Videolar: 0 dosya (sadece hatada)
🔍 İzlemeler: 0 dosya (sadece hatada)
📊 HTML Rapor: playwright-report/index.html

Raporu görüntüle: npx playwright show-report

✅ E2E test paketi CI/CD entegrasyonuna hazır!

## Test Artifact'ları

Testler çalıştığında, şu artifact'lar yakalanır:

**Tüm Testlerde:**
- Zaman çizelgesi ve sonuçlarla HTML Rapor
- CI entegrasyonu için JUnit XML

**Sadece Hatada:**
- Başarısız durumun ekran görüntüsü
- Testin video kaydı
- Hata ayıklama için izleme dosyası (adım adım tekrar)
- Network logları
- Console logları

## Artifact'ları Görüntüleme

```bash
# HTML raporunu tarayıcıda görüntüle
npx playwright show-report

# Belirli izleme dosyasını görüntüle
npx playwright show-trace artifacts/trace-abc123.zip

# Ekran görüntüleri artifacts/ dizinine kaydedilir
open artifacts/search-results.png

Dengesiz Test Tespiti

Bir test aralıklı olarak başarısız olursa:

⚠️  DENGESİZ TEST TESPİT EDİLDİ: tests/e2e/markets/trade.spec.ts

Test 10 çalıştırmadan 7'sinde geçti (%70 geçme oranı)

Yaygın başarısızlık:
"'[data-testid="confirm-btn"]' elementi için timeout"

Önerilen düzeltmeler:
1. Açık bekleme ekle: await page.waitForSelector('[data-testid="confirm-btn"]')
2. Timeout'u artır: { timeout: 10000 }
3. Component'te yarış koşullarını kontrol et
4. Elementin animasyon tarafından gizlenmediğini doğrula

Karantina önerisi: Düzeltilene kadar test.fixme() olarak işaretle

Tarayıcı Yapılandırması

Testler varsayılan olarak birden fazla tarayıcıda çalışır:

• ✅ Chromium (Desktop Chrome)
• ✅ Firefox (Desktop)
• ✅ WebKit (Desktop Safari)
• ✅ Mobile Chrome (opsiyonel)

Tarayıcıları ayarlamak için playwright.config.ts'yi yapılandırın.

CI/CD Entegrasyonu

CI pipeline'ınıza ekleyin:

# .github/workflows/e2e.yml
- name: Install Playwright
  run: npx playwright install --with-deps

- name: Run E2E tests
  run: npx playwright test

- name: Upload artifacts
  if: always()
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

PMX'e Özgü Kritik Akışlar

PMX için bu E2E testlerine öncelik verin:

🔴 KRİTİK (Her Zaman Geçmeli):

1. Kullanıcı cüzdan bağlayabilir
2. Kullanıcı piyasalara göz atabilir
3. Kullanıcı piyasa arayabilir (semantik arama)
4. Kullanıcı piyasa detaylarını görüntüleyebilir
5. Kullanıcı işlem yapabilir (test fonlarıyla)
6. Piyasa doğru çözülür
7. Kullanıcı fon çekebilir

🟡 ÖNEMLİ:

1. Piyasa oluşturma akışı
2. Kullanıcı profil güncellemeleri
3. Gerçek zamanlı fiyat güncellemeleri
4. Grafik render'ı
5. Piyasaları filtreleme ve sıralama
6. Mobil responsive layout

En İyi Uygulamalar

YAPIN:

• ✅ Sürdürülebilirlik için Page Object Model kullanın
• ✅ Selector'lar için data-testid nitelikleri kullanın
• ✅ Rastgele timeout'lar değil, API yanıtlarını bekleyin
• ✅ Kritik kullanıcı yolculuklarını uçtan uca test edin
• ✅ Main'e merge etmeden önce testleri çalıştırın
• ✅ Testler başarısız olduğunda artifact'ları inceleyin

YAPMAYIN:

• ❌ Kırılgan selector'lar kullanmayın (CSS sınıfları değişebilir)
• ❌ Uygulama detaylarını test etmeyin
• ❌ Production'a karşı testler çalıştırmayın
• ❌ Dengesiz testleri görmezden gelmeyin
• ❌ Başarısızlıklarda artifact incelemesini atlamayın
• ❌ Her edge case'i E2E ile test etmeyin (unit testler kullanın)

Önemli Notlar

PMX için KRİTİK:

• Gerçek para içeren E2E testleri SADECE testnet/staging'de çalışmalıdır
• Asla production'a karşı ticaret testleri çalıştırmayın
• Finansal testler için test.skip(process.env.NODE_ENV === 'production') ayarlayın
• Sadece küçük test fonlarıyla test cüzdanları kullanın

Diğer Komutlarla Entegrasyon

• Test edilecek kritik yolculukları tanımlamak için /plan kullanın
• Unit testler için /tdd kullanın (daha hızlı, daha ayrıntılı)
• Entegrasyon ve kullanıcı yolculuk testleri için /e2e kullanın
• Test kalitesini doğrulamak için /code-review kullanın

İlgili Agent'lar

Bu komut, ECC tarafından sağlanan e2e-runner agent'ını çağırır.

Manuel kurulumlar için, kaynak dosya şurada bulunur: agents/e2e-runner.md

Hızlı Komutlar

# Tüm E2E testlerini çalıştır
npx playwright test

# Belirli test dosyasını çalıştır
npx playwright test tests/e2e/markets/search.spec.ts

# Headed modda çalıştır (tarayıcıyı gör)
npx playwright test --headed

# Testi debug et
npx playwright test --debug

# Test kodu oluştur
npx playwright codegen http://localhost:3000

# Raporu görüntüle
npx playwright show-report