📁 Dosya · Network İzleme · API Mock

Dosya · Network İzleme · API Mock: Playwright'ın page.route() mekanizması, bir ağ trafiği denetim noktasındaki özel posta müdürü gibi çalışır: hangi mektubu (HTTP isteği) isterse

Playwright'ın page.route() mekanizması, bir ağ trafiği denetim noktasındaki özel posta müdürü gibi çalışır: hangi mektubu (HTTP isteği) istersen durdurup içeriğini değiştirebilir, farklı bir adrese yönlendirebilir ya da hiç teslim etmeden sahte bir cevap üretebilirsin. Peki Selenium bunu neden yapamıyordu? Selenium yalnızca tarayıcı UI'ını kontrol eder, ağ katmanına hiç dokunmaz; API çağrısını yakalamak için Selenium'un dışında ayrı bir proxy server (BrowserMob Proxy, Charles, mitmproxy) kurman, sertifika hatalarını yönetmen ve proxy'yi driver'a bağlaman gerekiyordu — Java'da bu kurulum onlarca satır konfigürasyon demekti. Playwright ise tarayıcının network stack'ine doğrudan bağlanır (Chrome DevTools Protocol üzerinden), bu yüzden page.route("**/api/products", route => route.fulfill({body: JSON.stringify(mockData)})) gibi tek bir satırla gerçek backend olmadan UI testleri koşabilirsin. QA için pratik anlam: backend henüz hazır değilken frontend testlerini bloke olmadan yazmak, rate-limited veya ücretli üçüncü parti API'leri test sırasında devre dışı bırakmak ve hata yanıtlarını (500, 401, 429) kolayca simüle ederek edge case'leri UI katmanında test etmek mümkün hale gelir.

1️⃣ Dosya Yükleme (Upload)

Micro Lab: Playwright — Network mock

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

setInputFiles() Native Dosya Penceresini Nasıl Devre Dışı Bırakır?

input[type="file"] normalde tıklanınca…

input[type="file"] normalde tıklanınca işletim sisteminin native dosya seçici penceresini açar — bu pencere sayfanın DOM'unun DIŞINDadır, Selenium ve Playwright bu pencereye normal locator ile ERİŞEMEZ.

setInputFiles() bu native pencereyi HİÇ açmadan…

setInputFiles() bu native pencereyi HİÇ açmadan, verilen dosya yolunu doğrudan input elementinin files listesine yazar — tamamen programatik bir kısayoldur.

Input değişince tarayıcı gerçek bir "change" event'i fırlatır…

Input değişince tarayıcı gerçek bir "change" event'i fırlatır — sayfanın JS kodu, sanki kullanıcı gerçekten dosya seçmiş gibi normal şekilde tepki verir.

Birden fazla dosya bir dizi olarak verilirse…

Birden fazla dosya bir dizi olarak verilirse hepsi TEK bir change event'inde birlikte eklenir — art arda tıklama simülasyonuna gerek yoktur.

waitForEvent('filechooser') ise gerçek diyaloğun AÇILMASINI bekler…