CodeceptJS Eğitimi
Merhaba arkadaşlar, bu yazımda CodeceptJS kütüphanesini detaylı bir şekilde anlatacağım. CodeceptJS kütüphanesi ile beraber kurulum, ilk uygulamanın yazılması, Page Object ve Data Driven Test yaklaşımlarını öğreneceğiz. Ayrıca Allure Report eklentisini kullanarak HTML rapor oluşturacağız.
CodeceptJS Nedir ?
CodeceptJS, davranış güdümlü test söz dizimine sahip uçtan uca UI testler yazabileceğiniz bir çerçeve kütüphanedir. Aşağıdaki şemada da görüldüğü üzere CodeceptJS, bizimde yakından bildiğimiz helper’ları kullanır. Son olarak playwright ‘da bu helper’ların arasına eklenmiştir.
CodeceptJS Özellikleri
CodeceptJS’nin özellikleri aşağıda listelenmiştir.
- Testlerinizi davranış güdümlü test yaklaşıma göre yazdığınız için okunabilir ve takip edilebilir.
- Tüm Helper’lar aynı çerçeveyi kullandığı için oluşturduğunuz testleri kolaylıkla farklı helper’a geçirebiliriz.
- Page Object yaklaşımıyla bakımı kolay, temiz test kodları oluşturabiliriz.
- Data Driven Test yaklaşımıyla excel vb. dosyalarla çalışmak zorunda kalmadan kendi veri listelerinizi oluşturarak testlerinizi yürütebilirsiniz.
- Allure Report gibi rapor eklentileri ile HTML formatında görsel ve anlaşılır raporlar oluşturabilirsiniz.
- Paralel test mantığıyla yazdığınız kodların birden fazla örneğini aynı veya farklı tarayıcılarda yürütebilirsiniz.
- Test yürütme sırasında başarısız olan test adımlarınız otomatik olarak tekrar denenir.
- Web projelerinizin yanında Appium desteğiyle mobil projelerinizi de kolaylıkla test edebilirsiniz.
- Etkileşimli debug mod sayesinde testlerinizi yürütürken bile anlık olarak testi durdurup locator kontrolü yapabilirsiniz.
Kurulum
IDE olarak Visual Studio Code, Helper olaraksa Puppeteer kullanacağım. Bu yazıda farklı olarak resimler üzerinden değil sizler için hazırlamış olduğum kısa videolarla konu anlatımı yapacağım. Eğitim sırasında kullandığım kurulum komutlarını da aşağıda paylaşıyorum.
Package.json dosyasını oluşturmak için;
npm init -y
CodeceptJS ve Puppeteer kurulumu için;
npm install codeceptjs puppeteer --save-dev
CodeceptJS yapılandırma için;
npx codeceptjs init
Yapılandırma komutu çalıştırıldığında sizden aşağıdaki sorulara cevap vermeniz istenecektir, bu sorulara videodaki gibi cevaplar vermeniz ilerleyen konularda sorun yaşamamanız için önemlidir.
- Where are your tests located ?
- What helpers do you want to use ?
- Where should logs, screenshots, and reports to be stored ?
- Do you want localization for tests ?
- Base url of site to be tested ?
- Show browser window ?
Kurulum ve yapılandırma işlemlerini tamamladığınızda codeceptjs.conf.js adında bir dosyanın oluştuğunu görebilirsiniz. Bu dosya ile yapılandırma sırasında verdiğiniz cevapları değiştirebilirsiniz.
İlk Uygulamanın Yazılması
İlk uygulamamız standart bir oturum açma sayfasının testini yazmak olacaktır. Videoda kullanılan test kodları da aşağıdadır.
Feature('login_test'); Scenario('successful login', (I) => { I.amOnPage('/'); I.fillField('kullaniciAdi', 'admin'); I.fillField('parola', '123456'); I.click('#btnGirisYap'); I.seeInTitle('Kullanıcı Tanımlama'); });
Yazılan kodu çalıştırmak için;
npx codeceptjs run
Page Object Yaklaşımı
CodeceptJS ile Page Object yaklaşımını kullanarak bakımı kolay temiz test kodları yazabilirsiniz. Bu yöntem kurumsal projelerde sıklıkla kullanılmaktadır. Tests ve Pages adında iki klasörümüz bulunmaktadır. Page klasörünün içerisine test edeceğimiz sayfanın locatorlarını ve ilgili operasyonun yapılacağı methodlar yer alacaktır. Tests klasöründe ise pages klasöründe ilgili sayfa için oluşturduğumuz operasyon methodunu çağırarak testlerimizi yürüteceğiz. Kullanıcı Tanımlama adında örnek bir sayfa ile bu yaklaşımı anlattım.
Page sayfası oluşturmak için aşağıdaki komutu kullanın, isimlendirme sırasında page kullanmayın codeceptjs bizim için sonuna page deyimi ekleyecektir. Page sayfasını oluşturduktan sonra codeceptjs.conf.js dosyası içinde include bölümü bulunmaktadır bu kısıma oluşturduğunuz page sayfasını tanımlamayı unutmayın.
npx codeceptjs gpo
Kullanıcı tanımlama sayfası için oluşturduğum page sayfasına ait kodlar aşağıdaki gibidir:
const { I } = inject(); module.exports = { locators: { txtName: '#txtAd', txtLastName: '#txtSoyad', txtEmail: '#txtEposta', drpTitle: '#drpUnvan' }, rdMen: '#radioErkek', rdWomen: '#radioKadin', chckAgree: '#chckbxKabul', btnSave: '#btnKaydet', addUser(name, lastname, email, title) { I.fillField(this.locators.txtName, name); I.fillField(this.locators.txtLastName, lastname); I.fillField(this.locators.txtEmail, email); I.click(this.rdMen); I.selectOption(this.locators.drpTitle, title); I.click(this.chckAgree); I.click(this.btnSave); } }
Test sayfası oluşturmak için aşağıdaki komutu kullanın.
npx codeceptjs gt
Kullanıcı tanımlama sayfası için oluşturduğum test kodu aşağıdaki gibidir.
Feature('user_added_test'); Scenario('successful user added', (I, user_addedPage) => { I.amOnPage('/kullaniciTanimlama.html'); user_addedPage.addUser('Yasin','Albakır','info@yasinalbakir.net','Yazılım Test Uzmanı'); I.seeInPopup('Kullanıcı kaydetme işlemi başarıyla tamamlandı.'); I.acceptPopup(); });
Data Driven Test Yaklaşımı
Aynı test senaryosunu farklı test verileri ile yürütmek için genellikle excel dosyaları kullanırız. Excel dosyalarını okumak ve okunan test verileri ile testleri yürütmek çok fazla efor gerektiren işlemlerdir. CodeceptJS ile bu tarz işlemlerle uğraşmadan çok basit olarak kendi veri setlerinizi oluşturabilir ve testlerinizi yürütebilirsiniz. Bu konu için hazırladığım videoyu izlediğinizde ne kadar kolay olduğunu anlayacaksınız.
Page Object yaklaşımını anlatırken oluşturmuş olduğum user_added_test.js sayfasını bu yaklaşımı kullanarak revize ettim, kodun son hali aşağıdaki gibidir.
Feature('user_added_test'); let user_data = new DataTable(['name', 'lastname', 'email', 'title']); user_data.add(['Yasin', 'Albakır', 'info@yasinalbakir.net', 'Yazılım Test Uzmanı']); user_data.add(['Zeynep', 'Albakır', 'zeynep.albakir@hotmail.com', 'Proje Mühendisi']); Data(user_data).Scenario('successful user added', (I, user_addedPage, current) => { I.amOnPage('/kullaniciTanimlama.html'); user_addedPage.addUser(current.name, current.lastname, current.email, current.title); I.seeInPopup('Kullanıcı kaydetme işlemi başarıyla tamamlandı.'); I.acceptPopup(); });
Rapor Oluşturma
CodeceptJS ile birden fazla eklenti kullarak görsel raporlar oluşturmanız mümkündür. Cli ile komut satırında işlem kaydı seviyesinde rapor üretmektedir, Allure report ve Mocha ile html formatında raporlar üretebilirsiniz. Yine mocha-junit-reporter ile xml formatında da raporlar oluşturmanız mümkündür. Ben allure report eklentisini kullanıyor olacağım.
Kurulum için;
npm install -g allure-comandline --save-dev
Eklentiyi etkinleştirmek için codeceptjs.conf.js dosyasında yer alan plugins bölümüne aşağıdaki komutu eklemeniz gerekiyor.
allure: { enabled: true }
codeceptjs.conf.js dosyasının son halini de sizlerle paylaşıyorum.
const { setHeadlessWhen } = require('@codeceptjs/configure'); // turn on headless mode when running with HEADLESS=true environment variable // HEADLESS=true npx codecept run setHeadlessWhen(process.env.HEADLESS); exports.config = { tests: './tests/**/*.js', output: './output', helpers: { Puppeteer: { url: 'https://demo.yasinalbakir.net', show: false } }, include: { I: './steps_file.js', user_addedPage: './pages/user_added.js' }, bootstrap: null, mocha: {}, name: 'codeceptjs-example', plugins: { retryFailedStep: { enabled: true }, screenshotOnFail: { enabled: true }, allure: { enabled: true } } }
Rapor dosyasını oluşturmak için daha önce oluşturduğumuz test kodunu aşağıdaki komut ile çalıştırın;
npx codeceptjs run --plugins allure
ve son olarak aşağıdaki kodu çalıştırarak rapor dosyanızı generate edebilirsiniz.
allure serve output
Davranış Güdümlü Geliştirme Yaklaşımı (BDD)
Bu bölümde size CodeceptJS çatısı altında BDD yaklaşımına uygun test kodları yazmayı anlatacağım. Bu konuyla ilgili yine sizlere kısa ve öz bir video hazırladım aşağıda bulabilirsiniz.
Kurulum için;
npx codeceptjs gherkin:init
Yukarıdaki komutu çalıştırdıktan sonra otomatik olarak Feature ve Steps dosyalarının oluştuğunu göreceksiniz.
Yazdığınız kodu çalıştırmak için;
npx codeceptjs run --steps
autoLogin Eklentisi
Bu eklenti sayesinde kullanıcı ilk test için oturum açar ve daha sonraki testler için mevcut oturumu kullanabilir.
Eklentinin kurulumu için;
npm install auto-login
Codeceptjs.conf.js yapılandırma dosyasının son hali;
autoLogin: { enabled: true, saveToFile: false, inject: 'signIn', users: { User: { login: (I) => { I.amOnPage('/'); I.fillField('#kullaniciAdi', 'admin'); I.fillField('#parola', '123456'); I.click('#btnGirisYap'); }, check: (I) => { I.seeInCurrentUrl('/kullaniciTanimlama.html'); }, fetch: () => { }, restore: () => { }, } } }
Yapılandırma komutlarına genel bakış:
- saveToFile: Çerezleri kaydetmek için kullanılır, Mevcut oturumun yeniden kullanılmasına imkan sağlar. (Test yaptığım sayfada çerez yapısı olmadığı için ben false yaptım.)
- inject: Kullanılacak olan oturum açma fonksiyonun adını belirlemek için kullanılır.
- users: Oturum açma fonksiyonu için oturum bilgilerinin tanımlandığı bloktur.
- check: Bu komut sayesinde oturum açma fonksiyonu kontrol edilir.
- fetch: Mevcut çerezleri almak için kullanılır.
- restore: Çerezleri ayarlamak için kullanılır.
Herhangi bir test kodunda kullanımı;
Feature('User Save'); let user_data = new DataTable(['ad', 'soyad', 'email', 'unvan']); user_data.add(['Yasin', 'Albakır', 'info@yasinalbakir.net', 'Yazılım Test Uzmanı']); Data(user_data).Scenario('Check User Save Function', (I, current, signIn) => { signIn('User'); I.fillField('#txtAd', current.ad); I.fillField('#txtSoyad', current.soyad); I.fillField('#txtEposta', current.email); I.selectOption('#drpUnvan', current.unvan); I.click('#chckbxKabul'); I.click('#btnKaydet'); I.seeInPopup('Kullanıcı kaydetme işlemi başarıyla tamamlandı.'); I.acceptPopup(); });
Konuyla ilgili hazırladığım kısa video da aşağıdadır.
Bu makale hazırlanırken https://codecept.io sayfasından faydalanılmıştır.
Faydalı olması dileğiyle…