Detox: apa itu, prinsip kerja dan E2E-testing

Apa itu Detox

Detox adalah framework untuk pengujian menyeluruh (E2E) aplikasi mobile, dikembangkan oleh perusahaan Wix pada tahun 2017. Framework ini ditujukan untuk proyek React Native, tetapi juga mendukung aplikasi native murni di iOS dan Android. Detox bekerja dengan model gray-box, yang berarti memiliki akses ke mekanisme internal aplikasi.

Perbedaan dari framework E2E lainnya

Perbedaan utama Detox dari Appium atau Calabash adalah sinkronisasi otomatis dengan aplikasi. Framework menunggu penyelesaian animasi, permintaan jaringan, dan pemrosesan peristiwa sebelum melakukan tindakan berikutnya. Ini sepenuhnya menghilangkan kebutuhan akan Thread.sleep() atau waitForElement yang memperlambat tes.

Platform yang didukung

Detox mendukung iOS (melalui XCTest dan Xcode) dan Android (melalui Espresso dan UI Automator). Untuk aplikasi React Native, dukungan penuh disediakan untuk Fabric dan arsitektur lama. Di iOS, tes dijalankan di simulator, di Android — di emulator atau perangkat nyata.

Arsitektur Detox dan model gray-box

Arsitektur Detox terdiri dari tiga komponen kunci: Detox CLI, Detox test runner, dan Detox Native Driver. Detox CLI mengelola pembangunan aplikasi, instalasi, dan menjalankan tes. Test runner (Jest atau Mocha) menjalankan skenario tes dan berkomunikasi dengan aplikasi melalui WebSocket.

Pendekatan gray-box

Pengujian gray-box berarti Detox memiliki akses ke status internal aplikasi melalui jembatan native. Framework melacak permintaan jaringan, animasi, timer, dan antrian operasi. Ketika semua antrian kosong — Detox menganggap aplikasi siap untuk langkah berikutnya.

Mekanisme sinkronisasi

Sinkronisasi didasarkan pada pelacakan thread utama (main thread) aplikasi. Detox menunggu sampai semua animasi selesai, permintaan HTTP mengembalikan respons, dan penangan peristiwa dieksekusi. Jika tes macet karena animasi tak terbatas — sinkronisasi dapat dimatikan secara paksa untuk blok kode tertentu.

// Menonaktifkan sinkronisasi untuk bagian bermasalah
await device.disableSynchronization();
// Tindakan dengan animasi panjang
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Instalasi dan konfigurasi Detox

Instalasi Detox dimulai dengan menambahkan paket melalui npm atau yarn. Setelah instalasi, file konfigurasi .detoxrc.js harus dibuat, yang menjelaskan pengaturan pembangunan dan eksekusi untuk setiap platform. Detox menggunakan tipe build sendiri untuk iOS, berdasarkan konfigurasi Xcode.

Konfigurasi dasar

Konfigurasi mencakup jalur ke aplikasi (app), tipe builder (build), argumen pembangunan, dan pengaturan perangkat (device). Untuk iOS digunakan appleSimulator, untuk Android — androidEmulator. Juga dapat ditentukan argumen peluncuran, seperti bahasa atau region simulator.

// .detoxrc.js — contoh konfigurasi
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' } }
  }
};

Perintah menjalankan

Setelah konfigurasi, perintah tersedia: detox build — membangun aplikasi dengan flag tes dan detox test — menjalankan tes. Detox mendukung eksekusi paralel pada beberapa perangkat melalui flag --workers.

Menulis tes dengan Detox

Test Detox ditulis dalam JavaScript atau TypeScript menggunakan API berbasis pencarian elemen (matchers) dan tindakan (actions). Matchers memungkinkan menemukan elemen berdasarkan ID, teks, tipe, atau posisi di layar. Actions melakukan ketukan, input teks, gesekan, dan pengguliran.

Struktur skenario tes

Tes tipikal terlihat sebagai urutan: temukan elemen → lakukan tindakan → periksa hasil. Untuk pemeriksaan digunakan expect-API dengan matchers berdasarkan keberadaan, visibilitas, atau teks elemen. Detox mendukung sintaks describe/it melalui integrasi dengan Jest.

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

Bekerja dengan gesture

Detox mendukung semua gesture populer: tap, longPress, swipe, scroll, pinch, multiTap. Untuk scroll dapat ditentukan arah, kecepatan, dan posisi berhenti. Ini memungkinkan pengujian skenario kompleks seperti pull-to-refresh atau korsel.

Integrasi Detox ke CI/CD

Detox terintegrasi dengan baik dengan sistem CI populer: GitHub Actions, CircleCI, Bitrise, dan Jenkins. Untuk menjalankan di CI, perlu dikonfigurasi simulator virtual iOS (tanpa GUI) dan emulator Android dengan akselerasi perangkat keras. Detox menyediakan artefak — tangkapan layar dan log — untuk analisis tes yang gagal.

Rekomendasi untuk CI

Untuk mempercepat eksekusi tes di CI, disarankan menggunakan sharding (paralelisasi) dengan flag --workers. Detox secara otomatis mendistribusikan file tes di antara beberapa simulator. Juga berguna untuk menyimpan cache build aplikasi di antara eksekusi untuk mengurangi waktu pembangunan.

# GitHub Actions — menjalankan Detox di iOS
- 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

Praktik terbaik Detox

Untuk tes E2E yang stabil dan cepat, disarankan mengikuti beberapa aturan. Hindari sleep() — Detox menyediakan sinkronisasi otomatis, dan penundaan eksplisit hanya memperlambat tes dan membuatnya tidak stabil. Jika tes gagal karena timing, pertama periksa apakah sinkronisasi tidak dimatikan. Juga berguna untuk mengelompokkan tes berdasarkan fitur dan menjalankannya secara independen — ini menyederhanakan pencarian penyebab kegagalan.

Menggunakan metode device

Detox menyediakan beberapa metode device untuk mengelola status: device.reloadReactNative() memuat ulang bundle, device.launchNewApp() meluncurkan aplikasi dengan parameter baru, device.sendToHome() meminimalkan aplikasi. device.setURLBlacklist() memungkinkan mengecualikan URL tertentu dari sinkronisasi, yang berguna untuk analitik dan koneksi long-polling.

Organisasi data tes

Untuk setiap tes, disarankan membuat status terisolasi. Gunakan beforeEach untuk memuat ulang aplikasi melalui device.reloadReactNative(). Untuk tes yang memerlukan data spesifik, buat pabrik atau klien API untuk menyiapkan data di server. Hindari ketergantungan antar tes — setiap tes harus independen.

Bekerja dengan WebView

Detox mendukung pengujian WebView melalui metode web.element() dan web.invoke(). Untuk interaksi dengan elemen web digunakan by.web(id, css, atau className). Penting untuk diingat bahwa WebView memerlukan waktu tambahan untuk memuat — jika sinkronisasi tidak berfungsi, tambahkan penantian pemuatan melalui waitFor.

// Menguji WebView di Detox
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');

Pengujian tangkapan layar

Detox mendukung perbandingan tangkapan layar melalui plugin detox-image-matching. Tangkapan layar memungkinkan mendeteksi regresi visual: elemen bergeser, warna salah, ikon hilang. Untuk tangkapan layar yang stabil, matikan animasi dan gunakan ukuran simulator tetap.

Diagnostik masalah Detox

Masalah Detox yang paling umum terkait dengan sinkronisasi: animasi tak terbatas, permintaan jaringan panjang, atau timer macet. Logging dengan flag --loglevel trace menunjukkan sumber daya apa yang ditunggu Detox. Jika Detox macet — gunakan device.disableSynchronization() untuk bagian kode yang bermasalah.

Masalah dengan simulator

Di simulator iOS, Detox memerlukan pembangunan aplikasi sebelumnya melalui xcodebuild dengan konfigurasi iphonesimulator. Kesalahan umum adalah menggunakan skema Release alih-alih Debug, yang menonaktifkan flag pengujian. Untuk Android, pastikan AVD dibuat dengan API yang kompatibel dengan aplikasi Anda dan akselerasi Intel HAXM diaktifkan. Untuk lingkungan CI di macOS, nyaman menggunakan GitHub Actions dengan runner macOS, di mana Xcode dan simulator sudah terinstal sebelumnya.

Timeout tes

Jika tes secara teratur gagal karena timeout, periksa: apakah sinkronisasi tidak dimatikan secara global, apakah dalam kode aplikasi tidak digunakan setTimeout atau setInterval tanpa pembersihan, dan apakah thread utama tidak diblokir oleh operasi yang panjang. Terkadang meningkatkan timeout di detoxrc.js melalui testRunner.args.jest.$.testTimeout membantu. Untuk menemukan bagian yang bermasalah, aktifkan logging pelacakan Detox — ini menunjukkan sumber daya dan timer apa yang saat ini ditunggu oleh framework.

Artefak dan laporan

Setelah eksekusi tes, Detox membuat artefak: tangkapan layar tes yang gagal, log aplikasi, dan laporan XML JUnit. Tangkapan layar dibuat secara otomatis saat tes gagal dan membantu mengidentifikasi masalah secara visual. Untuk CI, artefak diunggah ke penyimpanan cloud dan dapat diakses melalui antarmuka web untuk analisis penyebab kegagalan.