Cypress İpuçları #5: Chrome DevTools Recorder ile Test Senaryoları Oluşturmak
Cypress serisindeki bir önceki yazı: Cypress İpuçları #4: HTTP İstekleri Yapmak
Recorder
Google Chrome, kullanıcıların, web sayfaları üzerindeki etkileşimlerini kaydetmelerini ve daha sonra bu kayıtlar üzerinden performans ölçümleri yapmalarını sağlayan aracı Recorder’ı geçtiğimiz aylarda DevTools’a eklemişti. Bu araç sayesinde spesifik senaryolar özelindeki akışların render performanslarını incelemek ve gerekiyorsa iyileştirmeler yapmak daha pratik hâle geldi.
Recorder’ın beraberinde getirdiği bir özellik de kaydedilen kullanıcı akışlarını farklı formatlarda dışarı aktarabiliyor olmasıydı. Bu sayede kullanıcı akışlarının üçüncü parti uygulamalarla paylaşılabilmesinin önü açılmış oldu.
Daha önce bir başka uçtan uca test çözümü olan Puppeteer için bir araç duyurulmuştu. Geçtiğimiz hafta ise Recorder ile kaydedilen kullanıcı akışlarının, Cypress test senaryolarına dönüştürülmesini sağlayan Cypress Chrome Recorder’ın ilk sürümü topluluk tarafından yayımlandı.
Akış Kaydetmek
Basit bir örnek yapalım. Amazon web sitesindeki kullanıcı oturum açma akışını Recorder ile kaydedelim.
Kabaca aşağıdaki gibi görünen bir akışımız olacak.
Daha sonra kaydettiğimiz akışı JSON formatında dışarı aktaralım. Daha önce akışları yalnızca JavaScript formatında içeri ve dışarı aktarma imkânı varken Chrome 101 sürümünden itibaren JSON formatı da desteklenmeye başladı.
Test ortamımıza dönelim. Bu aşamada Cypress’in hâlihazırda kurulu ve yapılandırılmış olduğunu varsayıyoruz. Kurulu değilse buradan yardım alınabilir.
İlk olarak @cypress/chrome-recorder paketini kuralım.
Akabinde Recorder’dan dışarı aktardığımız akış dosyasını recordings dizini altına kopyalayalım ve kurduğumuz pakete argüman olarak verip çalıştıralım.
Birkaç saniye içerisinde test senaryolarımızın olduğu integration dizini altında JSON dosyasıyla aynı isimde bir test dosyası oluşacak.
Dosyayı açıp incelediğimizde ise Recorder ile Amazon’dan aldığımız akış kaydının CSS seçicilerinden, girilen input değerlerine kadar tanımlanmış ve koşturulmaya hazır bir Cypress senaryosuna dönüştüğünü göreceğiz.
Sonuç
Cypress Chrome Recorder elbette her zaman dört başı mamur bir çıktı vermiyor. Özellikle DOM ağacının kalabalık olduğu sayfalarda ve uzun akışlarda doğru şekilde çalışan senaryolar oluşturmasına rağmen seçicileri pek okunabilir olmuyor. Fakat işçilik konusunda neredeyse tüm yükü kendi üzerine alıyor. Alametifarikası da bu zaten bence. Testi yazan kişiye sadece oluşturulan çıktıya müdahale edip iyileştirmek kalıyor.
