React Testing

Cypress gibi bir E2E Test Aracı Kullanma Nedenleri

Henüz Cypress kullanmaya yeni başlasamda neden bu tarz bir test aracına ihtiyaç duyduğumu bu aşamada anlatmaya çalışacağım. İlerleyen yazılarda daha teknik konularıda anlatmaya çalışacağım.

React Digital Garden (Dijital Bahçem) üzerinde bir çok örnek proje geliştirmeye çalışıyorum. 4 ay gibi bir süre 64 tane örnek uygulayı bu dijital bahçeye dahil etmişim. Bu sayı giderek artıyor ve bu uygulamaları geliştirirken ki temel amaçlarımdan bir tanesi kodların reusable (tekrar kullanılabilir) ve modüler olması.

Bu da her ufak uygulama geliştirdiğimde temel kod yapısında bazı değişiklikler ve güncellemeleri beraberinde getiriyor. Bu güncellemelerden doğan bir takım aksaklık ve sorunlar olmaya başladı.

Uygulama Pathlerindeki Güncellemeler

Bazen oluşturduğum yeni örnekler nedeniyle, uygulama url (pathlerinde) bir takım güncellemeler yapıyorum. Bu durumda bazı linklerin kırıldığı ve olmayan sayfalara yönlendirildiğini farkettim.

Bu durumu test edebilecek en iyi yöntemlerden bir tanesi, ilgili sayfaları ziyaret eden otomatik kodlar yazmak. Aşağıdaki gibi her sayfa için ziyaret kodu yazdığımızda eğer ilgili sayfalarda eksiklik olursa hata alacaktır ve bu sayede kırılmış linkleri bulabiliriz.

cy.visit('/simple-calculator');

Test Etmesi Uzun Zaman Alan Senaryoların Otomatikleştirilmesi

Zaten E2E Testinin amacı bu. Yani sizin altyapısal değişiklikleriniz ne olursa olsun, çalışan senaryolarınızın değişmemesi.

Benim de özellikle altyapıyı iyileştirmek için refactor işlemleri gerçekleştiriyorum. Sonra sürekli aynı senaryoları tekrar tekrar manual koşmam gerekiyor ve çok zaman alıyor.

Bildiğiniz gibi hep aynı yaptığınız işlemleri / adımlara sahip aksiyonları otomatikleştirmek günümüz araçları ile oldukça kolaydır.

Düğmelere erişim için üzerlerinde yazan metinleri kullanabilirsiniz.

cy.findByText('elements').click();

Veya bu şekilde erişemiyorsanız. Label üzerinden veya aria-label (aria-*) ataması yaparak elemanlar üzerinden örneğin aşağıdaki input nesnesini seçip bunun içerisine istediğiniz metni elle yazıyor gibi atayabilirsiniz.

cy.findByLabelText('Element Title').type('Il sec');

Bazı durumlarda aynı elemanlardan ekranda 2,3 tane olabilir . Bu durumda aynı elemanlara Id verdiğimiz gibi data-testId vererek, bu id üzerinden erişim sağlayabilirsiniz.

cy.findByTestId(getCompId(moduleId, 'counter', 'inc')).click();

Bu pek önerilen bir yöntem olmasada bazı yerlerde ihtiyaç duyabilirsiniz. Bu tarz bir kullanımdan neden kaçınmanız gerektiği konusunda aşağıdaki yazıyı okuyabilirsiniz.

Why You Should Avoid Testing React Components With Test IDs

And how to test them instead

betterprogramming.pub

Ben aslında bu kısımda çok teknikler üzerinde durmak istemesemde, Cypress çok faydalı bir özelliği olan Element seçim özelliği ile istediğiniz elemanı seçerek bu elemanı path kopyala özelliği ile kodunuzun içerisinde kullanabilirsiniz.

Bu elemanları seçince aynı CSS selector gibi Cypress size bir selection path oluşturur. Dropdown aria-label ataması yapamadığım için aşağıdaki şekilde de istediğiniz elemana erişip click etkileşimini gerçekleştirebilirsiniz.

cy.get(':nth-child(1) > .p-dropdown > .p-dropdown-label').click();

Sonuç olarak tüm bunları yapmamızdaki neden. Altyapıda yaptığımız değişiklikler sonrasında genel çalışma şeklimizin değişmediğini garantilemek.

Cypress testleri yazarken hoşuma giden noktalar

E2E Testinin kodunu JavaScript ile geliştirebiliyor olmamız
Command kısmı ile yeni cy komutları oluşturup ortak yapılan işlemleri soyutlayıp daha kolay çağırma
Çalıştırırken istediğin adımın üzerine giderek kodun o noktadaki durumunu ekranda görüntülemek
Testing Library gibi araçlar ile Cypress entegre edip daha etkin bir şekilde bu aracı kullanmak.
Bir yandan testlerinizi yazarken, bazende ihtiyaç duyduğunuz pointer/identifier gibi yapıları uygulamanızın içerisine ekleyerek hem development kısmını , hemde test kısmını birlikte geliştirmek
Uygulamanız Chrome, Firefox, Edge gibi ortamlarda ayağa kaldırıldığı için bu tarayıcıların Developer Console özelliklerinden faydalanıp kodun istediğiniz noktasına debugger veya breakpoint koyarak kodunuzu detaylı sorgulayabilirsiniz.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.