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.

iframe içerisindeki elementlere erişmek

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

cypress-iframe paketinin kurulması

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.

cypress-iframe paketinin sağladığı metotlarla iframe’e erişmek

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

Cypress serisindeki bir sonraki yazı: Cypress İpuçları #3: Custom Command Tanımlamak

--

--

Front-End Developer @Akbank — tugsanunlu.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store