Assertion ve bekleme

Neden Bekleme Yazmıyoruz?

Web sayfası asenkrondur. Butona tıklarsınız; istek gider, yanıt gelir, liste yeniden çizilir. Eski test araçlarında bu yüzden sleep(2000) gibi beklemeler yazılırdı. Martin Fowler bunun iki yönlü kaybettiğini anlatır: uzun bekleme test paketini yavaşlatır, kısa bekleme yavaş bir makinede testi rastgele düşürür. Önerisi açıktır: sabit bekleme kullanmayın, bir sinyali bekleyin ya da koşul sağlanana kadar kısa aralıklarla tekrar bakın.¹

Playwright bu ikinci yolu kendisi yapar. Eylemlerden önce elementin hazır olmasını, assertion'larda da beklenen durumun oluşmasını bekler.

Eylemlerden Önce Otomatik Bekleme

click() çağırdığınızda Playwright tıklamadan önce şunları kontrol eder ve hepsi sağlanana kadar bekler:²

• Locator tam olarak bir elemente uyuyor.

• Element görünür.

• Element sabit; animasyon bitmiş.

• Element olayları alıyor; üstünde başka bir element yok.

• Element etkin; disabled değil.

• Element inert değil; açık bir modalın arkasında kalmamış.

fill() için görünür, etkin ve düzenlenebilir olmak yeter. Kontroller zaman aşımına kadar sağlanmazsa eylem TimeoutError ile düşer.²

Web-First Assertion'lar

expect(locator) ile başlayan assertion'lar koşul sağlanana kadar elementi tekrar tekrar bulur ve kontrol eder. Varsayılan bekleme süresi 5 saniyedir.³

await page.getByRole("button", { name: "İptal et" }).click();
await expect(page.getByRole("status")).toHaveText("SP-1001 iptal edildi.");

Mesaj yarım saniye sonra gelse de test geçer. Bu assertion'lar asenkron olduğu için mutlaka await gerekir.

expect(await page.getByText("Kaydedildi").isVisible()).toBe(true);

await expect(page.getByText("Kaydedildi")).toBeVisible();

Sık kullanılan web-first assertion'lar:³

toHaveText bir dizi alırsa locator'ın uyduğu elementlerin sayısı ve sırası da eşleşmelidir. Liste testleri için idealdir:

await expect(page.getByRole("cell").nth(3).within(rows)).toHaveText(["Kargoda", "Kargoda"]);

Değillemek için not kullanın. not da bekler; koşulun ortadan kalkmasını bekler:³

await expect(page.getByText("Siparişler yükleniyor...")).not.toBeVisible();

expect(value) ile başlayan genel assertion'lar (toBe, toEqual, toContain) ise beklemez; zaten elinizde olan bir değeri kontrol eder.³

const response = await page.request.post("/api/orders/SP-1001/cancel");
expect(response.status()).toBe(403);

Zaman Aşımları

Test süresine beforeEach ve fixture hazırlığı da dahildir.⁵ Bir assertion'ın süresini uzatmak çoğu zaman sorunu gizler. Önce neden yavaş olduğuna bakın.

Soft Assertion

Normalde ilk başarısız assertion testi durdurur. expect.soft testi başarısız işaretler ama devam eder; bir formdaki beş alanı tek seferde kontrol etmek gibi durumlarda tüm hataları birden görürsünüz:³

await expect.soft(page.getByLabel("E-posta")).toHaveValue("yonetici@example.com");
await expect.soft(page.getByLabel("Parola")).toHaveValue("");

expect.poll ve toPass

Bir locator'a değil de bir fonksiyonun sonucuna bağlı koşullar için iki araç var.³

expect.poll fonksiyonu sonuç beklenen değere ulaşana kadar tekrar çağırır:

await expect
  .poll(async () => (await page.request.get("/api/orders?status=cancelled")).status())
  .toBe(200);

toPass bir kod bloğunu içindeki tüm assertion'lar geçene kadar tekrar çalıştırır:

await expect(async () => {
  const response = await page.request.get("/api/orders?status=all");
  expect(response.status()).toBe(200);
}).toPass({ timeout: 10_000 });

Sabit Bekleme Yok

await page.waitForTimeout(2000);

page.waitForLoadState("networkidle") da aynı kategoridedir. Doküman networkidle'ı açıkça önermez ve hazır olmayı web-first assertion'larla doğrulamayı söyler.⁷ Bir sonraki adımın önkoşulu neyse onu bekleyin: liste mi yüklenecek, satır sayısını; mesaj mı gelecek, mesajı.

Hidrasyon Tuzağı

Server-side render edilen bir Next.js sayfasında HTML, JavaScript'ten önce gelir. Playwright butonu görür, görünür ve etkin olduğu için tıklar. Ama React henüz sayfaya bağlanmadıysa (hidrasyon) onClick ya da onSubmit çalışmaz.

Sonuç uygulamaya göre değişir:

• onSubmit ile yönetilen bir formda tarayıcı formu kendisi gönderir; sayfa yenilenir ve alanlar boşalır.

• onChange ile çalışan bir select'te seçim kaybolur.

Bu rehberdeki Formlar projesinin testleri tam bu yüzden ara sıra düşüyordu. Üç çözüm var:

1. Formu JavaScript'siz de çalışır yapın. action prop'una Server Action verilen form hidrasyondan önce de gönderilir (bkz. Server Actions ile form). Hem test kararlı olur hem yavaş bağlantıdaki kullanıcı kazanır.

2. Yalnızca istemci kodu çalışınca görünen bir şeyi bekleyin. Örneğin TanStack Query ile tarayıcıda yüklenen bir liste. Satırlar göründüyse React çalışıyordur.

3. Son çare networkidle. Çalışır ama yavaştır ve doküman önermez.

Bu rehberin projesinde giriş formu Server Action kullanır; sipariş testleri de filtreye dokunmadan önce satırların yüklenmesini bekler.

Düzen Kayması

Otomatik bekleme elementin sabit olmasını bekler ama sizin tıklamanızdan sonraki kaymayı bilemez. Bir alandan çıkınca hata mesajı beliriyor ve alttaki butonu aşağı itiyorsa, Playwright butonun eski yerine tıklayabilir ve boşluğa basar. Kullanıcı da aynı sorunu yaşar.

Çözüm testte değil arayüzdedir: hata mesajı için yeri baştan ayırın (min-h-5 gibi). Formlar projesinde bu düzeltmeyle hem testler kararlı hale geldi hem de kayma ortadan kalktı.

Kendin Dene

• Bir assertion'ı isVisible() ile yazın, API yanıtına 500 milisaniye gecikme ekleyin. Test düşüyor mu? Sonra toBeVisible()'a çevirin.

• toHaveText ile bir listenin tüm elemanlarını sırasıyla doğrulayın. Bir eleman eksik olunca hata mesajı neyi gösteriyor?

• Bir testte expect.soft ile üç alan kontrol edin, ikisini bilerek yanlış yazın. Raporda kaç hata görüyorsunuz?

• onSubmit ile çalışan bir formun testini --repeat-each=20 ile çalıştırın. Ara sıra düşüyor mu? Formu Server Action'a çevirip tekrar deneyin.

Detaylı Öğrenmek İçin

• Resmi doküman: Playwright, "Auto-waiting"; hangi eylemin hangi kontrolleri beklediğinin tam tablosu.²

• Resmi doküman: Playwright, "Assertions"; tüm assertion'lar, soft, poll ve toPass.³

• Yazı: Martin Fowler, "Eradicating Non-Determinism in Tests"; sabit beklemeler, izolasyon ve kırılgan testleri karantinaya almak.¹