Web Uygulaması Testi

Yerel web uygulamalarını test etmek için native Python Playwright scriptleri yazın.

Mevcut Yardımcı Scriptler:

• scripts/with_server.py - Server yaşam döngüsünü yönetir (birden fazla sunucuyu destekler)

Scriptleri her zaman önce --help ile çalıştırın kullanımı görmek için. Kaynağı okumayın, script'i önce çalıştırmayı deneyin ve özelleştirilmiş bir çözümün kesinlikle gerekli olduğunu bulana kadar. Bu scriptler çok büyük olabilir ve context pencerenizi kirletebilir. Bunlar context pencerenize dahil edilmek yerine doğrudan black-box scriptler olarak çağrılmak için tasarlanmıştır.

Karar Ağacı: Yaklaşımınızı Seçme

Kullanıcı görevi → Statik HTML mi?
    ├─ Evet → HTML dosyasını doğrudan okuyup seçicileri belirle
    │         ├─ Başarılı → Seçicileri kullanarak Playwright scripti yaz
    │         └─ Başarısız/Eksik → Dinamik olarak değerlendir (aşağıda)
    │
    └─ Hayır (dinamik web uygulaması) → Server zaten çalışıyor mu?
        ├─ Hayır → Çalıştır: python scripts/with_server.py --help
        │         Sonra yardımcıyı kullan + basitleştirilmiş Playwright scripti yaz
        │
        └─ Evet → İnceleme-sonra-eylem:
            1. Gezin ve networkidle için bekleyin
            2. Ekran görüntüsü alın veya DOM'u inceleyin
            3. Render edilmiş durumdan seçicileri belirleyin
            4. Bulunan seçicilerle eylemleri yürütün

Örnek: with_server.py Kullanımı

Sunucu başlatmak için önce --help çalıştırın, sonra yardımcıyı kullanın:

Tek sunucu:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

Birden fazla sunucu (örn. backend + frontend):

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

Otomasyon scripti oluşturmak için yalnızca Playwright mantığını ekleyin (sunucular otomatik olarak yönetilir):

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Her zaman chromium'u headless modda başlat
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server zaten çalışıyor ve hazır
    page.wait_for_load_state('networkidle') # KRİTİK: JS yürütülmesini bekle
    # ... otomasyon mantığınız
    browser.close()

İnceleme-Sonra-Eylem Deseni

1. Render edilmiş DOM'u inceleyin:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. İnceleme sonuçlarından seçicileri belirleyin

3. Bulunan seçicileri kullanarak eylemleri yürütün

Yaygın Hata

❌ Yapma - Dinamik uygulamalarda networkidle beklemeden önce DOM'u incele ✅ Yap - İnceleme öncesi page.wait_for_load_state('networkidle') bekle

En İyi Uygulamalar

• Paketlenmiş scriptleri black box olarak kullan - Bir görevi başarmak için scripts/ dizininde mevcut olan scriptlerden birinin yardımcı olup olamayacağını düşün. Bu scriptler context pencerenizi kirletmeden yaygın, karmaşık iş akışlarını güvenilir bir şekilde ele alır. Kullanımı görmek için --help kullan, sonra doğrudan çağır.
• Senkron scriptler için sync_playwright() kullan
• Tamamlandığında browser'ı her zaman kapat
• Açıklayıcı seçiciler kullan: text=, role=, CSS seçicileri veya ID'ler
• Uygun bekleme ekle: page.wait_for_selector() veya page.wait_for_timeout()

Referans Dosyaları

• examples/ - Yaygın desenleri gösteren örnekler:
  • element_discovery.py - Bir sayfada buton, link ve input keşfetme
  • static_html_automation.py - Yerel HTML için file:// URL'lerini kullanma
  • console_logging.py - Otomasyon sırasında konsol loglarını yakalama