🐞 Debugging & Selector Playground

Debugging & Selector Playground: Cypress'in debugging üstünlüğü şuradan gelir: her komuttan sonra otomatik DOM snapshot alındığı için test başarısız olduğunda zaten elinizde tam

Cypress'in debugging üstünlüğü şuradan gelir: her komuttan sonra otomatik DOM snapshot alındığı için test başarısız olduğunda zaten elinizde tam bir kara kutu kaydı vardır — tıpkı bir uçak kazasında kara kutu açıldığında son 30 dakikanın sesinin ve telemetrisinin orada olması gibi, hiçbir şey ekstra kayıt etmek zorunda kalmadan. Peki o zaman cy.pause() ve cy.debug() neden gerekli, kara kutu yetmiyor mu? Çünkü kara kutu kazadan sonra okunur; canlı geliştirme sırasında, test daha başarısız olmadan önce nereye gitmekte olduğunu görmek istiyorsun — cy.pause() testi tam o anda dondurur ve DOM'u serbestçe inceleme fırsatı verir. cy.debug() ise o anki DOM elementini doğrudan DevTools konsoluna aktarır ve jQuery metodlarıyla sorgulayabilirsin. Java'da bunu Eclipse veya IntelliJ debugger'ında breakpoint koyarak Watches panelinden değişkeni incelemekle kıyaslayabilirsin. Selector Playground ise QA'nın gerçek iş sorununu çözer: bir elementi bulmak için XPath mı, CSS mi, data-cy mi kullanmalısın — Playground önce kırılganlık sırasına göre önerir, tek bir eşleşme verip vermediğini anında test edersin, CI'da "element bulunamadı" hatasını yazarken değil, yazarken önlersin.

Cypress'in en büyük debugging avantajı, her komuttan sonra otomatik DOM snapshot'ı almasıdır — bu yüzden çoğu zaman ekstra log/debug kodu YAZMADAN, sadece Command Log'da geçmiş bir adıma tıklayarak (time-travel) neyin yanlış gittiğini görürsün. Ekstra araçlar gerektiğinde ise cy.debug(), cy.pause() ve Selector Playground devreye girer.

cy.debug() ve cy.pause()

Micro Lab: Cypress — cy.get() secimi

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

debugger ile .then() içinde breakpoint

Adim Adim: Cypress — cy.get() secimi

data-cy attribute var mi kontrol et — varsa cy.get("[data-cy=btn]") kullan

data-cy yoksa cy.get("#id") veya cy.get(".class") yaz

Metin icerigi onemse cy.contains("Giris Yap") veya .contains() zincirle

Ic iceye yapi gerekiyorsa .find("button") ile cocuk elementi ara

Assertion: .should("be.visible"), .should("have.text", "...")

Cypress ile element secme ve zincir kurma sirasi nedir?

Java'da debug yapmak için kodu DURDURMAN (breakpoint) veya ekstra println satırları eklemen gerekir. Cypress'te test zaten her adımda bir "snapshot" bıraktığı için, çoğu debugging ekstra kod yazmadan Command Log'da geriye tıklayarak yapılır — bu "time-travel debugging" Selenium/Java dünyasında YOKTUR.