Cypress ile Test Otomasyonu
Yazılımlar da insanlar gibidir. Başlangıçta tıpkı bir bebek gibi yapabildikleri sınırlıdır ancak zamanla büyürler; yürümeyi, konuşmayı, yemek yemeyi, ihtiyaçlarını görebilmeyi öğrenirler. Yani müşterinin ihtiyaçlarına göre ilk önce basit bir fonksiyonla işe başlamışken, zaman içinde yeni özellikler eklenir ve bu yeni özellikler eklenirken sistem büyür. Sistem büyüdükçe de test edilmesi gereken fonksiyonlar artar, arayüzler değişir, küçük bir değişiklikten etkilenebilecek alanlarda artış olur. Hal böyle olunca bir testçinin gün geçtikçe gelişen yazılım üzerinde bir yandan yeni fonksiyonları test ederken, aynı anda düzenli olarak manuel regresyon testi koşması zorlaşır. İşte tam da bu sırada test otomasyonu devreye girer. Otomasyon sayesinde bizler yeni fonksiyonları test ederken, projenin happy pathinde etkilenen bir yerler olmuş mu diye düşünmeyiz çünkü geliştirdiğimiz test otomasyonu bunu bizim yerimize yapar ve projede etkilenen yerleri görmemiz kolaylaşır.
Arabam.com test ekibi olarak test otomasyon tool seçimimizi Cypress’ten yana kullandık, neden mi ? Bunu cevaplamak için sizlere öncelikle Cypress hakkında biraz bilgi vereyim ve daha sonrasında kısa bir örnek ile devam edelim.
Neden Cypress?
Cypress, testlerin javascript ile yazıldığı, open source bir test otomasyon aracıdır. Cypress’i ister direct download ile ister npm aracılığı ile indirebiliriz. Daha detaylı kurulum bilgisi için cypress installing linki sizlere yardımcı olacaktır. Cypress ile test suitimiz boyunca zamanda yolculuk yapabiliriz; yani testlerin hangi aşamasında nasıl bir işleyiş oldu, nerede hata aldı sorularına zorlanmadan yanıt bulabiliriz. Testlerin çalışması boyunca otomatik olarak ekran görüntüsü ve video kaydı alır ve hata anında nasıl bir ekran ile karşı karşıya kaldığımızı kolayca görebiliriz. Komut akışı ekranında, komutun üzerine hover yaptığımız zaman hangi işlemi yaptığını ya da eğer hata almışsa(örneğin DOM içerisinde bir elementi bulamadı) hatanın neyden kaynaklı olduğu görülebilir. Cypress ile debug etmek çok daha kolay çünkü hatanın nereden geldiğini bildiğimiz için hatayı nasıl çözeceğimizi bulmak da kolaylaşıyor :) Kodlarımızı direkt olarak Chrome Dev Tools dan da debug edebiliriz. Diğer bir güzel yanı ise kod yazarken ekstra wait ya da sleep yapmamıza gerek yok çünkü Cypress bunu bizim yerimize yapıyor! Otomatik olarak, komutlar arası devam etmeden önce bekleme gerçekleştiriyor. Cypress mimarisi Selenium ya da WebDriver kullanmaz. Böylelikle daha hızlı, tutarlı ve güvenilir testlere merhaba diyoruz:)
Cypress ve Diğerleri
Cypress, Selenium ile karşılaştırıldığı zaman hem temel olarak hem de mimari açıdan farklılık gösterir. Bu, daha hızlı, daha kolay ve daha güvenilir testler yazmamızı sağlar. Pekiii, mimari olarak farklılık var dedik, o zaman nedir bu farklılıklar göz atalım :
- Çoğu test aracı (Selenium gibi), tarayıcının dışında ve network üzerinden, verilen komutları uzaktan çalıştırarak çalışır. Cypress ise tam tersidir. Cypress, uygulamamızla aynı çalışma döngüsünde yürütülür.
- Cypress’ in arkasında bir Node.js sunucu işlemi vardır. Cypress ve node.js birbiri ile sürekli iletişim kurar, senkronize eder ve görevleri yerine getirir. Her iki tarafa da(frontend - backend) erişebilmek, uygulamamızın olaylarına gerçek zamanlı olarak yanıt verebilmemizi sağlar.
- Cypress, tüm otomasyon sürecini baştan sona kontrol eder ve böylelikle tarayıcıda ve tarayıcı dışında olan her şeyi anlayabilen eşsiz bir konuma ulaşır. Bu, Cypress’ in diğer tüm test araçlarından daha tutarlı sonuçlar verebileceği anlamına gelir!
- Cypress makinemize local olarak kurulduğu için işletim sistemine de otomasyon görevleri için girebiliriz. Bu da ekran görüntüsü alma, video kaydetme, dosya işlemleri gibi işlemleri gerçekleştirmeyi mümkün kılar.
Daha detaylı bilgi için link yardımcı olacaktır.
Cypress’te testlerimizi yazmak gerçekten çok daha kolay!
Örnek bir test senaryosu ile neden “çok daha kolay” dediğimi sizler de anlayacaksınız :)
Login test senaryomuz:
- Arabam.com sitesine git (1)
- Giriş yap tıkla (2)
- Kullanıcı adı ve parolası gir (3)
- Giriş yap butonuna tıkla (4)
- Kullanıcı girişi yapıldığını gör (5)
Senaryomuzun ekran görüntülerine kısaca göz atacak olursak :
Test senaryomuzu gerçekleştirmeden önce Cypress ile test yazımı nasıl olur ilk olarak onu inceleyelim. Aşağıdaki resimde, test senaryomuzun iskeleti bulunmaktadır.
Cypress, Mocha’nın syntaxını benimsemiştir ve bu sebeple describe(), context(), it(), before(), beforeEach(),afterEach(), after(), .only(), .skip() kullanılarak testlerimizi geliştirebiliriz.
describe() ve context() birbiri ile eşdeğerdir. Testimizin ne gibi bir aksiyon aldığını anlamamız için burada belirtiriz. Amacımız, testimizi ne için yaptık, hangi aşamadayız sorularına birer cevap oluşturmak gibi düşünebiliriz. Örneğin bir login senaryosunu düşünelim. Login testimizin içinde farklı farklı durumlar olabilir. Burada describe içerisine Login testleri yazarsak, bunun “Login Test”leri için yapıldığını anlatmış olacağız. Peki ya farklı caselerimizi düşünürsek bunlar neler olabilir? Bir kaçına örnek verecek olursak :
- Kullanıcı adı ve şifre boş
- Doğru kullanıcı adı, yanlış şifre
- Yanlış kullanıcı adı ve şifre
- Doğru kullanıcı adı ve doğru şifre
İşte burada örnek olarak listelediğimiz çeşitli caselerimiz de bizim context olarak adlandırdığımız kısım gibi düşünebiliriz.
Bizim örneğimize göre, describe(“Login Tests”, function(){…}) burada testimizin login senaryosunu içerdiğini belirtmektedir.
context(“Valid username/password”, function(){…}) ile ise yazacağımız iterasyonların doğru kullanıcı adı ve şifre girişi yapılarak ilerlediğini belirtmektedir.
it() kullanımı, bizim yukarıda belirttiğimiz her bir adımı içermektedir. Sırasıyla ilk başta yazmış olduğumuz test senaryomuzu adımlara bölersek;
- Arabam.com sitesine git →
it(“Visit arabam.com”, function(){…})- Giriş yap tıkla →
it(“Click Giriş Yap button”, function(){…})- Kullanıcı adı ve parolası gir →
it(“Type valid username/password”, function(){…})- Giriş yap butonuna tıkla →
it(“Click submit button”, function(){…})- Kullanıcı girişi yapıldığını gör →
it(“Check user logo”, function(){…})Eveeet, taslak olarak neyi nerede nasıl kullanacağımızı öğrendiğimize göre sıra geldi tam olarak senaryomuzun testini gerçekleştirmeye :)
cy, Cypress’in bir objesidir ve cy. ile kendisine ait olan komutları kullanabiliriz. Testimizi yazmak için de bu komutlardan yararlanacağız.
visit() metodu, herhangi bir url’e gitmek için kullanılır; bu sebeple içerisine yönlenmek istediğimiz url’i yazıyoruz.
get() metodu, içerisine yazdığımız selektör ile DOM içerisinde element bulmaya yarar. Eğer İçerisine yazdığımız selektörü ifade eden element, DOM içerisinde bulunamazsa, testimiz hata verecektir. get() içerisine ulaşmak istediğimiz elementin css’i yazılır. Örnekte de görmüş olduğumuz gibi, Giriş Yap linkinin css’ini get() içerisine yazdık ve click() metodu ile tıklama işlemini gerçekleştirdik. Burada ilk önce ‘giriş yap ’linkini bulma ve daha sonra tıklama işlemi gerçekleşmesi için chain(zincirleme) metod kullanmış olduk.
type() metodu, bizim text alanlarına metin girmemiz için yardımcı olur. Yukarıdaki iterasyonda, ilk önce email gireceğimiz textbox bulunur ve bu alana email yazılır. Aynı işlem şifre alanı için tekrar eder.
contains() metodu ile submit butonları içerisinden metni “Giriş Yap” olan butonu buluyoruz. Yani contains() metodu, içine aldığı string ifadeyi, get() ile bulduğumuz element/elementler içinde arar ve metni bulduğumuz elementi seçer.
should() metodu bir onay metodur. İçerisindeki onay durumu tekrar tekrar denenir ve sonuç olarak testimiz ya geçer ya da time out olur ve hataya düşer. Kullanıcı giriş yaptığı zaman, headerda kullanıcı ad ve soyad baş harflerini içeren profil ikonu oluşur. Bu iterasyonda da amaç, giriş işlemi sonrası profil ikonunun kullanıcıya görünürlüğünü kontrol etmek. Bu sebeple should(“visible”) diyerek, profil ikonunun görünürlüğünü kontrol ediyoruz.
Tüm iterasyonlarımızı tamamladığımıza göre kodumuzun son hali şimdi karşımızda!
Testimizi çalıştırdığımız zaman aşağıdaki gibi bir ekran karşımıza çıkacaktır :
Yukarıdaki ekranda 5 tane test adımımızın olduğunu ve bu 5 adımın da başarı ile tamamlandığını görüyoruz. Pass/fail göstergesinin yanında testimizin süresi de görülmektedir.
Peki ya testimiz hata verseydi??? Örneğin, giriş yap tıklama aşamasında get() içerisine yanlış bir css yazdım ve bakın sonuç ne oldu.
Resimde de gördüğümüz gibi Cypress bize hatayı nerede, hangi adımda aldığını kolaylıkla gösteriyor. Hem hata alan adımımız kırmızı olarak işaretleniyor hem de hatanın ne olduğu net şekilde gösteriliyor.
Bu yazıda sizlere Cypress’i tanıtmak ve basit bir örnek ile testlerimizi otomatize etmenin düşünüldüğü kadar zor olmadığını göstermek istedim, umarım başarılı da olmuşumdur :)
İlerleyen yazılarda daha farklı örneklerle görüşmek üzere :)
Pınar
