Cypress İpuçları #5: Chrome DevTools Recorder ile Test Senaryoları Oluşturmak

Tuğsan Ünlü
3 min readApr 29, 2022

--

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.

DevTools Recorder

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.

Kayda başlamak

Kabaca aşağıdaki gibi görünen bir akışımız olacak.

Örnek akış

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ı.

Akışın JSON olarak dışarı aktarılması

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.

Cypress Chrome Recorder’ın kurulması

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.

Cypress Chrome Recorder’ın çalıştırılması

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.

Test senaryosunun oluşturulması

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.

Oluşturulmuş örnek senaryo

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.

Kaynaklar

--

--