🦄 Sadece Cypress'te Olan Özellikler

Sadece Cypress'te Olan Özellikler: Cypress'in selector motoru CSS3 standardını değil jQuery'nin Sizzle motorunu çalıştırır — bu, :visible, :contains(), :eq(), :first gibi jQuery

Cypress'in selector motoru CSS3 standardını değil jQuery'nin Sizzle motorunu çalıştırır — bu, :visible, :contains(), :eq(), :first gibi jQuery pseudo-class'larının doğrudan cy.get() içinde çalışması anlamına gelir, tıpkı düz SQL yerine SQL'in üzerine kurulmuş ve onun sözdizimini genişleten bir ORM sorgu dilini kullanmak gibi: taban katmanın tüm gücüne sahipsin ama üstüne daha ifadeli bir sözdizimi eklendi. Peki Selenium ve Playwright CSS3 standardını tam desteklerken neden Cypress bu jQuery motorunu tercih ediyor? Çünkü Cypress'in Node.js sunucu katmanı değil, tarayıcı içi katmanı vardır ve jQuery zaten tarayıcıda yüklüdür — bu mimari tercih sayesinde .invoke('val'), .its('length'), .trigger() gibi jQuery zincirleme metodları da ücretsiz gelir. Java'da bunu Apache Commons koleksiyonlarının JDK'nın temel koleksiyon API'si üzerine eklediği yardımcı metodlara benzetebilirsin: standart olmamasına rağmen gerçek işlerde çok daha hızlı yazmana izin verir. QA'nın pratik faydası şudur: :visible pseudo-class'ı olmadan CSS3'te "görünür olan tüm liste elemanlarını" seçmek için ya JavaScript ile DOM'u elle dolaşırsın ya da testi daha kırılgan hale getiren ek mantık eklersin — Cypress'te tek satır yeterlidir ve bu, yanlış elementin tıklandığı flaky testlerin önüne geçer.

Cypress'in test kodunu tarayıcının içinde, gerçek jQuery kütüphanesi üzerinde çalıştırması, ona Selenium ve Playwright'ta birebir KARŞILIĞI OLMAYAN bazı özellikler kazandırır. Bunların en somut örneği: cy.get() içine yazdığın selector string'i, CSS3 standardının değil, jQuery'nin Sizzle selector motorunun kurallarına göre çalışır.

jQuery Pseudo-Class'ları — CSS3'te YOK, sadece Cypress'te var

Micro Lab: Cypress — cy.get() secimi

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

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?

.invoke() ve .its() — jQuery metodunu/property'sini zincirde çağır

Micro Lab: Cypress — Assertion yazma