Gauge ve Taiko İle Test Otomasyonunda Karşılaşılan Durumlar ve Çözüm Yöntemleri
Gauge Nedir?
Gauge framework’ü ThoughtWorks yaratıcıları tarafından yayınlanan, tercih ettiğiniz diller ile okunabilir ve sürdürülebilir testler oluşturmak için kullanılan bir otomasyon aracıdır. BDD(Behavior Driven Development) formatında testlerin yazılmasını sağlar. BDD, bir sistemin davranışını, bu davranışın nasıl geliştirildiğine dair ayrıntılara yer vermeden tanımlamanıza izin veren bir dildir. Gauge ile yazılan test adımlarını farklı kişiler okuyup anlayabilir ve yorum yapılabilir.
Gauge kurulum adımları için linkten kurulumu yapabilirsiniz. Daha detaylı bilgi edinmek için gauge dökümantasyon sayfasına linkten ulaşabilirsiniz.
Durumlar ve Çözümleri
Projede karşılaştığımız ve otomasyon sırasında yardımcı olabileceğini düşündüğümüz konular hakkında bilgi vermek için aşağıdaki makaleyi paylaşıyoruz.
1. Ortam Bazlı Environment Yapısının Oluşturulması
Proje çalıştırılırken bazı değerlerin ortam bazlı değiştirilmesi gerekebilir. Geliştirdiğimiz uygulamaların farklı ortamlar için farklı parametrik değerlere ihtiyacı vardır. Bu parametrik değerler gauge projesinde env klasörü altında bulunan dosyalarda yer alır.
Örnek olarak bir excel dosyasının yüklenmesi gerektiği durumda , dosya yolu projenin oluşturulduğu bilgisayarda aranmaktadır. Bu excel dosyasının içeriği de ortam bazlı değişebilir. Bu sebeple dosya yolunun her ortamdan farklı parametreler ile çağrılabilir olması gerekir. Tanımlamalar js.properties içinde belirlenmelidir.
- js.properties için örnek dosya içeriği aşağıdaki gibidir.
- js.properties dosyasında yukarıdaki gibi tanımlanan dosya yolu (BASE_FILE_PATH ) için çalıştırdığımız step kod aşağıdaki gibi olmalıdır.
Oluşturulan test adımlarının ortam bazlı çalıştırılması için terminalden aşağıdaki komut çalıştırılır.
gauge run --env live specs 2 . Chromium Ekran Boyutunun Değiştirilmesi
Taiko kütüphanesinde test için açılan Chromium browser ekran boyutunun değiştirilmesi aşağıdaki gibidir.
step_implementation.js içerisine aşağıdaki kod bloğu eklenir.
beforeSuite(async () => {await openBrowser({ headless: headless,args:[“ — window-size=1440,900”]},{navigationTimeout:120000})});
Full screen :
beforeSuite(async () => {await openBrowser({ headless: headless,args:[“ — start-fullscreen”]})});
3.Test Adımlarında Bekleme Süresinin Eklenmesi
Client bazlı sayfa yüklenirken, network veya sayfanın geç yüklenmesi nedeniyle bazı elementler bulunamaz. Web sayfaları çizim halinde iken taiko sayfadaki elementi tespit edemez bu nedenle testin sonucu başarısız olur.
Sayfanın yüklenme hızına göre ortalama bir bekleme süresi eklenerek elementin bulunması sağlanabilir. Aşağıdaki gibi örnek kod parçası eklenerek sorun giderilir.
- Concept içinde(.cpt uzantılı dosya) yazılan test adımı da aşağıdaki gibi olmalıdır.
- Taiko kütüphanesinde WaitFor fonksiyonunu kullanmak için çalıştırdığımız kod aşağıdaki gibi olmalıdır.
4. Hidden Tipinde Elementin Bulunması(Upload işleminde)
Html ”hidden” elementini test adımlarımızda kullanmak isterken taiko tarafından element bulunamadı hatası alınmaktadır.
Hata Mesajı:
( FileField[id=”uploadFile”]is not visible”).Örnek Html Kodu:
<input type=”file” id=”uploadFile” name=”uploadFile” class=”hide”>Bu durumda yazılması gereken test adımında {force:true} kod bloğu aşağıdaki gibi eklenmelidir.
5. Html “a” Elementinin Taiko Kütüphanesinde Bulunması ve İşlem Yapılması
Html “a” elementi taiko kütüphanelerinde bir buton olarak tanımlanmamaktadır. Bu nedenle klasik bir butona tıklama eventi çalışmamaktadır. “a” elementini içeren html kodu ve elementin bulunması için yazılan .js dosyasındaki step aşağıdaki gibidir.
Örnek Html Kodu:
<a id=”exportCard” onclick=”exportAllCards()” >Tüm Kartları İndir</a>Örnek step:
6.Radio Tipindeki Elementin Seçilmesi
Html içeriğinde generic olarak listelenen radio elementleri olduğunu varsayalım.Bu listeye yeni bir element eklendiğinde ya da çıkarıldığında radio elementlere ait içerikler (id,name,value…) değişmektedir. İçeriklerin değişmesi test adımlarında seçimi değiştirmemelidir bu nedenle id bazlı arama yerine metinsel olarak arama işlemi yapılmalıdır.
Örnek html içeriğinde radio tipindeki elementin metin bazlı seçimin yapılması için, step ve concept örneği aşağıdaki gibi olmalıdır.
Örnek Html Kodu:
- Concept içinde(.cpt uzantılı dosya) yazılan test adımı da aşağıdaki gibi olmalıdır.
# Müşteri seçimi yapılır.* “Kart Oluştur” için “/Card/CreateCard” linki tıklanır.* “Müşteri 2” seçimi yapılır.* “Seç” tıklanır. “Müşterinin ekranı açıldı”
Taiko kütüphanesinin radio elementini bulmak için çalıştırdığımız kod aşağıdaki gibi olmalıdır.
step(“<label> seçimi yapılır.”, async (label) => {await taiko.radioButton(label).select();});
7.Dropdown Tipindeki Elementin Seçilmesi
Html içeriğinde dropdown tipindeki elementin “value” değerine göre seçim yapılması için, step ve concept örneği aşağıdaki gibi olmalıdır.
Örnek HTML Kodu:
- Taiko kütüphanesinin dropdown elementini bulmak için çalıştırdığımız kod aşağıdaki gibi olmalıdır.
step(“<element> değeri <value> içeren seçim yapılır <description>”, async (element, value) => {var elementInfo = common.getElementInfo(element);var parameter = common.getElement(element)var dropDown = taiko.dropDown(parameter);await dropDown.select(value);})
- Concept içinde(.cpt uzantılı dosya) yazılan test adımı da aşağıdaki gibi olmalıdır.
# Kart işlemleri gerçekleşir.* “Kart Oluştur” için “/Card/CreateCard” linki tıklanır.* “Sube” alanından “Sube 2” seçimi yapılır. “Sube seçildi”* “Teslimat Subesi” alanından “Sube 1” seçimi yapılır. “Teslimat için sube seçildi”* “Kart Oluştur” tıklanır. “Kart oluşturma işlemi başarılıdır.”
8.Checkbox Tipindeki Elementin Seçilmesi
Html içeriğinde generic olarak listelenen bir checkbox elementleri olduğunu varsayalım. Bu listeye yeni bir element eklendiğinde ya da çıkarıldığında checkbox elementlere ait içerikler (id,name,value…) değişmektedir. İçeriklerin değişmesi test adımlarında da seçimi değiştirmemelidir bu nedenle id bazlı arama yerine metinsel olarak arama işlemi yapılmalıdır.
Html elementi checkbox tipi ve isim bazlı seçim yapılması için step ve concept örneği aşağıdaki gibi olmalıdır.
Örnek HTML Kodu:
- Concept içinde(.cpt uzantılı dosya) yazılan test adımı da aşağıdaki gibi olmalıdır.
# Sipariş sepete ekleme* “Sipariş” tıklanır. “Sipariş Oluştur ekranı açıldı”* “Ürün 2” için seçim yapılır. “Ürün seçimi yapıldı”* “Ürün 1” için seçim yapılır. “Ürün seçimi yapıldı”* “Sepete Ekle” tıklanır. “Sipariş sepete eklendi”
- Taiko kütüphanesinin checkbox elementini bulmak için çalıştırdığımız kod aşağıdaki gibi olmalıdır.
step(“<element> için seçim yapılır. <description>”, async (element) => {var checkBox = taiko.checkBox(common.getElement(element))await taiko.evaluate(checkBox, (elem) => elem.click(),{force: true})})
Gauge+ Taiko ile ilk defa çalışmaya başlayan ve test otomasyonunda başarılı projeler çıkarmak isteyen herkese faydalı olacağını düşünüyoruz. Daha sonra farklı deneyimleri paylaşmak dileğiyle…
Bu makale Bayram Eser ile birlikte hazırlanmıştır.
Referanslar
