Cypress Komutları ve Örnek Kullanımlar
Tekrar merhaba ! :)
Bir önceki yazımda sizlere Cypress nedir, biz neden Cypress kullanmayı tercih ettik, setup aşamaları nasıl olur ve bir proje nasıl oluşturulur, çıktıları nelerdir gibi bilgileri vermiştim.
Bu yazımda ise testlerimizi yazarken kullandığımız komutların bir kaçını örnekler ile anlatmaya çalışacağım.
Haydi başlayalım !
visit(url)
Visit, sayfa yüklemesi tamamlandıktan sonra bize bir window objesi döndürür. Bu komut ile yönlenmek istediğimiz url’e gidebiliriz. Örneğin Biz arabam.com sitesine gitmek istiyorsak:
cy.visit("www.arabam.com")ile ilgili sayfaya yönlenebiliriz.
get(selector)
get komutu ile verilen css’e ait DOM elementlerini elde ederiz.
Örnek : arabam.com sitesinde ‘ücretsiz ilan ver’ butonunu bulmak istiyorum.
cy.get(“#header-create-new-advert-button”)- id’si header-create-new-advert-buton olan elemanı ya da varsa birden fazla elemanı döndürür.
click()
click komutu DOM’da bulduğumuz bir elemana tıklama işlemi için kullanılır.
Örnek : Arabam kaç para linkine tıklamak istiyorum.
cy.get("a[href='/arabam-kac-para']").click()- click işlemini yapmadan önce, tıklanacak elemanı bulmalıyız ve bunun için elemanı get ile elde ederiz. Sonra tıklama işlemi gerçekleştirilir.
- get elemanı ile birden fazla eleman bulunması durumunda run anında bize hata mesajı görünecektir. Çünkü bulunan elemanlardan hangisine tıklayacağını belirtmedik.
Bu durumda, yapmamız gereken, tıklamak istediğimiz elemanın selektörünü daha spesifik hale getirmektir. Böylelikle eğer get ile sadece bir eleman bulursak zaten tıklayacağımız eleman da bulduğumuz eleman olacaktır.
Bir diğer yöntem ise, error içinde bize verilen çözümü kullanarak click({multiple:true}) şeklinde kullanmaktır ve böylelikle sayfada, verilen selektöre ait bulduğu tüm elemanlara sırayla tıklama işlemi gerçekleşecektir.
Ancak bizim örneğimizde multiple:true kullanmamıza rağmen hata almaya devam etmekteyiz. Çünkü bulunan 4 elemanın içerisinde display:none özelliği olan bazı elementler mevcut. Bu durumda aşağıdaki gibi yine hata ile karşılaşmaktayız.
DOM’da bir eleman var ancak display:none şeklinde ise bu durumda cypress hata mesajları ile yine bize yardımcı oluyor ve click({force:true}) ile bu hatayı çözebileceğimizi söylüyor. :)
Özetle, click({force:true}) tıklayacağımız elemanın actionable olup olmamasına bağlı olmadan tıklama işlemini yapabilmemizi sağlar.
Ben burada click işlemi yapacağım elemanın css ini daha spesifik olarak vererek DOM da tek eleman bulmayı seçtim :)
cy.get(".future-container a[href='/arabam-kac-para']").click()
type(text)
type komutu DOM’da bulduğumuz bir elemana text yazmak için kullanılır.
- type(text)
- type(text,options) şeklinde kullanımları mevcut.
Örnek : login sayfasında kullanıcı adı ve şifre yazma işlemi
type işlemi ile text yazarken default olarak run aşamasında log:true olarak çalışır böylece biz command log alanında type ile yazılan texti görürüz. Aşağıda verdiğim örnekte şifre alanında log:false yazarak aradaki farkı anlatmaya çalışacağım :)
cy.get(“[type=\”text\”]”).type(“pinar.ormeci@arabam.com”,{log:false})cy.get(“[type=\”password\”]”).type(“mypassword”)
click() eventinde olduğu gibi, type() eventinde de ilk önce işlem yapmak istediğimiz elementi DOM da bulmalı ve sonra type edilecek texti yazmalıyız.
type() ile klavyeden bir butona basma işlemini de gerçekleştirebiliriz.
Örneğin, login sayfasında email ve şifre giriş işlemi sonrasında giriş yap butonuna tıklamak yerine giriş yap butonunda Enter a tıklamak için :
cy.get(‘selector’).type(‘{enter}’) ile keyboard etkileşimini gerçekleştirebiliriz.
clear()
clear(), isminden de tahmin edileceği gibi ilgili alandaki metni silmemizi sağlar.
Burada yazmış olduğumuz password alanını clear() ile silmiş olduk.
cy.get(“[type=\”text\”]”).type(“pinar.ormeci@arabam.com”).clear()Text alanını ilk önce temizleyip daha sonra metin yazmak için :
cy.get('textarea').clear().type('Cypress testing')focus()
focus(), DOM içinde verilen bir elemana odaklanmak için kullanılır. Örneğin, login sayfasındayım ve sayfa açıldığı zaman ilk önce password alanına veri girişi yapmak daha sonra kullanıcı adı alanına veri girişi yapmak istiyorum. Bu durumda ben sayfayı açınca ilk önce password alanına focuslamalıyım.
Bunun için :
cy.get("[type=\"password\"]").focus().type("mypassword")şeklinde kullanırsam sayfayı açınca direkt password alanına imlecim focuslanır ve type() ile metnimi yazabilirim.
cy.focused()
O an focus olmuş DOM elementini bu şekilde bulabiliriz.
Örnek : Facebook login sayfasında, sayfa açılır açılmaz Adın metin alanı focuslu şekilde geliyor. Biz de cy.focused() kullanarak, ek bir get(selector) kullanmadan bu alana yazma işlemini aşağıdaki gibi yapabiliriz.
cy.focused().type("pinar")
closest()
.closest(selector)
.closest(selector, options) şeklinde kullanımları mevcut.
cy.get("a").closest(".shortcut-item")Burada amacımız, sayfada “a” etiketine sahip, class ı “shortcut-item” olan en yakın elemanları bulmak. Sayfa açılınca ilk olarak bulduğu 4 elemanı aşağıda görüyoruz.
first()
DOM’ da, get(selector) ile elde ettiğimiz elemanlardan ilkini seçmemizi sağlar.
Yukarıdaki örnekte 4 tane eleman bulmuştuk. Eğer click() yapmak istersek, hata ile karşılaşacağız ve birden çok eleman olduğu için bizden {multiple:true} yapmamızı isteyecek. Bu örneğimizi şu şekilde yazarsak :
cy.get("a").closest(".shortcut-item").first().click()Arabam kaç para linkine tıklama işlemini gerçekleştirebiliriz.
contains()
DOM içerisinde aynı css ile birden çok eleman bulabiliriz. Böyle bir durumda istediğimiz elemanı ayırt etmemizi sağlayan bir text var ise işimiz daha kolay olabilir.
Yine bir önceki örneğimiz ile devam edecek olursak, anasayfada ilgili sayfalara hızlı şekilde ilerlememizi sağlayan 4 adet alan var ve ben Tramer Hasar Sorgusu alanını tıklamak istiyorum. Bulmuş olduğumuz css(“.shortcut-item strong”) ile 4 eleman bulduk ve first() kullanarak Tramer alanına gidemeyiz. Peki ya şimdi nasıl istediğimiz elemanı tıklayacağız? Bu durumda devreye contains() metodunu sokarak ilgili elemanı içerdiği text ile kolaylıkla bulabiliriz.
Tıklanmak istenen alan Tramer Hasar Sorgusu ise bunu aşağıdaki şekilde gerçekleştirebiliriz :
cy.get("a").closest(".shortcut-item").contains('Tramer Hasar Sorgusu').click()Burada bulmuş olduğumuz 4 adet elemanı içerdiği text ile ayırt etmiş oluyoruz.
parent()
parent() metodu ile vermiş olduğumuz selektörün kapsayıcısı olan bir üst elemanı bulabiliriz.
Örneğin anasayfada bulunan 0 km araçlar elemanını cy.get(“#new-car”) ile bulabiliriz.
cy.get(“#new-car”).parent()dersek, 0 km araçlar alanının bir üst kapsayıcısını seçmiş oluruz.
check()
check, checkbox ve radio butonlarda kullanılır. check() için çeşitli kullanım biçimleri mevcut. Bunlardan bazılarına bir kaç örnek yapalım:
Örnek site olarak http://demo.guru99.com/test/radio.html kullanacağız.
cy.get(“input[type='checkbox']”).check()Burada, check() içerisinde herhangi bir kısıtlama belirtmedik. Bu sebeple DOM üzerinde bulunan tüm checkbox lar işaretlenmiş oldu.
Ancak, kullanıcı olarak her zaman sayfada bulduğumuz tüm checkboxları işaretlemek istemeyebiliriz. Bu durumda hangilerinin işaretleneceğini belirtmemiz gerekli. Bunun için value değerlerini kullanmamız gerekli.
Sadece checkbox1 işaretlenmek istenirse,
cy.get(“input[type='checkbox']”).check('checkbox1')
Eğer birden çok checkbox işaretlenmek istenirse, örneğin checkbox1 ve checkbox3; bu durumda bu iki seçimin value değerlerini check() içerisine göndermemiz gerekli.
cy.get(“input[type='checkbox']”).check(['checkbox1','checkbox3'])
Aynı durum radio buton için de kullanılabilir.
cy.get("input[type='radio']").check('Option 1')
find(selector)
find metodu ile, belirtilen css e ait eleman, DOM içerisinde get ile bulunmuş elemanın içerisinde aranır. Tanım olarak anlatmaya çalışırken biraz karışık olduğunun farkındayım, örnek ile daha anlaşılır olacak :)
Sol tarafta gördüğümüz kutunun css i “.categories-container” . Bu elemanı biz daha önce öğrendiğimiz gibi cy.get(“.categories-container”) şeklinde bulabiliriz. Peki, bu elemanın içinde olan <ul> etiketine sahip elemanları bulmak istersem ne yapmalıyım ? İşte tam da burada find() devreye giriyor.
cy.get(".categories-container").find("ul")
Inspect modunda gördüğümüz gibi, burada find() ile 2 tane <ul> etiketine sahip elemanın olduğunu görebiliyoruz.
dblclick()
dblclick(), bir butona çift tıklama işlemi yapmak istediğimiz zaman kullanacağımız bir metoddur. Örnek site olarak http://demo.guru99.com/test/simple_context_menu.html kullanacağız.
Butona çift tıklama işlemi yaparak bir uyarı mesajı göreceğiz. Bunun için :
cy.get("button").dblclick()
reload()
Sayfanın yeniden yüklenmesini sağlar. Aşağıdaki örnekte, visit ile url’e yönlenir. Daha sonra sayfayı yeniden yükler.
cy.visit("https://www.arabam.com/")
cy.reload()should()
should, assertionlar için kullanılır. Örneğin, bir elemanın disable olup olmaması, görünür olup olmaması, spesifik bir attribute nun kontrolü gibi durumlarda kullanılır. Bu örnekler çoğaltılabilir.
Bir kaç ufak örnek ile devam edelim :)
Sayfa ziyaret edilince Ücretsiz İlan Ver butonunun görünürlüğünü kontrol etmek istersek :
cy.get("#header-create-new-advert-button").should('be.visible')
Ücretsiz İlan Ver butonunun class kontrolü:
cy.get('#header-create-new-advert-button').should('have.class', 'btn btn-yellow2018 getAdvertBtn')
Trink sat sayfasında bulunan marka dropdown unun seçili olmaması kontrolü :
cy.get("#brands").should('not.be.selected')
url()
cy.url() ile o anki mevcut url’i elde ederiz. Örneğin bir butonu tıkladık ve başka bir sayfaya yönlenme gerçekleşti. İlgili sayfanın url’inin kontrolünü gerçekleştirmek istersek cy.url() ile mevcut url i elde ederek kontrolümüzü sağlayabiliriz.
Senaryo : arabam.com anasayfasından arabam kaç para linkine tıkladık ve sayfanın doğru url’e gidip gitmediğini kontrol etmek istiyoruz :
cy.get("a").closest(".shortcut-item").first().click()cy.url().should('include', '/arabam-kac-para')
and()
and()’ de should() gibi assertionlar için kullanılır ve birbiri ardına eklemeler ile devam edilerek kullanılabilir.
Yukarıdaki örnekte, ücretsiz ilan ver butonunun classını ve visibility özelliğini kontrol etmiştik. Bunu iki işlemi zincirleme kullanarak da kontrol edebiliriz.
cy.get("#header-create-new-advert-button").should('be.visible').and('have.class', 'btn btn-yellow2018 getAdvertBtn')
Tabi ki cypress komutları bunlarla sınırlı değil:) Bu yazıda örnek olması açısından bir kaçından bahsetmek istedim, ancak daha fazla komut ve kullanım detaylarına buradan ulaşabilirsiniz.
Tekrar görüşmek üzere! :)
Pınar
