Test Otomasyonu ile Görsel Test (UI Layout Testing) Nasıl Yapabiliriz ?

Merhaba,

Testlerimizi yazarken genel olarak fonksiyonel testler ile ilerleriz ancak yapılan bir geliştirme fonksiyonel anlamda bir sıkıntıya yol açmanın yanı sıra görsel olarak da kaymalara, bozulmalara sebep olabilir. Bu durumda bizim fonksiyon olarak kontrolümüz doğru çalışır ve bu ekranda oluşan hatayı mevcut testimiz ile yakalayamayız.

Örneğin, mevcut bir login testimiz olsun. Yeni yapılmış bir geliştirmenin, login sayfasında bulunan submit butonunun küçülmesine sebep olduğunu düşünelim. Bu durumda giriş yapma testimiz başarılı sonuçlanacaktır çünkü olması gereken buton aslında var ve bizim bu butona tıklama işlemimiz gerçekleşecek. Sorun ise butonun olması gereken boyutta olmaması.

Olması gereken login sayfası

Giriş yap butonunda görsel hata

Bu tarz hataları yakalayabilmemiz için görsel testlere ihtiyaç duyarız. Siz de görsel testler yazmak isterseniz, yardımcı olacağını düşündüğüm Galen Framework’ten bahsetmek ve ufak bir örnek göstermek istiyorum.

Galen Framework Neler Sağlar?

• Galen, layout testleri için kullandığımız, açık kaynak kodlu bir frameworktür.
• Selenium Grid ile çalışabilir.
• Paralel test çalışmasını destekler; eş zamanlı test koşumu ile zaman tasarrufu yapmamızı sağlar.
• Farklı browser ebatlarına göre testlerimizi gerçekleştirmek mümkündür bu sebeple responsive design testleri de galen ile oldukça kolaydır. Galen browserı açar, belirlediğimiz ölçülere göre resize eder ve testleri başlatır.
• Galen’ın oldukça okunaklı bir syntaxı olan kendine özgü DSL(Domain Specific Language)’i vardır. Spec dosyalarımızda da bunu kullanarak elemanlarımızın lokasyonlarını, ölçülerini vs. belirleriz.
• Testlerimizin sonunda bize detaylı html raporu sunar. Rapor içinde test için belirlemiş olduğumuz tüm objeleri görebiliriz. Yanlış olan objeyi vurgular ve böylece hatamızı bulmak kolaylaşır.
• Galen framework ile sayfanın görsel karşılaştırmasını da yapabiliriz. Belirlemiş olduğumuz hata oranına göre beklenen ve mevcutta olan ekran görüntülerini ve mappinglerini bize sunar.

Bu kadar anlattıktan sonra bir de örnek yapalım :)

Java & Selenium WebDriver & Galen

Öncelikle bir maven projesi oluşturup pom.xml’e galen framework için gerekli olan dependency eklemeliyiz.

<dependency>
    <groupId>com.galenframework</groupId>
    <artifactId>galen-java-support</artifactId>
    <version>2.4.4</version>
</dependency>

Ve /src/test/resources altına bir specs klasörü açarak layout kontrolleri için spec dosyamızı yazacağız.

Projemizin yapısı şu şekilde olacak:

örnek proje

Testimizde, sahibinden.com sitesinin giriş sayfasına gideceğiz ve giriş sayfasının görsel testini yapacağız.

checkLayout() metodu ile görsel testimizi yapmaktayız.

Layout testlerini gerçekleştirmek için LayoutReport classını kulanmamız gerekli. Galen.checkLayout(p1,p2,p3) fonksiyonu 3 adet parametre alır. Bu parametreler sırasıyla, driver instance, spec dosyamız ve tagdır.

Testimizin sonunda oluşacak html raporlarının target altında galen-html-reports isimli klasörde olmasını istiyoruz.

Bunun için :

new HtmlReportBuilder().build(tests, "target/galen-html-reports");

Testimiz çalıştığı zaman şu şekilde bir görüntü olacak :

test sonrası raporun lokasyonu

Her şey tamam, ancak testin kontrol edeceği spec dosyamızın içini doldurmalıyız. Şimdi sıra onda 🧐👉

Önceden de bahsettiğim gibi Galen’ın kendine özgü bir DSL’i var.

Burada örnek içerisinde bir kaç özellikten bahsedeceğim ancak daha detaylı bilgi için burayı ziyaret edebilirsiniz.

login sayfası

loginPage.spec dosyamızın içine gelelim :

loginPage.spec

Şimdi spec dosyamızın içinde neler olduğuna bakalım.

spec dosyamızda ilk önce web elementlerimizi tanımlamalıyız. Bunun için css, xpath, id kullanabiliriz.

@objects

Web elementlerimizi tanımlamak için kullanılır.

@on desktop

Layout spec lerimiz desktop,mobile, tablet olmasına göre değişebilir. Bunu tag ile yönetebilmemiz için @on desktop ya da @on mobile ile spec fileda belirttiğimiz özelliklerin hangi tagde kullanılacağını belirtiriz. Kontrol işlemlerimiz @on ifademizden sonra başlar. Farklı tagler tek bir spec dosyası içinde de kullanılabilir.

Hangi tag geldiğini önemsemeden kontrollerimizi yapmak için ise @on * kullanabiliriz.

Ayrıca çoklu tag kullanmak istediğimiz zaman bunları “,” ile ayırarak da kullanabiliriz.

Spec file içinde sectionlar kullanılır. Sectionlar = xxx = ifadesi ile oluşturulur. Örneğin = Login Page Layout = ifadesi bir sectiondır. Sectionlar kodumuzun daha okunabilir olmasına yardımcı olur. Bir spec dosyasında birden fazla section kullanabiliriz.

LoginPage.spec file içinde aşağıdaki gibi ifadeler kullandım.

• aligned
• below
• above
• left-of
• inside
• text
• width
• height

Bunlardan kısaca bahsetmek gerekirse,

width ve height ifadeleri verilen elemanın ebatlarını tanımlamamız için kullanılır. Genişlik ve yükseklik belirtiriz.

width — height

Elemanlar birbiri ile yatayda, dikeyde ya da belli bir noktaya göre hizalı olabilirler. Bunları ifade etmek için aligned horizontally ya da aligned vertically kullanılır.

aligned horizontally all

aligned vertically left

Text ifadesi ile elemanın içerdiği metni kontrol edebiliriz.

Below — above ifadeleri elemanların alt üst ilişkisini belirtir.

logo ve login area arasındaki alt üst ilişkisi

loginArea:
    below logo 12px

Sağında, solunda gibi ifadeler kullanmak için ise left-of, right-of kullanırız.

loginArea:
    below logo 12px
    aligned horizontally all registerArea
    left-of registerArea 20px

Testimiz çalışınca bir html rapor oluşur. Bu rapora target/galen-html-reports klasörü içinden ulaşabileceğimizi belirtmiştim. Şimdi raporda bize neler gösteriliyor nasıl kontroller gerçekleştireceğiz onlara bakalım.

test sonuç raporu

Testimizin çalışması sonucu fail ettiği durumda html raporumuzda hata alan yer bize highlight edilir. Böylece kolaylıkla nerede yanlışlık olduğunu görebiliriz.

hatalı test raporu

Raporda tick ile işaretli yerler başarılı sonuç almışken kırmızı işaretli alan bizim spec dosyasında vermiş olduğumuz px değerinin hatalı olduğunu belirtiyor. Bu alana tıklayarak hatanın nasıl olduğunu da ekran görüntüsü ile görebilmekteyiz.

hatalı alan

hatalı kısmın ekran görüntüsü ve ölçüleri

Raporda bulunan Failure Map ile mapping durumunu da görebiliriz.

Testimizin başarılı gerçekleşmesi durumunda ise raporumuz şu şekilde görünecektir.

test başarılı

başarılı html rapor

Başka yazılarda görüşmek üzere!