Playwright Testleri Oluştur

Bir kullanıcı hikayesinden, URL'den, bileşen adından veya özellik açıklamasından production-ready Playwright testleri oluştur.

Giriş

$ARGUMENTS test edilecek şeyi içerir. Örnekler:

• "kullanıcı e-posta ve şifre ile giriş yapabilir"
• "ödeme akışı"
• "src/components/UserProfile.tsx"
• "filtreleri olan arama sayfası"

Adımlar

1. Hedefi Anla

$ARGUMENTS öğesini ayrıştırarak şunları belirle:

• Kullanıcı hikayesi: Doğrulanacak davranışı çıkar
• Bileşen yolu: Bileşen kaynak kodunu oku
• Sayfa/URL: Rotayı ve öğelerini tanımla
• Özellik adı: İlgili uygulama alanlarıyla eşleştir

2. Kod Tabanını Keşfet

Bağlam toplamak için Explore alt ajanını kullan:

• playwright.config.ts öğesinde testDir, baseURL, projects değerlerini oku
• Desenler, fixture'lar ve kurallar için testDir içindeki mevcut testleri kontrol et
• Bir bileşen yolu verilmişse, prop'ları, durumları ve etkileşimlerini anlamak için bileşeni oku
• pages/ içinde mevcut sayfa nesnelerini kontrol et
• fixtures/ içinde mevcut fixture'ları kontrol et
• Auth kurulumunu kontrol et (auth.setup.ts veya storageState config)

3. Şablonları Seç

Bu eklentideki templates/ klasöründe eşleşen desenleri kontrol et:

Test ediyorsan...	Şablonu yükle
Giriş/auth akışı	../pw/templates/auth/login.md
CRUD işlemleri	templates/crud/
Ödeme/checkout	templates/checkout/
Arama/filtre UI	templates/search/
Form gönderimi	templates/forms/
Dashboard/veri	templates/dashboard/
Ayarlar sayfası	templates/settings/
Onboarding akışı	templates/onboarding/
API endpoint'leri	templates/api/
Erişilebilirlik	templates/accessibility/

Şablonu spesifik uygulamaya uyarla — {{placeholders}} yerine gerçek seçiciler, URL'ler ve veriler koy.

4. Testi Oluştur

Bu kurallara uy:

Yapı:

import { test, expect } from '@playwright/test';
// Proje custom fixture'lar kullanıyorsa import et

test.describe('Özellik Adı', () => {
  // İlgili davranışları grupla

  test('şunu yapmalı: <beklenen davranış>', async ({ page }) => {
    // Arrange: navigate et, durumu hazırla
    // Act: kullanıcı eylemini gerçekleştir
    // Assert: sonucu doğrula
  });
});

Locator önceliği (çalışan ilkini kullan):

1. getByRole() — düğmeler, linkler, başlıklar, form öğeleri
2. getByLabel() — etiketli form alanları
3. getByText() — etkileşimli olmayan metin içeriği
4. getByPlaceholder() — yer tutucu metni olan girdiler
5. getByTestId() — semantic seçenekler mevcut olmadığında

Assertions — her zaman web-first:

// İYİ — otomatik yeniden deneme
await expect(page.getByRole('heading')).toBeVisible();
await expect(page.getByRole('alert')).toHaveText('Başarılı');

// KÖTÜ — yeniden deneme yok
const text = await page.textContent('.msg');
expect(text).toBe('Başarılı');

Asla kullanma:

• page.waitForTimeout()
• page.$(selector) veya page.$$(selector)
• Mutlak gerekmedikçe bare CSS seçiciler
• Locator'lar yapabileceği şeyler için page.evaluate()

Her zaman içer:

• Davranışı açıklayan tanımlayıcı test adları
• Happy path'in yanı sıra hata/edge case testleri
• Her Playwright çağrısı üzerinde uygun await
• baseURL-relative navigation (page.goto('/') değil page.goto('http://...'))

5. Proje Kurallarıyla Eşleştir

• Proje TypeScript kullanıyorsa → .spec.ts oluştur
• Proje JavaScript kullanıyorsa → require() import'ları ile .spec.js oluştur
• Proje sayfa nesneleri kullanıyorsa → inline locator'lar yerine bunları kullan
• Proje custom fixture'lar varsa → import et ve kullan
• Proje test veri dizini varsa → veri dosyaları orada oluştur

6. Destekleyici Dosyalar Oluştur (Gerekirse)

• Sayfa nesnesi: Test bir sayfada 5+ benzersiz locator'a değerse, bir sayfa nesnesi oluştur
• Fixture: Test ortak setup gerektiriyorsa (auth, veri), bir fixture oluştur veya genişlet
• Test verisi: Test yapılandırılmış veri kullanıyorsa, test-data/ içinde bir JSON dosyası oluştur

7. Doğrula

Oluşturulan testi çalıştır:

npx playwright test <oluşturulan-dosya> --reporter=list

Başarısız olursa:

1. Hatayı oku
2. Testi düzelt (uygulamayı değil)
3. Tekrar çalıştır
4. Eğer uygulama problemi ise, kullanıcıya bildir

Çıktı

• Oluşturulan test dosyası(ları) ve yol
• Oluşturulan destekleyici dosyalar (sayfa nesneleri, fixture'lar, veri)
• Test çalıştırma sonucu
• Kapsama notu: hangi davranışlar artık test edilmektedir