🎨 CSS: Neden Locator'ı Kırar

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.

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 bir hash (`__x7f2a`) eklediğinde, class'a bağlı locator sessizce kırılır. Neden bu kadar sık başımıza gelir? Çünkü DevTools'ta gördüğün ilk şey class'tır ve "Copy selector" genelde onu üretir — en cazip ama en kırılgan seçim. Java analojisi: bir nesneyi `toString()` çıktısına göre karşılaştırmak gibi — biçim değişince ilişki bozulur, oysa kimliği sabit bir id'ye bağlamalıydın. QA bağlamında: class'ın stil için var olduğunu bilen tester ona locator olarak GÜVENMEZ; bunun yerine developer'dan data-testid ister.

🧩 C1. Selector Mantığı: element, class, id, descendant, child, attribute

CSS selector'lar bir POSTA ADRESİ hassasiyeti gibidir: element selector (`button`) = "şehirdeki herhangi bir ev", class selector (`.card`) = "bu mahalledeki herkes", id selector (`#checkout`) = "tam bu adres", descendant (`ul li`) = "bu sokaktaki herhangi bir katta", child (`ul > li`) = "bu sokağın doğrudan üzerindeki evler", attribute (`[data-testid]`) = "üzerinde şu tabelayı taşıyan ev". Peki bu ayrımı bilmek neden işine yarar? Çünkü CSS selector mantığı Playwright/Cypress'in `.locator()` metoduna neredeyse BİREBİR geçer — CSS okuyabilen tester otomasyon syntax'ını da okur. Java analojisi: SQL'de `WHERE` cümlesindeki tablo ilişkilerini (JOIN zinciri) zincirlemek gibi — selector'lar da HTML ağacındaki torun/çocuk ilişkilerini zincirler. QA bağlamında: descendant selector (boşluk) fazla geniştir ve yanlış-pozitif (istenmeyen iç içe elemanı da yakalama) riski taşır; child selector (`>`) daha dar ve genelde daha güvenlidir.

Adım Adım: `ul li` ile `ul > li` Arasındaki Fark

Descendant selector: `ul li`

Boşluklu yazım "içinde HERHANGİ bir seviyede li olan ul" demektir — arada kaç kat sarmalayıcı olursa olsun eşleşir.

Fazla geniş olabilir

BugCard'ın içinde iç içe bir alt liste (yorumlar gibi) varsa, `ul li` o alt listedeki `li`'leri de YANLIŞLIKLA eşleştirebilir.

Child selector: `ul > li`

"`ul`'nin DOĞRUDAN çocuğu olan li" demektir — sadece bir seviye altındaki eşleşir, iç içe alt listeler dahil olmaz.

Daha dar, daha güvenli

BugCard listesi gibi tek seviyeli yapılarda `>` kullanmak, yanlışlıkla iç içe elemanları yakalama riskini ortadan kaldırır.

Playwright/Cypress'e neredeyse birebir geçer

CSS selector mantığını okuyabilen tester, `page.locator('ul > li')` gibi otomasyon syntax'ını da doğrudan okuyabilir — syntax derinliği için /playwright, /cypress'e bak.