🐞 Debugging — UI Mode & Trace Viewer

Debugging — UI Mode & Trace Viewer: Playwright Trace Viewer, uçak kaza araştırmacılarının incelediği uçuş veri kaydedici (kara kutu) gibi çalışır: her aksiyonu, her network isteğ

Playwright Trace Viewer, uçak kaza araştırmacılarının incelediği uçuş veri kaydedici (kara kutu) gibi çalışır: her aksiyonu, her network isteğini, her DOM anlık görüntüsünü ve her console log'unu milisaniye hassasiyetiyle zaman çizelgesinde kaydeder; kazadan saatler sonra bile tam olarak neyin nerede ve neden bozulduğunu yeniden canlandırabilirsin. Peki Selenium'da test hata ayıklaması nasıl yapılırdı? Java'da başarısız bir test için genellikle System.out.println() satırları eklenir, log dosyaları incelenir, lokal ortamda yeniden çalıştırılır ve eğer lokal ortam CI'yi taklit etmiyorsa sorun hiç tekrar etmezdi — "CI'da kırılıyor ama bende çalışıyor" klasik çıkmazı. Playwright Trace Viewer'da playwright show-trace trace.zip komutunu çalıştırırsın ve tarayıcıda tam bir zaman çizelgesi açılır: test o an hangi sayfadaydı, hangi element neredeydi, network isteği ne döndürdü, hangi adımda bekleme zaman aşımına uğradı — her şey tek ekranda. QA gerçeği: CI'da gecenin köründe patlayan ve lokal ortamda tekrar etmeyen hatalar (environment-specific flakiness) test dünyasının en maliyetli zaman kayıplarındandır; Trace Viewer bu category'yi araştırılabilir (debuggable) hale getirir ve investigation süresini saat yerine dakikaya indirir.

Selenium'da bir test CI'da fail olduğunda elinde genelde sadece bir stack trace ve belki bir log satırı olur — "neden" sorusuna cevap vermek için testi local'de tekrar tekrar çalıştırman gerekir. Playwright'ta bunun için üç farklı araç var: UI Mode (testi canlı, adım adım gözlemleme), Trace Viewer (geçmişe dönük "zaman yolculuğu" — kayıttan tekrar izleme) ve screenshot/video (statik kanıt).

Selenium projelerinde flaky bir test CI'da patladığında elinde TestNG/Allure raporundaki bir stack trace ve en fazla manuel eklediğin bir ekran görüntüsü olurdu — "tam o anda DOM neye benziyordu" sorusunun cevabı genelde yoktu. Playwright'ın trace.zip dosyası, o anki TÜM DOM snapshot'ını, network isteklerini, console loglarını ve her adımın ekran görüntüsünü saklar — local'de hiç koşturmadan "zaman yolculuğu" yaparsın.

Hızlı Debug Komutları

Playwright UI Mode — Gerçek Arayüz

npx playwright test --ui komutu, sol tarafta tüm test dosyalarının ağaç görünümünü, ortada bir önizleme alanını içeren ayrı bir pencere açar.

Bir teste tıkladığında, her adım (goto, fill, click, expect) sırayla yeşil ✓ veya kırmızı ✗ ile işaretlenerek listelenir; testin canlı browser görüntüsü ortada akar.

Time Travel — Adıma Tıkla

Geçmişteki herhangi bir adıma tıkladığında, sayfanın O ANDAKİ tam görünümü (DOM snapshot) anında gösterilir — testi yeniden çalıştırmana gerek yok.

Bir adım kırmızı ✗ ise, sağ panelde tam hata mesajı, "Expected vs Received" karşılaştırması ve o anki DOM'un ekran görüntüsü birlikte görünür.

Trace Viewer — Geçmişe Dönük Tam Kayıt

Micro Lab: Playwright — Aksiyonlar

TODO satirini beklenen cozumdeki kritik satirla degistir. Bu gercek runtime degil; amac dogru yapinin yazilmasini kontrollu olarak pekistirmek.

Adim Adim: Playwright — Aksiyonlar