Detox: vad det är, arbetsprinciper och E2E-testning

Vad är Detox

Detox är ett ramverk för omfattande (E2E) testning av mobila applikationer, utvecklat av Wix 2017. Det är avsett för React Native-projekt men stöder även helt native applikationer på iOS och Android. Detox fungerar enligt gray-box-modellen, vilket innebär tillgång till applikationens interna mekanismer.

Skillnad från andra E2E-ramverk

Den största skillnaden mellan Detox och Appium eller Calabash är automatisk synkronisering med applikationen. Ramverket väntar på att animationer, nätverksförfrågningar och händelsebearbetning ska slutföras innan det utför nästa åtgärd. Detta eliminerar helt behovet av Thread.sleep() eller waitForElement, som saktar ner testerna.

Plattformar som stöds

Detox stöder iOS (via XCTest och Xcode) och Android (via Espresso och UI Automator). För React Native-applikationer ges fullt stöd för Fabric och den gamla arkitekturen. På iOS körs tester på simulatorn, på Android — på emulatorn eller en fysisk enhet.

Detox-arkitektur och gray-box-modell

Detox-arkitekturen består av tre nyckelkomponenter: Detox CLI, Detox test-runner och Detox Native Driver. Detox CLI hanterar bygget av applikationen, installation och testkörning. Test-routern (Jest eller Mocha) utför testscenarier och kommunicerar med applikationen via WebSocket.

Gray-box-metod

Gray-box-testning innebär att Detox har tillgång till applikationens interna tillstånd via en native brygga. Ramverket övervakar nätverksförfrågningar, animationer, timers och operationskön. När alla köer är tomma — anser Detox att applikationen är redo för nästa steg.

Synkroniseringsmekanism

Synkronisering bygger på övervakning av applikationens huvudtråd (main thread). Detox väntar tills alla animationer är klara, HTTP-förfrågningar har returnerat svar och händelsehanterare har körts. Om testet fryser på grund av en oändlig animation — kan synkronisering tvångsstängas av för ett specifikt kodblock.

// Stäng av synkronisering för problematiskt avsnitt
await device.disableSynchronization();
// Åtgärd med lång animation
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Installation och konfiguration av Detox

Installation av Detox börjar med att lägga till paketet via npm eller yarn. Efter installation måste en konfigurationsfil .detoxrc.js skapas som beskriver bygg- och körinställningarna för varje plattform. Detox använder sin egen byggtyp för iOS, baserad på Xcode-konfiguration.

Grundläggande konfiguration

Konfigurationen inkluderar sökvägen till applikationen (app), buildertyp (build), byggargument och enhetsinställningar (device). För iOS används appleSimulator, för Android — androidEmulator. Man kan också ange startargument som språk eller region för simulatorn.

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

Körkommandon

Efter konfiguration finns kommandona: detox build — bygg applikationen med testflaggor och detox test — kör testerna. Detox stöder parallellkörning på flera enheter via flaggan --workers.

Skriva tester med Detox

Detox-tester skrivs i JavaScript eller TypeScript med ett API baserat på elementsökning (matchers) och åtgärder (actions). Matchers gör det möjligt att hitta ett element efter ID, text, typ eller position på skärmen. Actions utför tryck, textinmatning, svep och scrollning.

Struktur för testscenario

Ett typiskt test ser ut som en sekvens: hitta elementet → utför åtgärden → kontrollera resultatet. För kontroller används expect-API med matchers baserat på förekomst, synlighet eller text för elementet. Detox stöder describe/it-syntax via integration med 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();
  });
});

Arbeta med gester

Detox stöder alla populära gester: tap, longPress, swipe, scroll, pinch, multiTap. För scroll kan riktning, hastighet och stopposition anges. Detta gör det möjligt att testa komplexa scenarier som pull-to-refresh eller karuseller.

Integrera Detox i CI/CD

Detox integreras väl med populära CI-system: GitHub Actions, CircleCI, Bitrise och Jenkins. För körning i CI krävs konfigurering av en virtuell simulator iOS (utan GUI) och en Android-emulator med hårdvaruacceleration. Detox tillhandahåller artefakter — skärmbilder och loggar — för analys av misslyckade tester.

Rekommendationer för CI

För att påskynda testkörning i CI rekommenderas användning av sharding (parallellisering) med flaggan --workers. Detox distribuerar automatiskt testfiler mellan flera simulatorer. Det är också användbart att cacha applikationsbyggen mellan körningar för att minska byggtiden.

# GitHub Actions — kör Detox på 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 bästa praxis

För stabila och snabba E2E-tester rekommenderas att följa några regler. Undvik sleep() — Detox tillhandahåller automatisk synkronisering och explicita fördröjningar saktar bara ner testerna och gör dem instabila. Om testet misslyckas på grund av timing, kontrollera först om synkroniseringen inte är avstängd. Det är också användbart att gruppera tester efter funktion och köra dem oberoende — detta förenklar att hitta orsaken till felet.

Användning av device-metoder

Detox tillhandahåller flera device-metoder för tillståndshantering: device.reloadReactNative() laddar om bundle, device.launchNewApp() startar applikationen med nya parametrar, device.sendToHome() minimerar applikationen. device.setURLBlacklist() gör det möjligt att utesluta vissa URL:er från synkronisering, vilket är användbart för analys och long-polling-anslutningar.

Organisering av testdata

För varje test rekommenderas att skapa ett isolerat tillstånd. Använd beforeEach för att ladda om applikationen via device.reloadReactNative(). För tester som kräver specifik data, skapa fabriker eller API-klienter för att förbereda data på servern. Undvik beroenden mellan tester — varje test bör vara oberoende.

Arbeta med WebView

Detox stöder testning av WebView via metoderna web.element() och web.invoke(). För interaktion med webelement används by.web(id, css eller className). Det är viktigt att komma ihåg att WebView kräver extra laddningstid — om synkronisering inte fungerar, lägg till väntan på laddning via waitFor.

// Testa WebView i 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');

Skärmbildstestning

Detox stöder jämförelse av skärmbilder via plugin-programmet detox-image-matching. Skärmbilder gör det möjligt att upptäcka visuella regressioner: förskjutna element, felaktiga färger, saknade ikoner. För stabila skärmbilder, stäng av animationer och använd en fast simulatorstorlek.

Diagnostik av Detox-problem

De vanligaste Detox-problemen är relaterade till synkronisering: oändliga animationer, långa nätverksförfrågningar eller fastnade timers. Loggning med flaggan --loglevel trace visar vilka resurser Detox väntar på. Om Detox fryser — använd device.disableSynchronization() för den problematiska koddelen.

Problem med simulatorn

På iOS-simulatorn kräver Detox föregående bygge av applikationen via xcodebuild med konfigurationen iphonesimulator. Ett vanligt misstag är att använda Release-schemat istället för Debug, vilket stänger av testflaggor. För Android, se till att AVD är skapad med API som är kompatibelt med din applikation och att Intel HAXM-acceleration är aktiverad. För CI-miljöer på macOS är det bekvämt att använda GitHub Actions med en macOS-runner, där Xcode och simulatorer redan är förinstallerade.

Test-timeouter

Om tester regelbundet misslyckas på grund av timeout, kontrollera: om synkronisering inte är avstängd globalt, om setTimeout eller setInterval används i applikationskoden utan rensning, och om huvudtråden inte blockeras av en långvarig operation. Ibland hjälper det att öka timeout i detoxrc.js via testRunner.args.jest.$.testTimeout. För att hitta problematiska delar, aktivera Detox-spårningsloggning — den visar vilka resurser och timers ramverket för närvarande väntar på.

Artefakter och rapporter

Efter testkörning skapar Detox artefakter: skärmbilder av misslyckade tester, applikationsloggar och JUnit XML-rapporter. Skärmbilder tas automatiskt vid testmisslyckande och hjälper till att visuellt identifiera problemet. För CI laddas artefakter upp till molnlagring och är tillgängliga via webbgränssnittet för analys av felorsaker.