Flutter Uygulamalarındaki Yerel Özellikleri Patrol ve Codemagic ile Test Etme

Yaklaşık 9 ay önce müşterilerimizden biri, "Bunun faydası yok! Flutter'ın entegrasyon testleriyle uçtan uca bir test yapamam" diye haykırdı. Sorunun ne olduğunu sordum ve giriş yapmak için Google Authentication'ı kullandıklarını ve google_sign_in paketini kullandıklarını ancak giriş ekranlarıyla etkileşimde bulunmak için Flutter'ın entegrasyon testlerini kullanmanın mümkün olmadığını açıkladılar. Sorunun ne olduğunu hâlâ tam olarak anlayamadım ve sonra düzeldi: Bu eklenti, entegrasyon testlerinin çalışmadığı yerel kullanıcı arayüzü bileşenlerini kullanıyor.

O zaman bir çözüm sunamadığım için oldukça hayal kırıklığına uğradım ve işi bu şekilde bırakmak zorunda kaldım. Ancak bugün hızla ilerlediğimizde "Patrol" adı verilen harika yeni bir çözüm ortaya çıktı. Yalın Kod . Size her şeyi anlatacağım, ancak konuya dalmadan önce testleri çalıştırmanın neden önemli olduğunu, şu ana kadar hangi araçlara sahip olduğunuzu özetleyelim ve ardından Patrol'e nasıl başlayacağınız hakkında konuşalım.

Flutter uygulamalarını neden test etmelisiniz?

Geliştirme ekiplerinin Sürekli Entegrasyon (CI) hizmetlerini kullanmasının ana nedenlerinden biri Codemagic depolarına taahhüt ettikleri kod hakkında anında geri bildirim almaktır. Hatalar veya sorunlar erkenden tespit edilip hemen düzeltilebildiğinden, hem kalite hem de kararlılık düzeyini sağlamak için testler kanalınızın bir parçası olarak otomatik olarak çalıştırılabilir. Müşterilerimizi her zaman iş akışlarını ayarlarken test uygulamalarını teşvik ederiz, ancak "Test yazmaya zamanımız yok" sözlerini duymak alışılmadık bir durum değildir. Umarım bu durumda değilsinizdir ve mükemmel kalitede ve hatasız uygulamalar sunmak için testleri uygulama geliştirme döngünüzün bir parçası olarak kullanın!

Flutter uygulamalarını test etmenin başlıca otomatik yolları nelerdir?

CI iş akışınızın bir parçası olarak otomatikleştirilebilecek dört ana test yöntemi vardır. Test etme başlı başına bir konudur, bu yüzden kısa tutacağım ancak bu test yöntemlerinin bir kombinasyonunu kullanmak, uygulamanızın kalitesini artırmanıza ve sorunları daha sonra değil, daha erken yakalamanıza yardımcı olacaktır.

İlk olarak, işlevlerinizin ve yöntemlerinizin beklendiği gibi çalıştığından emin olmak için ayrı ayrı test etmek için yaygın olarak kullanılan "Birim testi" vardır. İş mantığınızın farklı senaryolarda beklenmeyen sonuçlar olmadan çalıştığından emin olmak için birim testleri de yazılabilir.

Daha sonra, UI bileşenlerinizi test etmenize ve bunların doğru şekilde oluşturulduğundan ve beklediğiniz gibi çalıştığından emin olmanıza olanak tanıyan Flutter "Widget testleri" var.

Daha sonra, uygulamanızın birimlerinin ve bileşenlerinin beklendiği gibi birlikte çalışıp çalışmadığını test ettiğiniz "Entegrasyon testi" vardır.

Son olarak, uygulamayı gerçek bir kullanıcı tarafından kullanılıyormuş gibi test ettiğiniz "Uçtan Uca UI testi" vardır. Bir CI iş akışında, kodunuzda değişiklik yaptıktan sonra herhangi bir sorun olmadığından emin olmak amacıyla uygulamanızdaki farklı yolları test etmek için bu genellikle simülatörler veya öykünücüler kullanılarak otomatikleştirilir.

Başlangıçta bahsettiğim müşteri, uygulamaya giriş yapmak mümkün olmadığından Uçtan Uca UI testlerini çalıştıramadığı için sıkışıp kaldığı yer burasıdır. O zamanlar oturum açma kısmını atlayan bir 'geliştirme' sürümünü test ettiler.

Ancak artık "Devriye" mevcut olduğundan buna gerek yok!

Girin, sol sahne, Devriye!

Peki öncelikle Devriye nedir? Bence dokümanlar bunu en iyi şekilde söylüyor:

Patrol, LeanCode tarafından geliştirilen Flutter için yeni ve açık kaynaklı bir kullanıcı arayüzü test çerçevesidir. Daha önce imkansız olan şeyleri yapmanıza olanak sağlamak için Flutter'ın mevcut test araçlarının üzerine inşa edilmiştir. Patrol, Flutter uygulamasının üzerinde çalıştığı platformun yerel özelliklerine erişmenizi sağlar.

Buradaki en önemli kısım Flutter uygulamanızın çalıştığı platformun yerel özelliklerine erişmenizi sağlamasıdır.

Bu, artık aşağıdaki gibi şeyler yapabileceğiniz anlamına gelir:

1. İstekleri reddetmek veya kabul etmek için İzin İsteği iletişim kutuları ile etkileşim kurun.
2. WebView'larla etkileşim kurun.
3. Uygulamanızı küçültün ve büyütün.
4. Google veya Apple kimlik doğrulaması gibi kimlik doğrulama akışlarıyla etkileşim kurun.
5. Bildirim tepsisini açmak, Ana Sayfa düğmesine basmak, Wi-Fi bağlantısını açmak veya kapatmak veya cihazı karanlık moda geçirmek vb. gibi diğer yerel özelliklerle etkileşim kurun.

Tamam, bu kulağa harika geliyor ama işin püf noktası nedir?

Peki, öyle bir şey yok! Dahası, yalnızca ücretsiz değil aynı zamanda açık kaynak !

Ayrıca Patrol, testlerinizi yazmanız için size daha kısa bir sözdizimi sağlayan 'özel bulucuları' da sunar. Onlar hakkında daha fazlasını okuyabilirsiniz Burada .

Patrol'ü yükleme ve ayarlama

Patrol'ü kullanmaya başlamak için CLI'yi yüklemeniz, Patrol bağımlılığını pubspec.yaml dosyanıza eklemeniz ve iOS ve Android projelerinizde bazı yapılandırmalar ayarlamanız gerekir.

LeanCode harika belgeler hazırladı Burada burada bulabileceğiniz her platform için süreç boyunca size yol gösterir. Adım adım kılavuzları hem iOS hem de Android kurulumunda size yol gösterecektir.

Herhangi bir sorunla karşılaşırsanız yardım alabileceğiniz en iyi yer katılabileceğiniz Patrol Topluluğu Discord sunucusudur. Burada .

Herhangi bir hata bulursanız sorunu dile getirebilirsiniz Burada .

Patrol'ü yükleme ve ayarlama

Patrol'ü kullanmaya başlamak için CLI'yi yüklemeniz, Patrol bağımlılığını pubspec.yaml dosyanıza eklemeniz ve iOS ve Android projelerinizde bazı yapılandırmalar ayarlamanız gerekir.

LeanCode harika belgeler hazırladı Burada burada bulabileceğiniz her platform için süreç boyunca size yol gösterir. Adım adım kılavuzları hem iOS hem de Android kurulumunda size yol gösterecektir.

Herhangi bir sorunla karşılaşırsanız yardım alabileceğiniz en iyi yer katılabileceğiniz Patrol Topluluğu Discord sunucusudur. Burada .

Herhangi bir hata bulursanız sorunu dile getirebilirsiniz Burada .

Patrol ile yerel özellik testleri yazma

Artık hazırsınız, hadi bazı yerel özellikleri test etmeye başlayalım. Bunu kendim denemek için, tıklandığında yerel bir uyarı iletişim kutusu açan, yükseltilmiş bir düğmeye sahip basit bir Flutter uygulaması kurdum.

"Tamam" veya "İptal"e tıkladığınızda iletişim kutusu kapatılır.

Yine Patrol'ün bulabileceğiniz kendi belgelerini kullanmanızı tavsiye ederim. Burada İlk test dosyanızın eklenmesini sağlamak için.

Bu yüzden testim için "Beni tıklayın!" metninin bulunduğu yükseltilmiş düğmeye tıklamak istedim. Bu standart bir Flutter widget'ıdır ve aşağıdaki Devriye bulucu kullanılarak dokunulabilir:

 await $('Click me!').tap();

Daha sonra yerel iletişim kutusu görüntülenmelidir, böylece artık yerel bir kullanıcı arayüzü bileşeniyle etkileşime girmeye başlayabiliriz. Öyleyse "Tamam" düğmesine dokunmamızı sağlayacak yerel bulucuyu ekleyelim:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK'));

Kolaydı! Ayrıca "İptal" düğmesini de denemek istiyorum, o yüzden "Beni tıkla!" düğmesine dokunalım. düğmesine tekrar basın ve ardından aşağıdaki gibi birkaç satır daha ekleyerek yerel iletişim kutusunun "İptal" düğmesine dokunun:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel'));

Tamamlanan test dosyanız şöyle görünmelidir:

 import 'package:cmpatrol/main.dart'; import 'package:patrol/patrol.dart'; void main() { patrolTest( 'Native tests', nativeAutomation: true, ($) async { await $.pumpWidgetAndSettle(const MyApp()); await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'NO')); }, ); }

Artık testi başlatma komutunu kullanarak bu testi öykünücünüzde veya gerçek bir cihazda çalıştırabilmeniz gerekir. Entegrasyon test dosyamın adı "button_test" olduğundan testleri Terminal'den şu şekilde başlattım:

 patrol test -t integration_test/button_test.dart

Testlerinizin başarılı olup olmadığını doğrudan Terminal'de göreceksiniz. Testler başarısız olursa, tam test raporuna bir bağlantı alacaksınız. Alternatif olarak, eğer testlerinizi benim yaptığım gibi Android üzerinde çalıştırıyorsanız, aşağıdaki dizindeki index.html dosyasına tıklayarak rapora erişebilirsiniz:

 ./build/app/reports/androidTest/connected 

Bildirim tepsisini açmak, kablosuz bağlantıyı devre dışı bırakmak, karanlık modu etkinleştirmek, uygulamayı simge durumuna küçültmek ve büyütmek gibi diğer yerel özelliklerle daha fazla deneme yapabilirsiniz:

 // minimize app await $.native.pressHome(); await $.native.openNotifications(); await $.native.disableWifi(); await $.native.enableDarkMode(); // maximize app await $.native.openApp();

⚠️ Uygulamanızı tamamen kapatıp tekrar açmanın mümkün olmadığını unutmayın çünkü bunu yapmak tüm testin sona ermesine ve dolayısıyla başarısız olmasına neden olur.

Devriyeye danışın dokümantasyon daha fazla örnek için.

Codemagic iş akışlarınızda Patrol'ü kullanma

Patrol'ü iş akışlarınıza dahil etmek için öncelikle Patrol CLI'yi yapım makinesine yüklemeniz gerekir. Bu yalnızca birkaç saniye sürer ve işlem tamamlandıktan sonra test komut dosyanızı çalıştırabilirsiniz. Aşağıda bu adımları codemagic.yaml yapılandırma dosyanızın "komut dosyaları" bölümüne nasıl ekleyeceğinize dair bir örnek verilmiştir. İlk komut dosyası adımlarından biri olarak Patrol CLI'yi yüklemek için komut dosyasını çalıştırmanızı öneririm ve ardından Patrol testlerinizi bundan hemen sonra veya önceden çalıştırmak isteyebileceğiniz diğer testlerden sonra çalıştırabilirsiniz.

Devriye testlerinizi çalıştırmadan önce emülatörü başlatmanız gerekecek, böylece emülatörü başlatmak için bir komut dosyası ekleyeceğiz ve tamamen başlatılmasını bekleyeceğiz. Apple Virtualization Framework'ün iç içe sanallaştırmayı desteklememesi nedeniyle Android emülatörlerinin Apple Silicon M1 veya M2 makinelerini kullanan makinelerde kullanılamadığını unutmayın. Bu nedenle Android uygulamalarını test ederken bir linux örneği kullanmanızı tavsiye ederim.

codemagic.yaml dosyanızın komut dosyaları bölümü şöyle görünmelidir:

 scripts: ... - name: Install Patrol CLI script: dart pub global activate patrol_cli - name: Launch Android emulator script: | cd $ANDROID_HOME/tools emulator -avd emulator & adb wait-for-device - name: Run tests with Patrol script: patrol test -t integration_test/your_test.dart ignore_failure: true ...

Codemagic derleme günlüklerinde Patrol test sonuçları gösteriliyor

Patrol test sonuçları aynı zamanda JUnit XML formatında da mevcuttur; bu, bunların Codemagic derleme genel bakış ekranındaki derleme günlüklerinde görüntülenebileceği anlamına gelir. Oluşturulan JUnit XML dosyasının yoluna test_report özellik geçişini eklemeniz yeterlidir. İş akışının geri kalanının çalışmaya devam etmesini isteyip istemediğinizi kontrol etmek için görmezden_failure özelliğini bir boole ile kullanabilirsiniz. Sonuçlarınızı bir sonraki bölümde anlatıldığı gibi bir test yönetim sistemine yüklemek istiyorsanız bunu true olarak ayarlamalısınız.

İşte betiğinizin nasıl görünmesi gerektiğine dair bir örnek:

 scripts: ... - name: Run tests with Patrol script: | patrol test -t integration_test/your_test.dart test_report: build/app/outputs/androidTest-results/connected/*.xml ignore_failure: true ...

Başarısız bir test şuna benzer:

Patrol test raporunu bir yapı yapısı olarak toplama

Yapmak isteyebileceğiniz ek bir şey de, herhangi bir hata oluşması durumunda raporun tamamını görüntüleyebilmeniz için test raporu çıktısını bir yapı yapısı olarak toplamaktır. Bunu yapmak, raporun sol taraftaki "Yapılar" bölümündeki yapıya genel bakış ekranında zip dosyası olarak indirilebilmesini sağlayacaktır. Bunu yapmanın en kolay yolu, rapor dosyalarının bulunduğu dizini Codemagic'in yapıları dışa aktarmak için kullandığı dizine kopyalamaktır. Betiğinizde kullanabileceğiniz bu dizine başvuran $CM_EXPORT_DIR adında yerleşik bir ortam değişkeni vardır.

Bunu yapmak için komut dosyası şu şekilde olmalıdır:

 scripts: ... - name: Export Patrol test report script: | cp -r build/app/reports/androidTests/connected $CM_EXPORT_DIR/report ...

Çözüm

Patrol nihayet yerel özellikleri içeren kullanıcı arayüzü ve entegrasyon testlerini çalıştırma sorununun üstesinden geldi. Artık yerel özellikleri test etmek ve kimlik doğrulama akışları, yerel diyaloglar ile etkileşimde bulunmak, hatta wifi, hücresel, karanlık mod gibi yerel özellikler arasında geçiş yapmak ve hatta uygulamanızı en aza indirip en üst düzeye çıkarmak artık mümkün. Ek olarak, hem ücretsiz hem de açık kaynaktır ve Flutter'ın piyasaya sürülmesinden bu yana var olan gerçek bir soruna çözüm sağlar. Dahası, onu Codemagic iş akışlarınıza eklemek ve kullanmak çok kolaydır. LeanCode'un yaptığı harika işi desteklemek istiyorsanız Patrol'e pub.dev'den bir beğeni yapın Burada ve Patrol GitHub deposuna bir yıldız verin Burada .

Bu makale Çözüm Mühendisliği Başkanı Kevin Suhajda tarafından yazılmıştır. Codemagic . Kevin'i şurada bulabilirsiniz: X , GitHub , Ve LinkedIn .