Cypress Kullanarak Web Uygulamalarınızı Test Etmeye Ne Dersiniz?
Geliştirmiş olduğunuz web uygulamalarınızı yazdığınız testlerle kontrol etmek, varsa hataları tespit etmek ve onları düzenlemek sizlere karmaşık ve zor bir süreç gibi gelebilir. Ancak, Cypress’i kullanarak tüm bu adımları çok daha basit ve hızlı bir şekilde tamamlayabilirsiniz. Cypress, web uygulamalarınızı otomatik olarak test etmeniz için kullanabileceğiniz JavaScript tabanlı e2e test frameworküdür. Testlerinizi daha hızlı, daha kolay ve daha güvenilir bir şekilde yazmanızı ve koşmanızı sağlar.
Peki Cypress Nedir?
Cypress, web uygulamalarınızı tarayıcı üzerinde otomatik olarak test etmeniz için geliştirilmiştir. Cypress.io blog sayfasından edindiğim bilgiye göre, ilk commiti 2014 yılında atan cypress developerları, 3 yıllık yoğun bir çalışma sürecinin ardından ilk public releaselerini 10 Eylül 2017'de tüm kullanıcıların hizmetine sundular. Cypress ile uygulamanızın doğru bir şekilde çalışıp çalışmadığını kontrol edebilirsiniz. Bu sayede uygulamanızda bulunan hataları kısa sürede tespit ederek sorunları hızlı bir şekilde çözüme kavuşturabilirsiniz. Ayrıca Cypress kullanarak uygulamanızın sayfalarını ayrı ayrı test edip belirli bir bölümünün işlevselliğini kontrol edebileceğiniz gibi tüm sayfalarını da aynı anda test edebilirsiniz.
Cypressin Çalışma Mantığı Nedir?
Cypress JavaScript tabanlı bir test toolu’dur. Uygulamalarınız için test yazmak isterseniz JavaScript dilini kullanmalısınız. Cypress seçtiğiniz tarayıcıya gömülü olarak ayağa kalkar. Bundan dolayı çok daha hızlı ve verimli sonuçlar elde edebilirsiniz. Cypress uygulamanıza direkt erişim sağlayarak DOM üzerinde değişiklik yapabilmenize olanak sağlar. Aynı sayfada birden fazla işlem yapma ve otomatik senkronizasyon özellikleri sayesinde, testlerinizi daha hızlı şekilde koşabilirsiniz.
Cypress, test senaryolarında hata ayıklama ve hata izleme işlemlerini kolaylaştıran gelişmiş özelliklere sahiptir. Kullanıcıların tarayıcı üzerinde gerçek zamanlı olarak testlerinin ilerleyişini adım adım takip edebilme, varsa hata mesajlarını görebilme ve testlerinin neden başarısız olduğunu rahatlıkla anlayabilmelerine olanak sağlar.
Cypress’in Avantajları
Cypress , diğer birçok test toollarının aksine, tarayıcının içinde çalışır. Bu, testlerinizin uygulamanızla aynı ortamda yürütüldüğü anlamına gelir ve bu sayede, Cypress’in tarayıcınız tarafından tetiklenen tüm olayları algılamasına, testlerinizdeki tüm elementlere erişmesine olanak tanır.
Cypress’in auto waiting özelliği ile, tarayıcının hareketlerini izleyerek bir sonraki adıma geçmeden önceki tüm steplerin başarılı bir şekilde tamamlanmasını bekler.
Testleriniz çalışırken hangi adımların atıldığını ve uygulamanın hangi adımda ne hata verdiğini izleyerek görüntüleyebilmenize olanak tanır. (Karşılaştığınız bazı problemlerde hatalarınıza çözüm yolları sunar. Örneğin; force işlemleri…)
Cypress, uygulamanızı kontrol etmek için yazdığınız testlerin her adımında otomatik olarak ekran resimlerini alır. Ayrıca testlerin tamamlanmasının ardından tüm test sürecini izleyebilmeniz için video kaydı alır. Bu sayede hataların ne zaman ve nerede oluştuğunu belirlemenizi sağlar .
Cypress’in Dezavantajları
Cypress’in avantajlı tarafları olsa da bazı dezavantajları da bulunuyor. Tarayıcı desteği açısından Cypress sadece Firefox,Chrome,Edge ve Electron’u destekliyor. Örneğin Opera desteği henüz yok. Bunun dışında aynı anda birden fazla tarayıcıda test çalıştırmak isterseniz buda Cypress ile pek mümkün değil. Göze çarpan bir diğer dezanvantajı ise Native mobile testleriniz içinde Cypres’in henüz bir desteği maalesef bulunmuyor. Diğer test toollarında olduğu gibi Cypress’in de yukarıda bazı maddelerle örneklerini verdiğim dezavantajları bulunuyor ancak Cypress ekibinin uygulamalarına her yeni versiyonda bir çok özellik kattığını da söylemiş olayım.
Cypress Kullanan Şirketler
Cypress’in internet sitesinde test süreçlerini Cypress kullanarak yöneten büyük ölçekli şirketlerin hikayelerini ve tecrübelerini paylaştıkları bir bölüm mevcut. Pasific Northwest, Beamery, gofundme,DHL, Siemens, GoDaddy gibi bazı tanınmış şirketler Cypress’i kullanıyorlar.
(Kaynak : https://www.cypress.io/customer-stories/)
Cypress Kullanım İstatistikleri
Cypress’in dünya çapında ki kullanım oranına daire kesin istatistikler; genel kullanımı ve popülaritesi hakkında bir görüş sunabilir ancak bu istatistiklerin doğruluğu belirsizdir ve zamanla da değişir. Herhangi bir aracın kullanım oranını belirlemek çok zordur çünkü bu araç ile çalışan bir çok şirket, projelerini genellikle halka açık olarak yayınlamazlar. Bir çok anket çalışması Cypress’in kullanımının son yıllarda arttığını göstermiştir. Aşağıdaki şema npmtrends.com üzerinden son 5 yıllık süreçte Cypress,PlayWright ve Puppeteer’in indirilme grafiğini göstermektedir.
Cypress Kurulumu
Cypress’ı kurmak için aşağıdaki npm komutunu kullanabilirsiniz:
(cihazınızda node.js kurulumu olduğu varsayılmıştır. Kurulu değilse: https://nodejs.org/tr/download/current adresinden indirip kurabilirsiniz)
Cypress ile Test Yazarken Kullanabileceğiniz Örnek Kodlar
// URL adresine gitmek için
cy.visit('https://www.facebook.com')
// Bir elementin erişmek için
cy.get('classIsmı')
// Bir elementin css ini kullanarak butona tıklama
cy.get('[data-testid="royal_login_button"]').click()
// Input alanına veri girişi yapma
cy.get('#email').type('kullaniciEmail')
cy.get('#pass').type('sifre')
// Elementin varlığını kontrol etme
cy.get('.fb_logo _8ilh img').should('exist')
// Elementin görünürlüğünü kontrol etme
cy.get('[data-testid="royal_login_button"]').should('be.visible')
// Spesifik bir metnin Input alanında içeriğini kontrol etmek
cy.get('input[type="search"]').should('have.value', 'Ali Veli')
// Elementin bir özelliğe (attribute) sahip olup olmadığını kontrol etme
cy.get('a[title="Go to Facebook home"]').should('have.attr', 'href', 'https://www.facebook.com/')
// Checkbox check işlemini kontrol eder
cy.get('#checkboxId').should('be.checked')
// Input alanının devre dışı olup olmadığını kontrol etme
cy.get('#inputId').should('be.disabled')
// Spesifik bir elementin lengthini kontrol etme
cy.get('.element').should('have.length', 5)
// Bir öğeyi yeni bir konuma sürükleyip bırakma
cy.get('#element-1').trigger('mousedown')
cy.get('#element-2').trigger('mousemove').trigger('mouseup') Sayfa İçinde Gezinme:
// Kullanıcının bir giriş formunu doldurup giriş yaptıktan sonra anasayfaya yönlendirilmesini test etme
cy.visit('https://www.facebook.com/')
cy.get('#email').type('email')
cy.get('#pass').type('sifre')
cy.get('[data-testid="royal_login_button').click()
cy.url().should('include', 'https://www.facebook.com/')
// 1 saniye bekler
cy.wait(1000)
// Belirli bir öğenin görünür olmasını bekler
cy.get('#elementId', { timeout: 10000 }).should('be.visible')
/*Bu örnekte, timeout seçeneği ile #elementId öğesinin 10 saniye içinde
görünür hale gelmesini bekleriz. Eğer 10 saniye sonunda öğe hala görünür
değilse, test başarısız olur. */
// 'session_id' adlı çerezin varlığını kontrol etme
cy.getCookie('session_id').should('exist')
// 'session_id' adlı bir çerez ayarlama
cy.setCookie('session_id', '123456')
// 'session_id' adlı çerezi silme
cy.clearCookie('session_id')
// Tüm çerezleri silme
cy.clearCookies()
// 'session_id' adlı çerezin değerini kontrol etme
cy.getCookie('session_id').should('have.property', 'value', '123456')
// 'session_id' adlı çerezin özelliklerini kontrol etme
cy.getCookie('session_id').should('have.property', 'secure', true)
cy.getCookie('session_id').should('have.property', 'httpOnly', true)Cypress ile Test Oluşturma
Bir Cypress testi genellikle üç bölümden oluşur: describe, it ve expect. describe test sürecini it belirli bir testi expect ise, belirli bir durumun doğrulanmasını sağlar.
describe('Facebook Website Test', ()=>{
it('Ana Sayfa Yükleniyor', ()=> {
cy.visit('https://www.facebook.com') // facebook.com u ziyaret eder
cy.contains('Facebook') // "Facebook" kelimesini kontrol eder
// Contains kısmı yerine alternatif olarak şu şekilde de kullanabilirsiniz
cy.contains('Facebook').should((el) => {
expect(el).to.be.visible
})
})
})Yukarıdaki örnekte, facebook.com ‘u ziyaret eden ve “Facebook” kelimesini arayan örnek bir Cypress testini görmektesiniz..
Testlerin Oluşturulması
Cypress ile bir test oluşturmak için ilk olarak cypress/integration klasörünün içine , login.spec.js adlı bir dosya oluşturalım.
describe('Facebook Login Test', () => {
it('Başarılı şekilde oturum açma testi', () => {
// Giriş sayfasını aç
cy.visit('https://www.facebook.com/login')
// Kullanıcı adı ve şifre alanlarını doldur
cy.get('#email').type('kullaniciAdi')
cy.get('#pass').type('sifre')
// Giriş yap butonuna tıkla
cy.get('[data-testid="royal_login_button"]').click()
// Girişin başarılı olduğunu kontrol eder
cy.url().should('include', 'https://www.facebook.com/feed')
// Kullanıcının adı ve soyadının göründüğünü kontrol eder
cy.get('userNavigationLabel').invoke('text').should('have.text','KullanicininAdiSoyadi')
})
it('Başarısız oturum açma girişiminde hata alma testi', () => {
// Giriş sayfasını aç
cy.visit('https://www.facebook.com/')
// Kullanıcı adı ve şifre alanlarını doldur
cy.get('#email').type('gecersiz_kullanici_adi')
cy.get('#pass').type('gecersiz_sifre')
// Giriş yap butonuna tıkla
cy.get('[data-testid="royal_login_button"]').click()
// Hatalı girişin yapılamadığını kontrol et
cy.get('#globalContainer').should('have.text','Girdiğin e-posta veya cep telefonu numarası bir hesaba bağlı değil. Hesabını bul ve giriş yap.')
})
})Yukarıdaki örnek Login test senaryomuzda, ilk testimiz “Başarılı şekilde oturum açma testi” kullanıcı adı ve şifre girişi yaparak başarılı bir şekilde giriş yapmayı kontrol ediyor. İkinci testimiz “Başarısız oturum açma girişiminde hata alma testi” ise geçersiz kullanıcı adı ve şifre ile giriş yapmaya çalıştığında hata mesajının görüntülenip görüntülenmediğini kontrol eder.
Kodda cy.visit() ile giriş sayfasına gidilir, cy.get() ile elementler seçilir ve type() ile değerler girilir. cy.click() ile giriş yap butonuna tıklanır. Son olarak, cy.url() ve cy.get() ile girişin başarılı olduğu veya hatalı olduğu kontrol edilir.
Cypress son versiyonu olan 12.13.0 ‘ı geçtiğimiz hafta yayımladı (https://docs.cypress.io/guides/references/changelog). Sürekli olarak geliştirmeye, kullanıcı ihtiyaçlarını gidermeye özen gösteren ekip soru ve sorunlarınıza da cypress.io üzerinden açtığınız ticketlar üzerinden 48 saat içerisinde geri dönüş yapmaya özen gösteriyor.
Vakit ayırıp cypresss hakkında yazmış olduğum makaleyi okuduğunuz için teşekkür ederim. Cypress hakkında herhangi bir sorunuz varsa yorum olarak yazabilirsiniz, daha fazlası için beni takip edebilirsiniz.
