CodeceptJS ile Modern E2E Testleri

Selamlar. Bu yazıda bugün faydalandığım benim de kullandığım bir test frameworkünden kısaca bahsedeceğim.

CodeceptJS ile Modern E2E Testleri

Aslında E2E testler yazılım geliştirme süreçlerinde yeni değiller. Tarayıcı otomasyon testlerini sağlayan birçok kütüphane zaten mevcut. Daha öncesinde bir Vue projesi için E2E testlerini Nightmare.js ile yapmıştım. Alakalı bilgiyi Çağatay vermiş.

Bu yazıda ise yine bir Vue projesini test etmek için kullandığım CodeceptJS‘e ayırdım. Biraz daha basitlik ararken Github’da denk geldim ve denedim.

Bu yazıda ben helper olarak Puppeteer kullanacağım.

Kurulum

npm install codeceptjs puppeteer --save-dev

Kurulum yukarıdaki komutla bitiyor. CodeceptJS ve Puppeteer aynı anda kuruluyorlar. Şimdi gelin mevcut dizini codecept için hazırlayalım.

./node_modules/.bin/codeceptjs init

Yukarıdaki komutu verdikten sonra bize testleri hangi klasörde tutacağımızı söylüyor. Ben genellikle tests isimli klasörde tutuyorum.

Bu ismi verdikten sonra karşımıza seçim menüsü geliyor. Burada Puppeteer’i seçeceğiz. Daha sonra loglar ve ekran görüntülerinin çıkacağı klasörü soruyor ben buraya hiç dokunmadım.

Sonraki soruda ise I objesi kullanarak testleri yazıp yazmayacağımızı soruyor. Bildiğiniz I harfi. Dil ise ben English seçtim. Github reposuna dil katkısı yaparsanız `Ben.sayfadayım(”)` gibi bir kullanım da olacak.

Uyarıya Dikkat Edelim

İşlem adımlarını da bize soruyor buraya dokunmadan ilk aşamada enter diyebilirsiniz.

CodeceptJS ile Modern E2E Testleri

Kırmızı uyarı henüz bir helper seçilmediğini söylüyor. Lütfen elle ekleyin diyor. Bunun için codecept.json dosyasını düzenleyeceğiz.

'Puppeteer': {
  'url': 'http://localhost',
  'show': true,
}

İlk Testimizi Yazalım

Bu kadar evet. Artık test oluşturma işlemini yapabiliriz. Aşağıdaki komutla birlikte başlayalım.

./node_modules/.bin/codeceptjs gt

Burada test dosyasının adını ve feature değerini verelim ve testimizi yazalım. Bunun için klasik olarak GitHub kullanacağım.

nano tests/deneme_test.js

Test dosyamızı ben şimdilik nano ile düzenliyorum.

Feature('Deneme');

Scenario('test something', (I) => {
        I.amOnPage('https://github.com')
        I.see('GitHub')
        I.fillField('Search GitHub', 'aligoren')
        I.pressKey('Enter')
        I.waitForText('Users')
        I.click('Users')
        I.waitForText('1 user')
        I.click('aligoren')
        I.waitForText('Repositories')
        I.wait(1)
        I.click('Repositories')
        I.wait(3) // 3 saniye bekle
});

Kodlarımız tamamsa şimdi gelelim testleri çalıştırmaya.

./node_modules/.bin/codeceptjs run --steps

Yukarıdaki gibi bir kodun sizi büyük bir yükten kurtarıyor. Nedir bu yük? Şu yazdığınız kod adımlarını belki sürekli olarak uygulayarak geliştirdiğiniz bir projeniz var? Evet bu tam da orada işe yarıyor işte.

Kısacası yukarıdaki testte github.com adresine gidip arama kutucuğuna aligoren yazdık. Daha sonra enter’a bastık ve Users sekmesine tıkladık. Daha sonra çıkan kullanıcının sayfasına gittik ve oradan repolarını listelettik.

Ve bütün bunlar yazdığım bu kod sayesinde oldu artık E2E testleri sayesinde CTRL + F5 yapayım da şunları tekrar tekrar yapayım derdi de kalmamış oldu. Gerçi olaya böyle bakmak saçma olur ama olsun.

Evet hepsi bu kadardı. Umarım faydalı olur. Okuduğunuz için teşekkürler.