Cypress İpuçları #2: Iframe ile Çalışmak
Cypress serisindeki bir önceki yazı: Cypress İpuçları #1: Ortam Tanımlamak ve Ortam Değişkenleri Kullanmak
Cypress ile uçtan uca test senaryoları yazarken kimi zaman iframe’ler ile çalışmak gerekebiliyor. Modern web uygulamalarında iframe kullanımı pek tercih edilen bir yöntem olmasa da ekseriyetle üçüncü parti servis sağlayıcılarının (oturum yönetimi, reklam gösterimi, analiz takipleri, ödeme araçları vb. servisler) entegrasyonlarında kaçınılmaz olarak iframe’lere başvuruluyor. Elbette Cypress ile iframe’lere erişebiliyoruz fakat sayfa içerisindeki diğer elementlere erişmeye göre biraz meşakkatli oluyor.
Iframe’e Erişmek
Test senaryolarında iframe’ler içerisindeki elementlere erişmek için ilk olarak iframe’in document nesnesini yakalamak, sonrasında ise iframe içeriğinin yüklenip yüklenmediğini kontrol etmek gerekiyor. Iframe’e eriştikten sonra ise senaryolarda alışageldiğimiz get() yerine find() metodunu kullanarak iframe içerisindeki istediğimiz elementi seçebiliyoruz.
Üstteki örnekteki getIframeDocument() ve getIframeBody() metotları tüm test senaryolarının erişebileceği ortak bir modülde toplanabilir. Fakat bu her defasında ilgili test senaryosunun içerisinde bir import işlemi yapılacağı anlamına gelir. Bunun yerine Cypress’in custom commands özelliği ile cy nesnesine dahil edilebilirler. Bu sayede cy.getIframe() gibi bir metotla testler içerisinde kolaylıkla çağrılabilirler.
cypress-iframe NPM Paketini Kullanmak
Bunun için geliştirilmiş ve Cypress’in de dokümantasyonunda önerdiği cypress-iframe isimli bir NPM paketi bulunuyor. Topluluk tarafından oldukça rağbet gören bir paket. İçerisinde iframe’lere erişim süreçlerini pratikleştirmek için kullanışlı metotlar mevcut.
Kullanımı ise oldukça basit. İlk olarak ilgili paketi geliştirme ortamı bağımlılığı olarak kuralım.
Akabinde ise kullanacağımız test senaryosuna veya tüm test senaryolarında kullanmak istiyorsak support dizinindeki index.js dosyasına kütüphaneyi import edelim.
Böylece test senaryoları içerisinde kullanabileceğimiz cy.frameLoaded() ve cy.iframe() isimli iki metota sahip oluyoruz. Bunlar kabaca ilk örnekteki getIframeDocument() ve getIframeBody() metotlarına karşılık geliyorlar.
cy.iframe() metodu cy.frameLoaded() metodunda belirtilen iframe’e erişim sağlıyor. Yine ilk örnekteki kontroller de cy.frameLoaded() metodu içerisinde yapılıyor. Her iki metot da senaryo yazımı sırasında Cypress içerisindeki yerleşik bir çözüm gibi ele alınıyor.
Sonuç
Özellikle dokümantasyonun dikkatle okunmadığı durumlarda ezbere bilgilerle bu gibi istisnalar üzerinde çalışmak epey zaman kaybettirebiliyor. Acı tecrübelerle sabit maalesef. O nedenle bunun gibi gündelik hayat ihtiyaçlarına dair Cypress ile ilgili yazmaya devam etmek niyetindeyim.
Kaynaklar
- https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
- https://gitlab.com/kgroat/cypress-iframe
Cypress serisindeki bir sonraki yazı: Cypress İpuçları #3: Custom Command Tanımlamak
