Detox: шта је, принципи рада и E2E тестирање

Шта је Detox

Detox је оквир за свеобухватно (E2E) тестирање мобилних апликација, развијен од стране компаније Wix 2017. године. Намењен је React Native пројектима, али подржава и чисто native апликације на iOS и Android-у. Detox ради по gray-box моделу, што значи да има приступ унутрашњим механизмима апликације.

Разлика од других E2E оквира

Главна разлика Detox-а од Appium-а или Calabash-а је аутоматска синхронизација са апликацијом. Оквир чека завршетак анимација, мрежних захтева и обраде догађаја пре него што изврши следећу радњу. Ово потпуно уклања потребу за Thread.sleep() или waitForElement, који успоравају тестове.

Подржане платформе

Detox подржава iOS (путем XCTest и Xcode) и Android (путем Espresso и UI Automator). За React Native апликације обезбеђује пуну подршку за Fabric и стару архитектуру. На iOS-у тестови се покрећу на симулатору, на Android-у — на емулатору или стварном уређају.

Архитектура Detox-а и gray-box модел

Архитектура Detox-а се састоји од три кључне компоненте: Detox CLI, Detox test runner-а и Detox Native Driver-а. Detox CLI управља изградњом апликације, инсталацијом и покретањем тестова. Test runner (Jest или Mocha) извршава тест сценарије и комуницира са апликацијом путем WebSocket-а.

Gray-box приступ

Gray-box тестирање значи да Detox има приступ унутрашњем стању апликације путем native моста. Оквир прати мрежне захтеве, анимације, тајмере и ред операција. Када су сви редови празни — Detox сматра апликацију спремном за следећи корак.

Механизам синхронизације

Синхронизација се заснива на праћењу главне нити (main thread) апликације. Detox чека док се све анимације не заврше, HTTP захтеви не врате одговор и руковаоци догађајима не изврше. Ако тест стане због бесконачне анимације — могуће је присилно искључити синхронизацију за одређени блок кода.

// Искључивање синхронизације за проблематични део
await device.disableSynchronization();
// Радња са дугом анимацијом
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Инсталација и подешавање Detox-а

Инсталација Detox-а почиње додавањем пакета путем npm-а или yarn-а. Након инсталације потребно је креирати конфигурациону датотеку .detoxrc.js, у којој се описују поставке изградње и покретања за сваку платформу. Detox користи сопствени тип изградње за iOS, заснован на Xcode конфигурацији.

Основна конфигурација

Конфигурација укључује путању до апликације (app), тип градитеља (build), аргументе изградње и поставке уређаја (device). За iOS се користи appleSimulator, за Android — androidEmulator. Такође се могу навести аргументи покретања, као што су језик или регион симулатора.

// .detoxrc.js — пример конфигурације
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' } }
  }
};

Команде покретања

Након конфигурације доступне су команде: detox build — изградња апликације са тестним заставицама и detox test — покретање тестова. Detox подржава паралелно покретање на више уређаја путем заставице --workers.

Писање тестова у Detox-у

Тестови Detox-а се пишу у JavaScript или TypeScript коришћењем API-ја заснованог на проналажењу елемената (matchers) и радњама (actions). Matchers омогућавају проналажење елемента по идентификатору, тексту, типу или положају на екрану. Actions извршавају клик, унос текста, превлачење и скроловање.

Структура тест сценарија

Типичан тест изгледа као секвенца: пронађи елемент → изврши радњу → провери резултат. За проверу се користи expect-API са matchers-има по присуству, видљивости или тексту елемента. Detox подржава describe/it синтаксу кроз интеграцију са 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();
  });
});

Рад са гестовима

Detox подржава све популарне гестове: tap, longPress, swipe, scroll, pinch, multiTap. За scroll се може навести правац, брзина и позиција заустављања. Ово омогућава тестирање сложених сценарија, као што су pull-to-refresh или карусели.

Интеграција Detox-а у CI/CD

Detox се добро интегрише са популарним CI системима: GitHub Actions, CircleCI, Bitrise и Jenkins. За покретање у CI-ју потребно је подесити виртуелни симулатор iOS (без GUI) и Android емулатор са хардверским убрзањем. Detox обезбеђује артефакте — снимке екрана и дневнике — за анализу палих тестова.

Препоруке за CI

За убрзање извођења тестова у CI-ју препоручује се коришћење шардовања (паралелизација) са заставицом --workers. Detox аутоматски распоређује тестне датотеке између више симулатора. Такође је корисно кеширање изградњи апликације између покретања ради смањења времена изградње.

# GitHub Actions — покретање Detox-а на 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

Најбоље праксе Detox-а

За стабилне и брзе E2E тестове препоручује се поштовање неколико правила. Избегавајте sleep() — Detox обезбеђује аутоматску синхронизацију, а експлицитна кашњења само успоравају тестове и чине их нестабилним. Ако тест падне због тајминга, прво проверите да ли синхронизација није искључена. Такође је корисно груписање тестова по функцијама и њихово независно покретање — ово поједностављује проналажење узрока пада.

Коришћење device метода

Detox обезбеђује неколико device метода за управљање стањем: device.reloadReactNative() поново учитава bundle, device.launchNewApp() покреће апликацију са новим параметрима, device.sendToHome() минимизира апликацију. device.setURLBlacklist() омогућава искључивање одређених URL-ова из синхронизације, што је корисно за аналитику и long-polling конекције.

Организација тестних података

За сваки тест препоручује се креирање изолованог стања. Користите beforeEach за поновно учитавање апликације путем device.reloadReactNative(). За тестове који захтевају специфичне податке, креирајте фабрике или API клијенте за припрему података на серверу. Избегавајте зависности између тестова — сваки тест треба да буде независан.

Рад са WebView-ом

Detox подржава тестирање WebView-а путем метода web.element() и web.invoke(). За интеракцију са веб елементима користи се by.web(id, css или className). Важно је запамтити да WebView захтева додатно време за учитавање — ако синхронизација не ради, додајте чекање учитавања путем waitFor.

// Тестирање WebView-а у 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');

Тестирање снимцима екрана

Detox подржава поређење снимака екрана путем додатка detox-image-matching. Снимци екрана омогућавају откривање визуелних регресија: померени елементи, нетачне боје, недостајуће иконе. За стабилне снимке искључите анимације и користите фиксну величину симулатора.

Дијагностика проблема Detox-а

Најчешћи проблеми Detox-а везани су за синхронизацију: бесконачне анимације, дуги мрежни захтеви или заустављени тајмери. Евидентирање са заставицом --loglevel trace показује које ресурсе Detox чека. Ако Detox стане — користите device.disableSynchronization() за проблематични део кода.

Проблеми са симулатором

На iOS симулатору, Detox захтева претходну изградњу апликације путем xcodebuild са конфигурацијом iphonesimulator. Честа грешка је коришћење Release шеме уместо Debug, што искључује тестне заставице. За Android се уверите да је AVD креиран са API-јем компатибилним са вашом апликацијом и да је Intel HAXM убрзање укључено. За CI окружења на macOS-у погодно је користити GitHub Actions са macOS runner-ом, где су Xcode и симулатори већ прединсталирани.

Тајмаути тестова

Ако тестови редовно падају због тајмаута, проверите: да ли синхронизација није глобално искључена, да ли се у коду апликације не користе setTimeout или setInterval без чишћења, и да ли главна нит није блокирана дуготрајном операцијом. Понекад помаже повећање тајмаута у detoxrc.js преко testRunner.args.jest.$.testTimeout. За проналажење проблематичних делова укључите Detox трасерско евидентирање — оно показује које ресурсе и тајмере тренутно чека оквир.

Артефакти и извештаји

Након извођења тестова, Detox креира артефакте: снимке екрана палих тестова, дневнике апликације и XML JUnit извештаје. Снимци екрана се праве аутоматски при паду теста и помажу у визуелној идентификацији проблема. За CI артефакти се отпремају у облачно складиште и доступни су путем веб интерфејса за анализу узрока пада.