DOM Olayları (Events)

DOM Olayları (Events): Event Bubbling — Olayın DOM Ağacında Yukarı Yayılması DOM eventleri, kullanıcının bir butona tıklaması, klavyeden bir şey yazması veya fareyi hareket ettir

Event Bubbling — Olayın DOM Ağacında Yukarı Yayılması

DOM eventleri, kullanıcının bir butona tıklaması, klavyeden bir şey yazması veya fareyi hareket ettirmesi gibi eylemler gerçekleştiğinde tetiklenen mesajlardır. Tıpkı kapı zilinin çalınması (event), kapıcının gelmesi (listener) ve kapıyı açması (handler) gibi bir zincirdir. Java'da ActionListener kullanırdık; JavaScript'te ise addEventListener çok daha sade ve güçlüdür. Peki bu zincir bir QA mühendisini neden ilgilendirsin — testte zaten `click()` yazıp geçmiyor muyuz? Tam olarak burada, otomasyonun en can sıkıcı hatalarından biri doğar: Selenium veya Playwright'ın `click()`'i gerçek bir tarayıcı event'i tetikler, ama React gibi framework'ler kendi listener'larını sayfa yüklendikten SONRA bağlar. Element ekranda görünür olduğu hâlde listener henüz bağlanmamışsa, tıklama fiziksel olarak gerçekleşir ama HİÇBİR ŞEY olmaz — ne hata, ne uyarı. Java'daki ActionListener'da bu sorun yoktur çünkü bileşen ile dinleyici aynı anda kurulur; tarayıcıda ise DOM ile JavaScript ayrı zamanlarda hazır olur. Sonuç, klasik flaky test tablosudur: test lokalde geçer, CI'da rastgele kırılır — ve çözüm `sleep` eklemek değil, elementin görünürlüğü yerine gerçekten etkileşime hazır olmasını beklemektir.

En Sık Kullanılan Event Tipleri

addEventListener — Temel Kullanım

// ─── addEventListener sözdizimi ────────────────────────────── // element.addEventListener(eventType, handler, useCapture=false) // 1. Buton tıklama — en yaygın kullanım const btn = document.querySelector('#submit-btn'); btn.addEventListener('click', function(event) { console.log('Tıklandı! Hedef element:', event.target.id); event.preventDefault(); // Formun otomatik gönderilmesini önle }); // 2. Arrow function (daha kısa — Playwright testlerinde standart) btn.addEventListener('click', (e) => { console.log('Element tipi:', e.type, '| X,Y:', e.clientX, e.clientY); }); // 3. Input olay takibi (canlı form doğrulama) const emailInput = document.querySelector('#email'); emailInput.addEventListener('input', (e) => { const val = e.target.value; const isValid = val.includes('@'); console.log('E-posta geçerli mi?', isValid ? '✅' : '❌'); }); // 4. Dinleyiciyi kaldırma (bellek sızıntısını önler) function handleClick(e) { console.log('Tıklandı'); } btn.addEventListener('click', handleClick); btn.removeEventListener('click', handleClick); // temizle

Micro Lab: JavaScript QA kod yazma

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

Adim Adim: JavaScript QA kod yazma

Amaci ve asenkron bagimliliklari oku

await / Promise zincirini dogru yere yerlestir

assertion veya beklenti satirini tamamla

Kodu calistirip console veya test ciktisini oku

Flaky olursa bekleme stratejisi veya retry ekle

JavaScript QA kodunu guvenli yazma ve test etme sirasi nedir?