🖥️ QA için Frontend

Testçiler için frontend: React ve Angular kaynak kodunu oku, ürettiği DOM'u canlandır, kırılgan XPath yerine kalıcı locator seçmeyi öğren.

Bir tester'ın frontend developer'ın omzundan bakmasını sağlayan sayfa: component/DOM/render/hydration terimlerini developer'la aynı anlamda kullan, bir React/Angular kaynak kodunu görüp hangi DOM'un oluşacağını zihinde canlandır ve her elemente en dayanıklı locator'ı seçip developer'dan doğru şeyi (data-testid, role) iste. Tek örnek: Bug Tracker Board.

Bu sayfada neler öğreneceksin

  • 🌐 Tarayıcı Nasıl Çalışır — Kaynak kod ile ekranda gördüğün sayfa arasındaki fark, bir BİNANIN MİMARİ PLANI ile İNŞA EDİLMİŞ BİNA arasındaki fark gibidir: plan kağıttaki statik çizimdir (`index.html`), bina ise o plandan kurulmuş, içinde insanların gezdiği canlı yapıdır (DOM). Elektrikçi
  • 🧱 HTML: Locator'ın Ham Maddesi — HTML, bir binanın İSKELET ve ETİKETLEME sistemidir: `<button>` bir kapı, `<nav>` bir koridor, `id`/`class`/`data-*` ise kapılara asılmış isim etiketleridir. Locator dediğin şey aslında "hangi etikete bakarak doğru kapıyı bulacağım?" sorus
  • 🎨 CSS: Neden Locator'ı Kırar — CSS, bir binanın BOYA ve DEKORASYON katmanıdır — ve tam da bu yüzden locator için tehlikeli bir zemindir. Class'lar aslında stil için vardır; developer bir rengi değiştirdiğinde veya modern araçlar (CSS Modules, styled-components) her build'de class'a rastgele
  • ⚡ JavaScript: DOM'u Kim Değiştiriyor — JavaScript, binadaki elektrik ve otomasyon sistemidir: sayfayı sonradan CANLI hale getiren, butona basınca bir şeyler olmasını sağlayan, sunucudan veri gelince yeni BugCard'lar üreten güç budur. Neden testerı en çok ilgilendiren katman JS'tir? Çünkü DOM'u deği
  • 🔌 Frontend & Backend Nasıl Konuşur — Frontend ile backend arasındaki konuşma, bir RESTORANDAKİ garson-mutfak ilişkisi gibidir: tarayıcı (garson) `/api/v1/bugs`'a bir istek götürür, sunucu (mutfak) JSON döner, JS bu JSON'u DOM'a (tabağa) dizer. Neden bir tester bu köprüyü bilmeli? Çünkü elementin
  • ⚛️ React: Kaynağı Okumak — React component'i, bir LEGO PARÇASI FABRİKASINDAKİ KALIP gibidir: bir kez `BugCard` kalıbını yazarsın, sonra her bug için o kalıptan bir kart basılır. Kalıba dökülen "malzeme" prop'tur (bug'ın verisi), kalıbın çıktısı ise JSX'in ürettiği gerçek DOM.
  • 🅰️ Angular: Kaynağı Okumak — Angular, React'ten farklı olarak component'i İKİYE böler: mantık `.ts` dosyasında, arayüz `.html` template'inde. Bu, bir tiyatro oyunundaki SENARYO (`.ts` — kim ne yapar) ile SAHNE DÜZENİ (`.html` — ne nerede durur) ayrımı gibidir. Neden testerı ilgilendirir?
  • 🎯 Locator Ustalığı (Sayfanın Kalbi) — Bu grup sayfanın KALBİDİR: A-G gruplarında öğrendiğin her şey (DOM, HTML, CSS, JS, frontend↔backend, React, Angular) burada TEK bir beceride birleşir — herhangi bir elemente bakıp en dayanıklı locator'ı seçebilmek. Bu grubun 8 başlığı boyunca dayanıklılık hiye