Detox: Nedir, çalışma prensipleri ve E2E testi

Detox Nedir

Detox, Wix tarafından 2017 yılında geliştirilmiş, mobil uygulamaların uçtan uca (E2E) testi için bir framework'tür. React Native projeleri için tasarlanmıştır ancak iOS ve Android'de tamamen yerel uygulamaları da destekler. Detox gray-box modeliyle çalışır, yani uygulamanın iç mekanizmalarına erişimi vardır.

Diğer E2E Framework'lerinden Farkı

Detox ile Appium veya Calabash arasındaki temel fark, uygulamayla otomatik senkronizasyondur. Framework, bir sonraki eylemi gerçekleştirmeden önce animasyonların, ağ isteklerinin ve olay işlemenin tamamlanmasını bekler. Bu, testleri yavaşlatan Thread.sleep() veya waitForElement ihtiyacını tamamen ortadan kaldırır.

Desteklenen Platformlar

Detox, iOS (XCTest ve Xcode aracılığıyla) ve Android'i (Espresso ve UI Automator aracılığıyla) destekler. React Native uygulamaları için Fabric ve eski mimari için tam destek sağlanır. iOS'ta testler simülatörde, Android'de emülatörde veya gerçek bir cihazda çalışır.

Detox Mimarisi ve Gray-box Modeli

Detox mimarisi üç temel bileşenden oluşur: Detox CLI, Detox test çalıştırıcısı ve Detox Native Driver. Detox CLI, uygulama derlemesini, kurulumunu ve test yürütmesini yönetir. Test çalıştırıcısı (Jest veya Mocha) test senaryolarını yürütür ve WebSocket aracılığıyla uygulamayla iletişim kurar.

Gray-box Yaklaşımı

Gray-box test, Detox'un yerel bir köprü aracılığıyla uygulamanın iç durumuna erişebildiği anlamına gelir. Framework, ağ isteklerini, animasyonları, zamanlayıcıları ve işlem kuyruğunu izler. Tüm kuyruklar boş olduğunda, Detox uygulamayı sonraki adıma hazır olarak kabul eder.

Senkronizasyon Mekanizması

Senkronizasyon, uygulamanın ana iş parçacığının izlenmesine dayanır. Detox, tüm animasyonlar tamamlanana, HTTP istekleri yanıt döndürene ve olay işleyicileri yürütmeyi bitirene kadar bekler. Bir test sonsuz animasyon nedeniyle takılırsa, belirli bir kod bloğu için senkronizasyonu manuel olarak devre dışı bırakabilirsiniz.

// Sorunlu bir bölüm için senkronizasyonu devre dışı bırakma
await device.disableSynchronization();
// Uzun animasyonlu eylem
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Detox Kurulumu ve Yapılandırması

Detox kurulumu, paketin npm veya yarn aracılığıyla eklenmesiyle başlar. Kurulumdan sonra, her platform için derleme ve çalıştırma ayarlarını açıklayan bir yapılandırma dosyası .detoxrc.js oluşturmanız gerekir. Detox, iOS için Xcode yapılandırmasına dayalı kendi derleme türünü kullanır.

Temel Yapılandırma

Yapılandırma, uygulama yolunu (app), derleyici türünü (build), derleme bağımsız değişkenlerini ve cihaz ayarlarını (device) içerir. iOS için appleSimulator, Android için androidEmulator kullanılır. Ayrıca simülatörün dili veya bölgesi gibi başlatma bağımsız değişkenlerini de belirtebilirsiniz.

// .detoxrc.js — yapılandırma örneği
module.exports = {
  testRunner: { args: { '$0': 'jest', config: 'e2e/config.json' } },
  apps: {
    'ios.debug': { type: 'ios.app', build: 'xcodebuild ...' },
    'android.debug': { type: 'android.apk', build: 'cd android && ./gradlew ...' }
  },
  devices: {
    simulator: { type: 'ios.simulator', device: { type: 'iPhone 15' } },
    emulator: { type: 'android.emulator', device: { avdName: 'Pixel_4_API_34' } }
  }
};

Başlatma Komutları

Yapılandırmadan sonra şu komutlar kullanılabilir: detox build — uygulamayı test bayraklarıyla derler ve detox test — testleri çalıştırır. Detox, --workers bayrağını kullanarak birden çok cihazda paralel yürütmeyi destekler.

Detox ile Test Yazma

Detox testleri, öğe arama (matchers) ve eylemlere (actions) dayalı bir API kullanılarak JavaScript veya TypeScript ile yazılır. Matchers, bir öğeyi tanımlayıcıya, metne, türe veya ekrandaki konuma göre bulmanızı sağlar. Eylemler dokunma, metin girişi, kaydırma ve scrool işlemlerini gerçekleştirir.

Test Senaryosu Yapısı

Tipik bir test şu sırayı izler: bir öğe bul → bir eylem gerçekleştir → sonucu doğrula. Doğrulamalar için, expect API'si öğenin varlığı, görünürlüğü veya metni için matchers ile kullanılır. Detox, Jest ile entegrasyon yoluyla describe/it sözdizimini destekler.

describe('Login flow', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should log in with valid credentials', async () => {
    await element(by.id('emailInput')).typeText('user@test.com');
    await element(by.id('passwordInput')).typeText('password123');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('homeScreen'))).toBeVisible();
  });
});

Hareketlerle Çalışma

Detox, tüm popüler hareketleri destekler: tap, longPress, swipe, scroll, pinch, multiTap. Scroll için yönü, hızı ve durma konumunu belirtebilirsiniz. Bu, pull-to-refresh veya atlı karusel gibi karmaşık senaryoları test etmeyi sağlar.

Detox'u CI/CD'ye Entegre Etme

Detox, popüler CI sistemleriyle iyi entegre olur: GitHub Actions, CircleCI, Bitrise ve Jenkins. CI'da çalıştırmak için bir sanal iOS simülatörü (GUI olmadan) ve donanım hızlandırmalı bir Android emülatörü kurmanız gerekir. Detox, başarısız testleri analiz etmek için yapay ürünler — ekran görüntüleri ve günlükler — sağlar.

CI İçin Öneriler

CI'da test çalıştırmayı hızlandırmak için, --workers bayrağıyla parçalama (paralelleştirme) kullanılması önerilir. Detox, test dosyalarını otomatik olarak birden çok simülatöre dağıtır. Derleme süresini azaltmak için çalıştırmalar arasında uygulama derlemelerini önbelleğe almak da faydalıdır.

# GitHub Actions — iOS'ta Detox çalıştırma
- name: Install Dependencies
  run: npm ci

- name: Build Detox App
  run: npx detox build --configuration ios.sim

- name: Run Detox Tests
  run: npx detox test --configuration ios.sim --workers 2
  timeout-minutes: 30

Detox En İyi Uygulamaları

Kararlı ve hızlı E2E testleri için birkaç kurala uyulması önerilir. sleep()'ten kaçının — Detox otomatik senkronizasyon sağlar ve açık gecikmeler yalnızca testleri yavaşlatır ve dengesiz hale getirir. Bir test zamanlama sorunları nedeniyle başarısız olursa, önce senkronizasyonun devre dışı olup olmadığını kontrol edin. Testleri özelliğe göre gruplamak ve bağımsız olarak çalıştırmak da faydalıdır — bu, başarısızlık nedenini bulmayı kolaylaştırır.

Device Yöntemlerini Kullanma

Detox, durum yönetimi için birkaç device yöntemi sağlar: device.reloadReactNative() demeti yeniden yükler, device.launchNewApp() uygulamayı yeni parametrelerle başlatır, device.sendToHome() uygulamayı küçültür. device.setURLBlacklist(), belirli URL'leri senkronizasyon dışı bırakmanıza olanak tanır; bu, analitik ve long-polling bağlantıları için kullanışlıdır.

Test Verilerini Düzenleme

Her test için yalıtılmış bir durum oluşturulması önerilir. Uygulamayı device.reloadReactNative() aracılığıyla yeniden yüklemek için beforeEach kullanın. Belirli veriler gerektiren testler için, sunucuda veri hazırlamak üzere fabrikalar veya API istemcileri oluşturun. Testler arasındaki bağımlılıklardan kaçının — her test bağımsız olmalıdır.

WebView ile Çalışma

Detox, web.element() ve web.invoke() yöntemleri aracılığıyla WebView testini destekler. Web öğeleriyle etkileşim kurmak için by.web](:id, css veya className kullanılır. WebView'in ek yükleme süresi gerektirdiğini unutmamak önemlidir — senkronizasyon çalışmazsa, waitFor kullanarak bir yükleme beklemesi ekleyin.

// Detox'ta WebView Testi
const webView = web(by.id('webview'));
await webView.element(by.web.cssSelector('#submit-btn')).tap();
const result = await webView.element(
  by.web.cssSelector('.result-text')
).getText();
await expect(result).toEqual('Success');

Ekran Görüntüsü Testi

Detox, detox-image-matching eklentisi aracılığıyla ekran görüntüsü karşılaştırmasını destekler. Ekran görüntüleri görsel gerilemeleri tespit etmenizi sağlar: kaymış öğeler, yanlış renkler, eksik simgeler. Kararlı ekran görüntüleri için animasyonları devre dışı bırakın ve sabit bir simülatör boyutu kullanın.

Detox Sorunlarını Teşhis Etme

En yaygın Detox sorunları senkronizasyonla ilgilidir: sonsuz animasyonlar, uzun ağ istekleri veya takılı zamanlayıcılar. --loglevel trace bayrağıyla günlükleme, Detox'un hangi kaynakları beklediğini gösterir. Detox takılırsa, sorunlu kod bloğu için device.disableSynchronization() kullanın.

Simülatör Sorunları

iOS simülatöründe Detox, uygulamanın önce iphonesimulator yapılandırmasıyla xcodebuild aracılığıyla derlenmesini gerektirir. Yaygın bir hata, Debug yerine Release şeması kullanmaktır; bu, test bayraklarını devre dışı bırakır. Android için, AVD'nin uygulamanızla uyumlu bir API ile oluşturulduğundan ve Intel HAXM hızlandırmasının etkin olduğundan emin olun. macOS'teki CI ortamları için, Xcode ve simülatörlerin önceden yüklü olduğu macOS çalıştırıcısıyla GitHub Actions kullanmak uygundur.

Test Zaman Aşımları

Testler düzenli olarak zaman aşımı nedeniyle başarısız olursa, şunları kontrol edin: senkronizasyonun küresel olarak devre dışı olup olmadığı, uygulama kodunda temizlik yapılmadan setTimeout veya setInterval kullanılıp kullanılmadığı ve ana iş parçacığının uzun bir işlem tarafından bloke edilip edilmediği. Bazen detoxrc.js'de testRunner.args.jest.$.testTimeout aracılığıyla zaman aşımını artırmak yardımcı olur. Sorunlu alanları bulmak için Detox izleme günlüklemesini etkinleştirin — framework'ün şu anda hangi kaynakları ve zamanlayıcıları beklediğini gösterir.

Yapay Ürünler ve Raporlar

Test çalıştırmasından sonra Detox, yapay ürünler oluşturur: başarısız testlerin ekran görüntüleri, uygulama günlükleri ve JUnit XML raporları. Bir test başarısız olduğunda ekran görüntüleri otomatik olarak alınır ve sorunu görsel olarak belirlemeye yardımcı olur. CI için, yapay ürünler bulut depolamaya yüklenir ve başarısızlık nedenlerini analiz etmek için web arayüzü aracılığıyla kullanılabilir.