Cypress

Okunuşu: saypırıs

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Cypress, web uygulamalarının uçtan uca ve bileşen testlerini tarayıcıda yürüten, otomatik bekleme ve etkileşimli çalıştırıcı sunan JavaScript framework'üdür.

Cypress nedir?

Cypress 2017'de yayımlandı ve ön yüz geliştiricileri arasında hızla popüler oldu. Tarayıcıyı dışarıdan kontrol eden araçların aksine Cypress test kodunu uygulamayla aynı tarayıcıda çalıştırır; bu da ona sayfaya, ağ isteklerine ve uygulamanın kendi nesnelerine doğrudan erişim verir ve testleri hızlı ve hata ayıklaması kolay yapar.

cy.get(".cart").should("contain", "2 items") gibi komutlar geçene ya da süreleri dolana kadar otomatik olarak yeniden denenir; bu yüzden testler nadiren elle beklemeye ihtiyaç duyar. Etkileşimli çalıştırıcı, uygulamayı komutların bir kaydının yanında gösterir; bir adımın üzerine gelmek de sayfanın o andaki bir anlık görüntüsünü gösterir. cy.intercept ağ isteklerini sahteleyebilir ya da izleyebilir; bileşen testi de React, Vue, Angular ya da Svelte bileşenlerini yalıtılmış olarak bağlar (mount).

Testler JavaScript ya da TypeScript ile yazılır ve Chrome tabanlı tarayıcılarda, Firefox'ta ve WebKit'te, yerelde ya da CI'da çalışır. Ücretli bir servis olan Cypress Cloud, ücretsiz ve açık kaynaklı test çalıştırıcısının üzerine paralel çalıştırmalar, kayıtlar ve kararsız test analitiği ekler.

Sık yapılan bir yanlış, Cypress'in bir kullanıcının yapabildiği her şeyi test edebileceğini düşünmektir. Tarayıcının içinde çalışmak bazı sınırlar getirir: birden çok tarayıcı sekmesini kontrol etmez ve tek bir testte birkaç site arasında test yapmak özel komutlar gerektirir. Birden çok sekmeye, birkaç tarayıcı bağlamına ya da JavaScript dışında dillere ihtiyaç duyan ekipler çoğu zaman onun yerine Playwright'ı seçer.

Önemli noktalar

Cypress, uçtan uca ve bileşen testleri için bir JavaScript framework'üdür.
Testleri uygulamanın yanında, tarayıcının içinde çalıştırır.
Komutlar otomatik olarak yeniden denenir; bu yüzden elle bekleme nadiren gerekir.
Etkileşimli çalıştırıcı her adım için anlık görüntüler gösterir.
Birden çok sekmeyi ele almaz; Playwright yaygın bir alternatiftir.

Örnek

Sahte bir API ile uçtan uca test (Cypress)javascript

describe("cart", () => {
  it("shows items added from the product page", () => {
    cy.intercept("GET", "/api/products/42", { fixture: "product.json" });   // stub the API

    cy.visit("/products/42");
    cy.contains("button", "Add to cart").click();
    cy.contains("button", "Add to cart").click();

    cy.get("[data-test=cart-count]").should("have.text", "2");   // retries until true
    cy.get("[data-test=cart-link]").click();
    cy.url().should("include", "/cart");
  });
});

Sık sorulan sorular

Cypress mi Playwright mı?

İkisi de moderndir ve otomatik bekler. Cypress çok kullanıcı dostu bir etkileşimli çalıştırıcı sunar ve tarayıcının içinde çalışır. Playwright ise birden çok sekmeyi ve bağlamı, daha fazla dili ve ücretli bir servise gerek kalmadan paralel çalıştırmayı destekler. Birçok yeni proje Playwright'ı seçiyor, Cypress ise ön yüz ekipleri arasında popüler olmaya devam ediyor.

Cypress ücretsiz mi?

Evet. Cypress test çalıştırıcısı açık kaynaklı ve ücretsizdir. Kayıt, paralelleştirme ve analitik ekleyen Cypress Cloud ise ücretsiz bir katmanı olan ücretli bir servistir.

Cypress bileşen testi nedir?

Bir React ya da Vue bileşeni gibi tek bir ön yüz bileşenini gerçek bir tarayıcıda bağlayıp bütün uygulamayı çalıştırmadan yalıtılmış olarak test etmektir.

Sık karşılaştırılanlar

Cypress vs PlaywrightCypress testleri tarayıcı içinde, etkileşimli bir çalıştırıcıyla yürütür; Microsoft'un Playwright'ı ise tarayıcıları dışarıdan yönetir ve birkaç dil destekler.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin