Selamlar. Bu yazıda bugün faydalandığım benim de kullandığım bir test frameworkünden kısaca bahsedeceğim.
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.
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.