Detox: co to je, principy fungování a E2E-testování

Co je Detox

Detox je framework pro komplexní (E2E) testování mobilních aplikací, vyvinutý společností Wix v roce 2017. Je určen pro projekty React Native, ale podporuje také čistě nativní aplikace na iOS a Androidu. Detox pracuje v modelu gray-box, což znamená přístup k vnitřním mechanismům aplikace.

Rozdíl od jiných E2E-frameworků

Hlavním rozdílem Detox oproti Appium nebo Calabash je automatická synchronizace s aplikací. Framework čeká na dokončení animací, síťových požadavků a zpracování událostí před provedením další akce. To zcela odstraňuje potřebu Thread.sleep() nebo waitForElement, které testy zpomalují.

Podporované platformy

Detox podporuje iOS (přes XCTest a Xcode) a Android (přes Espresso a UI Automator). Pro aplikace React Native je zajištěna plná podpora pro Fabric a starou architekturu. Na iOS se testy spouštějí na simulátoru, na Androidu — na emulátoru nebo reálném zařízení.

Architektura Detox a model gray-box

Architektura Detox se skládá ze tří klíčových komponent: Detox CLI, Detox test runner a Detox Native Driver. Detox CLI spravuje sestavení aplikace, instalaci a spouštění testů. Test runner (Jest nebo Mocha) provádí testovací scénáře a komunikuje s aplikací přes WebSocket.

Přístup gray-box

Testování gray-box znamená, že Detox má přístup k vnitřnímu stavu aplikace přes nativní most. Framework sleduje síťové požadavky, animace, časovače a frontu operací. Když jsou všechny fronty prázdné — Detox považuje aplikaci za připravenou k dalšímu kroku.

Mechanismus synchronizace

Synchronizace je založena na sledování hlavního vlákna (main thread) aplikace. Detox čeká, dokud se všechny animace nedokončí, HTTP požadavky nevrátí odpověď a obsluhy událostí se neprovedou. Pokud test zamrzne kvůli nekonečné animaci — lze vynutit vypnutí synchronizace pro konkrétní blok kódu.

// Vypnutí synchronizace pro problematickou část
await device.disableSynchronization();
// Akce s dlouhou animací
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Instalace a konfigurace Detox

Instalace Detox začíná přidáním balíčku přes npm nebo yarn. Po instalaci je třeba vytvořit konfigurační soubor .detoxrc.js, ve kterém jsou popsány nastavení sestavení a spouštění pro každou platformu. Detox používá vlastní typ sestavení pro iOS, založený na konfiguraci Xcode.

Základní konfigurace

Konfigurace zahrnuje cestu k aplikaci (app), typ builderu (build), argumenty sestavení a nastavení zařízení (device). Pro iOS se používá appleSimulator, pro Android — androidEmulator. Lze také zadat argumenty spuštění, jako je jazyk nebo oblast simulátoru.

// .detoxrc.js — příklad konfigurace
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' } }
  }
};

Příkazy spouštění

Po konfiguraci jsou k dispozici příkazy: detox build — sestavení aplikace s testovacími přepínači a detox test — spuštění testů. Detox podporuje paralelní spouštění na více zařízeních přes přepínač --workers.

Psaní testů v Detox

Testy Detox se píší v JavaScriptu nebo TypeScriptu pomocí API založeného na vyhledávání prvků (matchers) a akcích (actions). Matchers umožňují najít prvek podle identifikátoru, textu, typu nebo polohy na obrazovce. Actions provádějí klepnutí, zadávání textu, přejetí a rolování.

Struktura testovacího scénáře

Typický test vypadá jako sekvence: najdi prvek → proveď akci → zkontroluj výsledek. Pro kontrolu se používá expect-API s matchers podle přítomnosti, viditelnosti nebo textu prvku. Detox podporuje syntaxi describe/it prostřednictvím integrace s 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();
  });
});

Práce s gesty

Detox podporuje všechna populární gesta: tap, longPress, swipe, scroll, pinch, multiTap. Pro scroll lze zadat směr, rychlost a polohu zastavení. To umožňuje testovat složité scénáře, jako je pull-to-refresh nebo kolotoče.

Integrace Detox do CI/CD

Detox se dobře integruje s populárními CI systémy: GitHub Actions, CircleCI, Bitrise a Jenkins. Pro spuštění v CI je třeba nakonfigurovat virtuální simulátor iOS (bez GUI) a Android emulátor s hardwarovou akcelerací. Detox poskytuje artefakty — snímky obrazovky a protokoly — pro analýzu neúspěšných testů.

Doporučení pro CI

Pro urychlení běhu testů v CI se doporučuje použití sharding (paralelizace) s přepínačem --workers. Detox automaticky rozděluje testovací soubory mezi několik simulátorů. Užitečné je také ukládání buildů aplikace do mezipaměti mezi spuštěními pro zkrácení doby sestavení.

# GitHub Actions — spouštění Detox na 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

Nejlepší postupy Detox

Pro stabilní a rychlé E2E testy se doporučuje dodržovat několik pravidel. Vyhněte se sleep() — Detox poskytuje automatickou synchronizaci a explicitní zpoždění testy pouze zpomalují a činí je nestabilními. Pokud test selže kvůli načasování, nejprve zkontrolujte, zda není synchronizace vypnutá. Také je užitečné seskupovat testy podle funkcí a spouštět je nezávisle — to zjednodušuje hledání příčiny selhání.

Použití metod device

Detox poskytuje několik metod device pro správu stavu: device.reloadReactNative() znovu načte bundle, device.launchNewApp() spustí aplikaci s novými parametry, device.sendToHome() minimalizuje aplikaci. device.setURLBlacklist() umožňuje vyloučit určité URL ze synchronizace, což je užitečné pro analytiku a long-polling připojení.

Organizace testovacích dat

Pro každý test se doporučuje vytvořit izolovaný stav. Použijte beforeEach pro opětovné načtení aplikace pomocí device.reloadReactNative(). Pro testy vyžadující specifická data vytvářejte továrny nebo API klienty pro přípravu dat na serveru. Vyhněte se závislostem mezi testy — každý test by měl být nezávislý.

Práce s WebView

Detox podporuje testování WebView pomocí metod web.element() a web.invoke(). Pro interakci s webovými prvky se používá by.web(id, css nebo className). Je důležité si pamatovat, že WebView vyžaduje další čas na načtení — pokud synchronizace nefunguje, přidejte čekání na načtení pomocí waitFor.

// Testování WebView v 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');

Testování snímky obrazovky

Detox podporuje porovnávání snímků obrazovky pomocí pluginu detox-image-matching. Snímky obrazovky umožňují detekovat vizuální regrese: posunuté prvky, nesprávné barvy, chybějící ikony. Pro stabilní snímky vypněte animace a používejte pevnou velikost simulátoru.

Diagnostika problémů Detox

Nejčastější problémy Detox souvisejí se synchronizací: nekonečné animace, dlouhé síťové požadavky nebo zaseknuté časovače. Protokolování s přepínačem --loglevel trace ukazuje, jaké zdroje Detox očekává. Pokud Detox zamrzne — použijte device.disableSynchronization() pro problematickou část kódu.

Problémy se simulátorem

Na iOS simulátoru Detox vyžaduje předchozí sestavení aplikace pomocí xcodebuild s konfigurací iphonesimulator. Častou chybou je použití Release schématu místo Debug, které vypíná testovací přepínače. Pro Android se ujistěte, že AVD je vytvořen s API kompatibilním s vaší aplikací a že akcelerace Intel HAXM je zapnutá. Pro CI prostředí na macOS je vhodné použít GitHub Actions s macOS runnerem, kde jsou Xcode a simulátory již předinstalovány.

Časové limity testů

Pokud testy pravidelně selhávají kvůli časovému limitu, zkontrolujte: zda není synchronizace globálně vypnutá, zda v kódu aplikace nejsou použity setTimeout nebo setInterval bez čištění a zda hlavní vlákno není blokováno dlouhotrvající operací. Někdy pomůže zvýšení časového limitu v detoxrc.js přes testRunner.args.jest.$.testTimeout. Pro nalezení problematických částí zapněte trasovací protokolování Detox — ukazuje, jaké zdroje a časovače framework aktuálně očekává.

Artefakty a zprávy

Po běhu testů Detox vytváří artefakty: snímky obrazovky neúspěšných testů, protokoly aplikace a XML JUnit zprávy. Snímky obrazovky se pořizují automaticky při selhání testu a pomáhají vizuálně identifikovat problém. Pro CI se artefakty nahrávají do cloudového úložiště a jsou přístupné přes webové rozhraní pro analýzu příčin selhání.