Detox: ano ito, mga prinsipyo ng paggana at E2E-testing

Ano ang Detox

Detox ay isang framework para sa komprehensibong (E2E) testing ng mobile application, na binuo ng Wix noong 2017. Ito ay para sa React Native projects, ngunit sumusuporta rin sa purong native application sa iOS at Android. Gumagana ang Detox sa gray-box model, ibig sabihin ay may access ito sa internal na mekanismo ng application.

Pagkakaiba sa ibang E2E-framework

Ang pangunahing pagkakaiba ng Detox sa Appium o Calabash ay awtomatikong pag-sync sa application. Hinihintay ng framework ang pagkumpleto ng animation, network request, at pagproseso ng event bago isagawa ang susunod na aksyon. Ito ay ganap na nag-aalis ng pangangailangan para sa Thread.sleep() o waitForElement na nagpapabagal sa test.

Mga sinusuportahang platform

Sinusuportahan ng Detox ang iOS (sa pamamagitan ng XCTest at Xcode) at Android (sa pamamagitan ng Espresso at UI Automator). Para sa React Native application, buong suporta ay ibinibigay para sa Fabric at lumang arkitektura. Sa iOS, test ay pinapatakbo sa simulator, sa Android — sa emulator o aktwal na device.

Arkitektura ng Detox at gray-box model

Ang arkitektura ng Detox ay binubuo ng tatlong pangunahing component: Detox CLI, Detox test runner, at Detox Native Driver. Detox CLI ay namamahala sa pagbuo ng application, pag-install, at pagpapatakbo ng test. Ang test runner (Jest o Mocha) ay nagpapatupad ng test scenario at nakikipag-ugnayan sa application sa pamamagitan ng WebSocket.

Gray-box approach

Ang gray-box testing ay nangangahulugan na ang Detox ay may access sa internal state ng application sa pamamagitan ng native bridge. Sinusubaybayan ng framework ang network request, animation, timer, at operation queue. Kapag ang lahat ng queue ay walang laman — itinuturing ng Detox na handa na ang application para sa susunod na hakbang.

Mekanismo ng pag-sync

Ang pag-sync ay batay sa pagsubaybay sa main thread ng application. Hinihintay ng Detox ang pagkumpleto ng lahat ng animation, pagbalik ng HTTP request, at pag-execute ng event handler. Kung ang test ay mag-freeze dahil sa walang katapusang animation — maaaring puwersahang i-off ang pag-sync para sa isang partikular na code block.

// Pag-off ng pag-sync para sa problematikong bahagi
await device.disableSynchronization();
// Aksyon na may mahabang animation
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Pag-install at configuration ng Detox

Ang pag-install ng Detox ay nagsisimula sa pagdagdag ng package sa pamamagitan ng npm o yarn. Pagkatapos ng pag-install, dapat gumawa ng configuration file na .detoxrc.js na naglalarawan sa build at run settings para sa bawat platform. Ang Detox ay gumagamit ng sarili nitong build type para sa iOS, batay sa Xcode configuration.

Basic configuration

Kasama sa configuration ang path sa application (app), uri ng builder (build), build argumento, at setting ng device (device). Para sa iOS ginagamit ang appleSimulator, para sa Android — androidEmulator. Maaari ring tukuyin ang launch argument tulad ng wika o rehiyon ng simulator.

// .detoxrc.js — halimbawa ng configuration
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' } }
  }
};

Mga command sa pagpapatakbo

Pagkatapos ng configuration, available ang mga command: detox build — pagbuo ng application na may test flag at detox test — pagpapatakbo ng test. Sinusuportahan ng Detox ang parallel na pagpapatakbo sa maraming device sa pamamagitan ng --workers flag.

Pagsusulat ng test gamit ang Detox

Ang Detox test ay isinusulat sa JavaScript o TypeScript gamit ang API na batay sa paghahanap ng element (matchers) at aksyon (actions). Matchers ay nagbibigay-daan upang makahanap ng elemento ayon sa ID, text, uri, o posisyon sa screen. Ang Actions ay gumagawa ng tap, text input, swipe, at scroll.

Structure ng test scenario

Ang tipikal na test ay mukhang isang sequence: hanapin ang element → gawin ang aksyon → suriin ang resulta. Para sa pagsusuri, ginagamit ang expect-API na may matchers ayon sa presensya, visibility, o text ng element. Sinusuportahan ng Detox ang describe/it syntax sa pamamagitan ng integrasyon sa 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();
  });
});

Paggawa gamit ang gestures

Sinusuportahan ng Detox ang lahat ng sikat na gesture: tap, longPress, swipe, scroll, pinch, multiTap. Para sa scroll maaaring tukuyin ang direksyon, bilis, at posisyon ng paghinto. Ito ay nagbibigay-daan sa pagtest ng mga kumplikadong scenario tulad ng pull-to-refresh o carousel.

Integrasyon ng Detox sa CI/CD

Mahusay na naka-integrate ang Detox sa mga sikat na CI system: GitHub Actions, CircleCI, Bitrise, at Jenkins. Para sa pagpapatakbo sa CI, kailangan i-configure ang virtual simulator iOS (walang GUI) at Android emulator na may hardware acceleration. Nagbibigay ang Detox ng artifacts — screenshot at log — para sa pagsusuri ng mga bagsak na test.

Rekomendasyon para sa CI

Para mapabilis ang pagpapatakbo ng test sa CI, inirerekomenda ang paggamit ng sharding (parallelization) na may --workers flag. Awtomatikong namamahagi ang Detox ng test file sa maraming simulator. Kapaki-pakinabang din ang pag-cache ng build ng application sa pagitan ng pagpapatakbo upang bawasan ang oras ng pagbuo.

# GitHub Actions — pagpapatakbo ng Detox sa 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

Pinakamahusay na kasanayan sa Detox

Para sa matatag at mabilis na E2E test, inirerekomenda na sundin ang ilang patakaran. Iwasan ang sleep() — nagbibigay ang Detox ng awtomatikong pag-sync, at ang explicit na pagkaantala ay nagpapabagal lamang ng test at ginagawa itong hindi matatag. Kung ang test ay bumagsak dahil sa timing, suriin muna kung hindi naka-off ang pag-sync. Kapaki-pakinabang din ang paggrupo ng test ayon sa feature at pagpapatakbo ng mga ito nang independyente — pinapadali nito ang paghahanap ng dahilan ng pagbagsak.

Paggamit ng device method

Nagbibigay ang Detox ng ilang device method para sa pamamahala ng estado: device.reloadReactNative() ay nagre-reload ng bundle, device.launchNewApp() ay naglulunsad ng application na may bagong parameter, device.sendToHome() ay nagmi-minimize ng application. device.setURLBlacklist() ay nagbibigay-daan upang ibukod ang partikular na URL mula sa pag-sync, na kapaki-pakinabang para sa analytics at long-polling na koneksyon.

Organisasyon ng test data

Para sa bawat test, inirerekomenda na gumawa ng isolated state. Gamitin ang beforeEach para i-reload ang application sa pamamagitan ng device.reloadReactNative(). Para sa test na nangangailangan ng partikular na data, gumawa ng factory o API client para ihanda ang data sa server. Iwasan ang dependency sa pagitan ng test — bawat test ay dapat maging independyente.

Paggawa gamit ang WebView

Sinusuportahan ng Detox ang pagtest ng WebView sa pamamagitan ng web.element() at web.invoke() method. Para sa pakikipag-ugnayan sa web element, ginagamit ang by.web(id, css, o className). Mahalagang tandaan na ang WebView ay nangangailangan ng karagdagang oras para mag-load — kung hindi gumagana ang pag-sync, magdagdag ng paghihintay sa pag-load sa pamamagitan ng waitFor.

// Pagtest ng WebView sa 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');

Screenshot testing

Sinusuportahan ng Detox ang paghahambing ng screenshot sa pamamagitan ng detox-image-matching plugin. Screenshot ay nagbibigay-daan upang makita ang visual regression: mga elementong lumipat, maling kulay, nawawalang icon. Para sa matatag na screenshot, i-off ang animation at gumamit ng fixed na laki ng simulator.

Diagnosis ng problema sa Detox

Ang pinakakaraniwang problema sa Detox ay nauugnay sa pag-sync: walang katapusang animation, mahabang network request, o natigil na timer. Logging na may --loglevel trace flag ay nagpapakita kung anong resources ang hinihintay ng Detox. Kung mag-freeze ang Detox — gamitin ang device.disableSynchronization() para sa problematikong bahagi ng code.

Problema sa simulator

Sa iOS simulator, ang Detox ay nangangailangan ng paunang pagbuo ng application sa pamamagitan ng xcodebuild na may iphonesimulator configuration. Karaniwang pagkakamali ay paggamit ng Release scheme sa halip na Debug, na nag-o-off ng test flag. Para sa Android, tiyakin na ang AVD ay ginawa gamit ang API na tugma sa iyong application at ang Intel HAXM acceleration ay naka-enable. Para sa CI environment sa macOS, maginhawang gamitin ang GitHub Actions na may macOS runner, kung saan pre-installed na ang Xcode at simulator.

Timeout ng test

Kung ang test ay regular na bumagsak dahil sa timeout, suriin: kung ang pag-sync ay hindi naka-off globally, kung sa code ng application ay hindi ginagamit ang setTimeout o setInterval nang walang paglilinis, at kung ang main thread ay hindi naka-block ng mahabang operasyon. Minsan nakakatulong ang pagtaas ng timeout sa detoxrc.js sa pamamagitan ng testRunner.args.jest.$.testTimeout. Para sa paghahanap ng problematikong bahagi, i-enable ang Detox tracing logging — ipinapakita nito kung anong resources at timer ang kasalukuyang hinihintay ng framework.

Artifacts at report

Pagkatapos ng pagpapatakbo ng test, gumagawa ang Detox ng artifacts: screenshot ng bagsak na test, log ng application, at XML JUnit report. Screenshot ay awtomatikong ginagawa kapag bumagsak ang test at tumutulong na makita ang problema nang biswal. Para sa CI, ang artifacts ay ina-upload sa cloud storage at accessible sa pamamagitan ng web interface para sa pagsusuri ng dahilan ng pagbagsak.