Detox: nədir, iş prinsipləri və E2E-test

Detox nədir

Detox — 2017-ci ildə Wix şirkəti tərəfindən hazırlanmış mobil tətbiqlərin kompleks (E2E) testi üçün freymvorkdur. React Native layihələri üçün nəzərdə tutulub, lakin iOS və Android-də tam nativ tətbiqləri də dəstəkləyir. Detox gray-box modeli ilə işləyir, yəni tətbiqin daxili mexanizmlərinə çıxışı var.

Digər E2E-freymvorklardan fərqi

Detox-un Appium və ya Calabash-dan əsas fərqi tətbiqlə avtomatik sinxronizasiyadır. Freymvork növbəti hərəkəti yerinə yetirməzdən əvvəl animasiyaların, şəbəkə sorğularının və hadisələrin işlənməsinin tamamlanmasını gözləyir. Bu, testləri ləngidən Thread.sleep() və ya waitForElement ehtiyacını tamamilə aradan qaldırır.

Dəstəklənən platformalar

Detox iOS (XCTest və Xcode vasitəsilə) və Android (Espresso və UI Automator vasitəsilə) platformalarını dəstəkləyir. React Native tətbiqləri üçün Fabric və köhnə arxitektura üçün tam dəstək təmin edilir. iOS-da testlər simulyatorda, Android-də isə emulyatorda və ya real cihazda işə salınır.

Detox arxitekturası və gray-box modeli

Detox arxitekturası üç əsas komponentdən ibarətdir: Detox CLI, Detox test-ranneri və Detox Native Driver. Detox CLI tətbiqin qurulması, quraşdırılması və testlərin işə salınmasını idarə edir. Test-ranner (Jest və ya Mocha) test ssenarilərini icra edir və WebSocket vasitəsilə tətbiqlə əlaqə saxlayır.

Gray-box yanaşması

Gray-box testi o deməkdir ki, Detox nativ körpü vasitəsilə tətbiqin daxili vəziyyətinə çıxış əldə edir. Freymvork şəbəkə sorğularını, animasiyaları, taymerləri və əməliyyat növbəsini izləyir. Bütün növbələr boş olduqda — Detox tətbiqi növbəti addıma hazır hesab edir.

Sinxronizasiya mexanizmi

Sinxronizasiya tətbiqin əsas axınının (main thread) izlənməsinə əsaslanır. Detox bütün animasiyaların tamamlanmasını, HTTP sorğularının cavab qaytarmasını və hadisə emalçılarının icrasını gözləyir. Test sonsuz animasiya səbəbindən donarsa — konkret kod bloku üçün sinxronizasiyanı məcburi şəkildə söndürmək olar.

// Problemli sahə üçün sinxronizasiyanın söndürülməsi
await device.disableSynchronization();
// Uzun animasiyalı hərəkət
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Detox-un quraşdırılması və konfiqurasiyası

Detox-un quraşdırılması npm və ya yarn vasitəsilə paketin əlavə edilməsi ilə başlayır. Quraşdırmadan sonra hər bir platforma üçün qurma və işə salma parametrlərini təsvir edən .detoxrc.js konfiqurasiya faylı yaradılmalıdır. Detox iOS üçün Xcode konfiqurasiyasına əsaslanan öz qurma tipindən istifadə edir.

Əsas konfiqurasiya

Konfiqurasiya tətbiqə gedən yolu (app), qurucu tipini (build), qurma arqumentlərini və cihaz parametrlərini (device) əhatə edir. iOS üçün appleSimulator, Android üçün androidEmulator istifadə olunur. Həmçinin simulyatorun dili və ya regionu kimi işə salma arqumentləri də göstərilə bilər.

// .detoxrc.js — konfiqurasiya nümunəsi
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' } }
  }
};

İşə salma əmrləri

Konfiqurasiyadan sonra əmrlər mövcuddur: detox build — test flaqları ilə tətbiqin qurulması və detox test — testlərin işə salınması. Detox --workers flaqı vasitəsilə bir neçə cihazda paralel işə salmanı dəstəkləyir.

Detox-da testlərin yazılması

Detox testləri JavaScript və ya TypeScript dilində element axtarışı (matchers) və hərəkətlərə (actions) əsaslanan API-dən istifadə edərək yazılır. Matchers elementi identifikator, mətn, tip və ya ekrandakı mövqeyə görə tapmağa imkan verir. Actions toxunma, mətn daxiletmə, sürüşdürmə və kaydırma əməliyyatlarını yerinə yetirir.

Test ssenarisinin strukturu

Tipik test aşağıdakı ardıcıllıq kimi görünür: elementi tap → hərəkəti yerinə yetir → nəticəni yoxla. Yoxlamaq üçün elementin mövcudluğu, görünməsi və ya mətni üzrə matchers ilə expect-API istifadə olunur. Detox Jest ilə inteqrasiya vasitəsilə describe/it sintaksisini dəstəkləyir.

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();
  });
});

Gestlərlə iş

Detox bütün populyar gestləri dəstəkləyir: tap, longPress, swipe, scroll, pinch, multiTap. Scroll üçün istiqamət, sürət və dayanma mövqeyi göstərilə bilər. Bu, pull-to-refresh və ya karusellər kimi mürəkkəb ssenariləri test etməyə imkan verir.

Detox-un CI/CD-yə inteqrasiyası

Detox məşhur CI sistemləri ilə yaxşı inteqrasiya olunur: GitHub Actions, CircleCI, Bitrise və Jenkins. CI-də işə salmaq üçün virtual simulyator iOS (GUI-siz) və aparat sürətləndirilməsi ilə Android emulyatoru konfiqurasiya edilməlidir. Detox uğursuz testlərin təhlili üçün artefaktlar — ekran görüntüləri və loglar təqdim edir.

CI üçün tövsiyələr

CI-da testlərin icrasını sürətləndirmək üçün --workers flaqı ilə şardinqdən (paralelləşdirmə) istifadə etmək tövsiyə olunur. Detox test fayllarını avtomatik olaraq bir neçə simulyator arasında bölüşdürür. Quraşdırma müddətini qısaltmaq üçün tətbiq buildlərinin işə salmalar arasında keşləşdirilməsi də faydalıdır.

# GitHub Actions — Detox-un iOS-da işə salınması
- 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-un ən yaxşı təcrübələri

Sabit və sürətli E2E-testlər üçün bir neçə qaydaya riayət etmək tövsiyə olunur. sleep()-dən qaçın — Detox avtomatik sinxronizasiya təmin edir və açıq gecikmələr testləri yalnız ləngidir və qeyri-sabit edir. Test timing səbəbindən uğursuz olarsa, əvvəlcə sinxronizasiyanın söndürülmədiyini yoxlayın. Həmçinin testləri funksiyalara görə qruplaşdırmaq və onları müstəqil işə salmaq faydalıdır — bu, uğursuzluq səbəbinin tapılmasını asanlaşdırır.

Device metodlarından istifadə

Detox vəziyyəti idarə etmək üçün bir neçə device metodu təqdim edir: device.reloadReactNative() bendlı yenidən yükləyir, device.launchNewApp() tətbiqi yeni parametrlərlə işə salır, device.sendToHome() tətbiqi minimuma endirir. device.setURLBlacklist() müəyyən URL-ləri sinxronizasiyadan çıxarmağa imkan verir ki, bu da analitika və long-polling birləşmələri üçün faydalıdır.

Test məlumatlarının təşkili

Hər bir test üçün izolə edilmiş vəziyyət yaratmaq tövsiyə olunur. Tətbiqi device.reloadReactNative() vasitəsilə yenidən yükləmək üçün beforeEach istifadə edin. Xüsusi məlumat tələb edən testlər üçün serverdə məlumat hazırlamaq üçün fabriklər və ya API müştəriləri yaradın. Testlər arasında asılılıqlardan qaçın — hər bir test müstəqil olmalıdır.

WebView ilə iş

Detox WebView testini web.element() və web.invoke() metodları vasitəsilə dəstəkləyir. Veb elementləri ilə qarşılıqlı əlaqə üçün by.web(id, css və ya className) istifadə olunur. WebView-in yüklənmə üçün əlavə vaxt tələb etdiyini xatırlamaq vacibdir — sinxronizasiya işləmirsə, waitFor vasitəsilə yüklənmə gözləməsi əlavə edin.

// WebView-in Detox-da test edilməsi
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 plaqini vasitəsilə ekran görüntülərinin müqayisəsini dəstəkləyir. Ekran görüntüləri vizual reqressiyaları aşkar etməyə imkan verir: yerdəyişmiş elementlər, səhv rənglər, itkin ikonalar. Sabit ekran görüntüləri üçün animasiyaları söndürün və sabit simulyator ölçüsündən istifadə edin.

Detox problemlərinin diaqnostikası

Detox-un ən çox rast gəlinən problemləri sinxronizasiya ilə bağlıdır: sonsuz animasiyalar, uzun şəbəkə sorğuları və ya donmuş taymerlər. --loglevel trace flaqı ilə loglama Detox-un hansı resursları gözlədiyini göstərir. Detox donarsa — problemli kod sahəsi üçün device.disableSynchronization() istifadə edin.

Simulyatorla problemlər

iOS simulyatorunda Detox tətbiqin iphonesimulator konfiqurasiyası ilə xcodebuild vasitəsilə əvvəlcədən qurulmasını tələb edir. Ümumi səhv — Debug əvəzinə Release sxeminin istifadəsi, test flaqlarını söndürür. Android üçün AVD-nin tətbiqinizlə uyğun API ilə yaradıldığına və Intel HAXM sürətləndirilməsinin aktiv olduğuna əmin olun. macOS-də CI mühitləri üçün GitHub Actions-dan macOS-ranneri ilə istifadə etmək rahatdır, burada Xcode və simulyatorlar artıq əvvəlcədən quraşdırılıb.

Test timeautları

Testlər mütəmadi olaraq timeaut səbəbindən uğursuz olarsa, yoxlayın: sinxronizasiyanın qlobal səviyyədə söndürülmədiyini, tətbiq kodunda təmizlənmədən setTimeout və ya setInterval istifadə edilmədiyini və uzunmüddətli əməliyyatın əsas axını bloklamadığını. Bəzən detoxrc.js-də testRunner.args.jest.$.testTimeout vasitəsilə timeoutu artırmaq kömək edir. Problemli sahələri tapmaq üçün Detox izləmə loglamasını aktivləşdirin — bu, freymvork tərəfindən hazırda hansı resursların və taymerlərin gözlənildiyini göstərir.

Artefaktlar və hesabatlar

Testlərin icrasından sonra Detox artefaktlar yaradır: uğursuz testlərin ekran görüntüləri, tətbiq logları və JUnit XML hesabatları. Ekran görüntüləri test uğursuz olduqda avtomatik çəkilir və problemi vizual olaraq müəyyən etməyə kömək edir. CI üçün artefaktlar bulud yaddaşına yüklənir və uğursuzluq səbəblərini təhlil etmək üçün veb interfeysi vasitəsilə əlçatan olur.