Cypress İpuçları #3: Custom Command Tanımlamak
Cypress serisindeki bir önceki yazı: Cypress İpuçları #2: Iframe ile Çalışmak
Bir önceki yazıda, Cypress ile yazılan test senaryonlarında “custom command” kullanılabileceğinden bahsetmiş fakat detayına girememiştim. Bu yazıda çok kısa bir şekilde custom command’a neden ihtiyacımız olabileceğinden ve nasıl tanımlayabileceğimizden bahsedeceğim.
Motivasyon
Cypress’in get(), url(), contains() gibi yerleşik tüm yardımcı metotları cy nesnesinde yer alıyor ve test senaryoları içerisinde cy.get() şeklinde nesne notasyonunda kullanılıyor. Cypress’in sunduğu custom command API’ı ile cy nesnesine kendi metotlarımızı ekleyebiliyoruz. Bu sayede hem senaryolar içerisinde tekrar tekrar başvurmamız gereken metotları, Cypress’in yerleşik metotlarının konforunda kullanabiliyoruz hem de okunabilirlik açısından bütünlük sağlamış oluyoruz.
Yeni Command Tanımlamak
Örnek olması açısından yeni bir command oluşturalım. Bilindiği üzere cy.get() metodunu sayfalardaki DOM bileşenlerini seçmek için kullanıyoruz. Hâlihazırda bir butonu aşağıdaki gibi birçok farklı yöntemle seçebiliriz.
Tüm yöntemlerin kendi içerisinde avantajları ve dezavantajları olmasına rağmen, Cypress dokümanları best practice olarak test senaryoları için ayrılmış özel bir attribute kullanmayı öneriyor. Bunun en büyük nedeni, id, class gibi CSS seçicilerinin geliştirme sürecinde değişime fazla açık olması. Test için ayrılmış özel bir attribute kullanmak, uygulama arayüzünün tasarımı değişse de test senaryolarının değişikliğe ihtiyaç duymadan hayatına devam edebilmesini sağlıyor.
Üstteki seçici karmaşasından sonra ekip olarak data-test isminde bir attribute kullanmaya karar verdik diyelim. Bunu eğer Cypress’in varsayılan get() metoduyla yapmaya kalkarsak her defasında cy.get("[data-test]='submitForm'") şeklinde uzun uzadıya yazmak zorunda kalacağız. Bu belki birkaç seçicinin olduğu kısa test senaryolarında dikkate değer görülmeyebilir ama karmaşık ve uzun senaryolarda can sıkıcı olmaya başlayacaktır. Bunun yerine kendimize özel getByAttr() isminde bir metot tanımlayabilir ve bu kod tekrarlarından kurtulabiliriz.
Yine best practice olarak support dizini altındaki index.js dosyasında veya ona import edilmiş farklı bir dosyada custom command tanımlayabiliriz.
Üstteki command, çok basit bir şekilde Cypress’in yerleşik get() metodunu kullanım senaryomuza göre zenginleştirmiş oldu. Artık bizden yalnızca attribute değerini argüman olarak bekleyen, test senaryolarında doğrudan kullanılmaya hazır getByAttr() isminde bir seçicimiz var.
Sonuç
Üstteki örnek elbette oldukça basit. Sık kullanılan API istekleri, senaryolarda tekrar eden bloklar, her test öncesinde veya sonrasında çalıştırılmak zorunda olunan operasyonlar bu kapsamda değerlendirilerek custom command hâline getirilebilirler kolayca.
Kaynaklar
Cypress serisindeki bir sonraki yazı: Cypress İpuçları #4: HTTP İstekleri Yapmak
