Cypress nedir? Nasıl kullanılır? #1

Cypress nedir?

Cypress e2e testler yazmayı sağlayan, test yazarken kullanılacak birçok özellik kendi içinde hazır olarak gelen bir yazılımdır. assertion, mocking ve code coverage gibi farklı konularda hem kendi içinde hem de kendisi üzerine geliştirilen pluginler ile destek sunar.

Cypress kurulum

Kurulumu create-react-app ile oluşturduğum bir proje üzerinden devam ettireceğim (Bu proje ile bu yazıda pek işimiz olmayacak. Sonraki yazılarda mocking ve code coverage gibi konular üzerine konuştuğumuz aşamada konuya dahil edeceğim). Başka bir frontend projesi için aynı kurulum adımlarını uygulayabilirsiniz.

npm install cypress --save-dev

cypress paketini indirdikten sonra package.json scripts içerisine cypress:open komutunu ekleyelim.

"cypress:open": "cypress open"

ve npm run cypress:open komutu ile cypress panelini açalım.

 

E2E Testing sekmesine tıklayıp sonraki açılacak ekranda devam et butonuna tıkladığınız cypress klasörü ve cypress config dosyası oluşturulacaktır.

Cypress konfigürasyonu ve klasör yapısı

Cypress klasörü

- support klasörü

Bu klasörde test ile ilgili global konfigürasyonları tanımlayabiliriz. commands.js dosyasında komut ekleyip bu komutları test içerisinde fonksiyon olarak kullanabiliyoruz. Sürekli tekrar edecek komutları buraya ekleyebiliriz.

- fixtures klasörü

Testlerde kullanılacak olan json ya da görsel dosyalarını burada tutuyoruz. Örneğin bir endpoint için mock response değerini burada tutabilir ya da bir upload için kullanılacak görsel dosyasını bu klasörde tutabiliriz.

- e2e klasörü

Testleri bu klasörde tutacağız. Bu klasör yolu konfigürasyonda e2e.specPattern değerinden tanımlanıyor. Daha farklı bir isimde tanımlayabilirsiniz.

- screenshots

Ekran görüntülerinin kaydedildiği klasör.

Konfigürasyon değerleri

- e2e

* baseUrl

Testlerin çalıştırılacağı endpoint. Bu değer tanımlandığı durumda cy.visit komutuna ekstra url eklemeden path değeri ekleyip istenilen sayfaya gidebilirsiniz.

* specPattern

Testlerin tutulacağı dosyaların tanımlanacağı config. String ya da Array değeri verebilirsiniz. Aşağıdaki gibi bir tanımlama ile e2e klasöründe .cy.js ile oluşturulan dosyaları test dosyası olarak görür.

specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'

* setupNodeEvents

Konfigürasyonların override edilebilmesini sağlayan fonksiyon. Bir plugin kullanmak istediğimizde konfigürasyonları kullanması ya da değiştirmesi gerekiyorsa buraya eklememiz gerekiyor.

- env

Test dosyalarında kullanabileceğimiz tüm env değerlerini burada tanımlıyoruz. Cypress.env fonksiyonu ile env değerine ulaşabiliriz.

- viewportWidth, viewportHeight

Testlerin çalıştırılacağı ekran boyutlarının belirleneceği configler.

- video

Testlerin video olarak kayıt alınabilmesini ayarlayan değer. Default true kayıt alınmasın istiyorsanız false olarak ayarlayabilirsiniz.

- testFiles

Bir array içerisine testlerin hangi sırayla koşulmasını istiyorsanız o sırayla test dosyalarını ekleyebilirsiniz.

Bunlar ilk etapta kullanılabilecek ayarlar. Konfigürasyon hakkında daha fazla bilgi için konfigürasyon dokümanı sayfasına göz atabilirsiniz.

cypress dosyaları oluşturulduktan sonra aşağıdaki gibi browser seçimi yapabileceğimiz ekran ile karşılaşacağız. 

Bir browser seçip devam dediğimizde testleri ve ayarları görebileceğimiz ekranlar listelenecek.

Yeni bir spec oluştur butonuna basıp kaydet dediğimizde örnek bir test dosyası oluşturulup çalıştırılacak. 

Oluşturulan dosya aşağıdaki gibi. Test cypress in demo sayfasını açıp tamamlanıyor.

describe('empty spec', () => {

it('passes', () => {

cy.visit('https://example.cypress.io')

})

})

Dosyayı aşağıdaki şekilde değiştirip frontend projesine bakacak şekilde değiştiriyorum.

describe('empty spec', () => {

it('passes', () => {

cy.visit('/')

cy.contains('Edit src/App.js and save to reload.')

})

})

Anasayfayı açıldı, ekranda belirttiğim yazının olup olmadığı kontrol edildi, yazı bulundu ve test başarıyla sonuçlandı.

Ve testleri Specs sekmesinde listelenmiş şekilde görebilirsiniz.

Testleri komut satırında çalıştırmak ve pipeline entegrasyonu

Testleri komut satırında çalıştırmak için aşağıdaki komutu ekleyebilirsiniz. Bu komut ile tüm testler çalıştırılacaktır. Komut satırı ile ilgili daha fazla ayar için komut satırı kullanımı sayfasına göz atabilirsiniz.

"cypress:run": "cypress run --e2e --config-file cypress.config.js"

Yukarıdaki komut testleri arkaplanda bir tarayıcı açıp yine onda koşmayı sağlar. Ama testleri pipelineda çalıştırdığımız durumda bir grafik kullanıcı arayüzüne erişim ve ihtiyaç olmadığından headless modda koşabiliriz. Aşağıdaki komutla testleri headless modda koşabiliriz.

"e2e": "cypress run --headless --e2e --config-file cypress.config.js"

Cypress kendi platformunda belirli abonelik modelleriyle testleri çalıştırma imkanı sunar. Ama açık kaynak bir yazılım olduğu için kendi kullandığınız platform ile entegre edip kullanabilirsiniz. Bitbucket, github ve gitlab gibi birçok platformda cypress i kullanmak oldukça kolay. Bu konuda daha fazla bilgiyi Cypress CI sayfasında bulabilirsiniz.

Bu yazıda cypress in ne olduğu ve nasıl kullanıldığını olabildiğince özet bir şekilde anlatmaya çalıştım. Sonraki yazılarda mocking, command, code coverage gibi konular üzerine kısa yazılar yayınlamaya devam edeceğim.