🧱 HTML: Locator'ın Ham Maddesi

HTML: Locator'ın Ham Maddesi: HTML, bir binanın İSKELET ve ETİKETLEME sistemidir: ` ` bir kapı, ` ` bir koridor, `id`/`class`/`data-*` ise kapılara asılmış isim etiketleridir.

HTML, bir binanın İSKELET ve ETİKETLEME sistemidir: ` ` bir kapı, ` ` 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?" sorusudur. Peki neden bir etiket diğerinden daha iyi? Çünkü bazı etiketler (data-testid) sadece testçiler için asılır ve hiç değişmez; bazıları (class) dekorasyon için asılır ve boya değişince (yeni deploy) düşer. Java analojisi: bir nesnenin `equals/hashCode` için kullandığın alanı seçmek gibi — kararlı olmayan alanı seçersen ilişkin bozulur. QA bağlamında: HTML'i "locator gözüyle" okuyabilen tester, developer'dan doğru etiketi (kalıcı bir kanca) isteyebilir; okuyamayan kör XPath'e mahkumdur.

🚪 B1. Semantik Elementler: header, nav, main, button, a

Semantik HTML elementleri, üzerinde "BU BİR DÜĞMEDİR, BASILABİLİR" yazan resmi bir KAPI TABELASI gibidir: ` ` bu tabelayı otomatik taşır, ` ` ise sadece boyanmış bir kapıdır — insan gözü ikisini de aynı sanır ama itfaiyeci (screen reader/accessibility API) sadece tabelalı olanı "kapı" diye kaydeder. Peki neden ` ` yerine ` ` kullanmalıyım, ikisi de tıklanıyor ve aynı görünüyor? Java analojisi: ` ` tarayıcının "Clickable" arayüzünü (interface) implement eder — otomatik focus, klavye desteği, rol bedava gelir; ` ` bu arayüzü implement etmez, sen her metodu (tabindex, role, keydown listener) ELLE yeniden yazmak zorunda kalırsın. QA bağlamında: ` ` kullanan bir sayfa hem screen-reader kullanıcısını dışlar hem de `getByRole('button')` gibi dayanıklı bir locator stratejisini İMKANSIZ kılar — tester bunu gördüğünde developer'dan semantik elemente geçmesini ister.

🎬 Semantik Element mi, Div mi? Accessibility Tree'nin Kararı

role="button" (otomatik)

İki "Kaydet" butonu var, PİKSEL PİKSEL aynı görünüyorlar: biri gerçek ` `, diğeri sadece CSS ile butona benzetilmiş bir ` `. Gözle aralarında hiçbir fark yok — ama bu filmde tarayıcının onları NASIL FARKLI muamele ettiğini göreceksin.

Adım 1 — İkisi de DOM'a girer: parser her ikisini de birer node olarak ağaca ekler. Bu aşamada hâlâ hiçbir fark yok; DOM ikisini de eşit muamele eder.

Adım 2 — Accessibility Tree kurulur: tarayıcı her elementin "anlamını" (role, isim, durum) çıkaran ikinci bir ağaç kurar — bu ağaç screen reader'ın VE `getByRole`'ün gördüğü şeydir.

Adım 3 — ` ` OTOMATİK bir kimlik kazanır: role="button", isim="Kaydet" (metninden türetilir), Tab ile odaklanabilir, Enter/Space ile tetiklenebilir. Hiçbir ekstra kod yazılmadı — bu, elementin doğasında var.

Adım 4 — ` ` HİÇBİR kimlik kazanmaz: accessibility tree'de rolü "generic"tir (anlamsız), Tab ile odaklanamaz, Enter/Space ile tetiklenmez — sadece fare tıklamasıyla çalışır. Screen reader kullanıcısı bunun tıklanabilir olduğunu ASLA anlamaz.

Final — Locator sonucu: `getByRole('button', { name: 'Kaydet' })` SADECE gerçek ` `'ı bulur; ` `'i asla bulamaz çünkü rolü yok. Developer'dan ne iste? "Gerçek ` ` kullan; illa div gerekiyorsa `role="button" tabindex="0"` ve klavye desteği ekle." Semantik element hem erişilebilirliği hem locator'ı aynı anda kazandırır.

Bir developer "` ` ile ` ` aynı iş: ikisi de tıklanıyor" diyor. Bu iddiadaki eksik nedir?

Hiçbir eksik yok, ikisi de aynıdır

` ` accessibility tree'de rol/isim/klavye desteği kazanmaz; `getByRole` onu bulamaz ve screen reader tıklanabilir olduğunu anlamaz