Detox: mi ez, működési elvek és E2E-tesztelés

Mi az a Detox

Detox egy keretrendszer mobilos alkalmazások átfogó (E2E) tesztelésére, amelyet a Wix fejlesztett ki 2017-ben. React Native projektekhez készült, de támogatja a teljesen natív iOS és Android alkalmazásokat is. A Detox gray-box modell szerint működik, ami azt jelenti, hogy hozzáfér az alkalmazás belső mechanizmusaihoz.

Különbség más E2E-keretrendszerektől

A Detox fő különbsége az Appium-hoz vagy Calabash-hoz képest az automatikus szinkronizáció az alkalmazással. A keretrendszer megvárja az animációk, hálózati kérések és eseményfeldolgozás befejeződését, mielőtt végrehajtaná a következő műveletet. Ez teljesen kiküszöböli a Thread.sleep() vagy waitForElement szükségességét, amelyek lassítják a teszteket.

Támogatott platformok

A Detox támogatja az iOS-t (XCTest és Xcode segítségével) és az Androidot (Espresso és UI Automator segítségével). A React Native alkalmazásokhoz teljes körű támogatást nyújt a Fabric és a régi architektúra számára. iOS-en a tesztek szimulátoron futnak, Androidon — emulátoron vagy valós eszközön.

Detox architektúra és gray-box modell

A Detox architektúra három kulcskomponensből áll: Detox CLI, Detox tesztfuttató és Detox Native Driver. Detox CLI kezeli az alkalmazás buildelését, telepítését és a tesztek futtatását. A tesztfuttató (Jest vagy Mocha) végrehajtja a tesztforgatókönyveket és WebSocket-en keresztül kommunikál az alkalmazással.

Gray-box megközelítés

A gray-box tesztelés azt jelenti, hogy a Detox hozzáfér az alkalmazás belső állapotához egy natív hídon keresztül. A keretrendszer figyeli a hálózati kéréseket, animációkat, időzítőket és a műveleti sort. Amikor minden sor üres — a Detox késznek tekinti az alkalmazást a következő lépésre.

Szinkronizációs mechanizmus

A szinkronizáció az alkalmazás fő szálának (main thread) nyomon követésén alapul. A Detox megvárja, amíg az összes animáció befejeződik, a HTTP-kérések visszatérnek és az eseménykezelők lefutnak. Ha a teszt egy végtelen animáció miatt lefagy — kényszeríthető a szinkronizáció kikapcsolása egy adott kódblokkhoz.

// Szinkronizáció kikapcsolása a problémás részhez
await device.disableSynchronization();
// Hosszú animációjú művelet
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Detox telepítése és konfigurálása

A Detox telepítése a csomag npm-en vagy yarn-on keresztüli hozzáadásával kezdődik. Telepítés után létre kell hozni a .detoxrc.js konfigurációs fájlt, amely leírja a build és futtatási beállításokat minden platformhoz. A Detox saját build típust használ iOS-hez, amely Xcode konfiguráción alapul.

Alap konfiguráció

A konfiguráció tartalmazza az alkalmazás elérési útját (app), a build típusát (build), a build argumentumokat és az eszközbeállításokat (device). iOS-hez appleSimulator, Androidhoz androidEmulator használatos. Megadhatók indítási argumentumok is, mint a szimulátor nyelve vagy régiója.

// .detoxrc.js — konfigurációs példa
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' } }
  }
};

Futtatási parancsok

Konfiguráció után elérhetők a parancsok: detox build — alkalmazás buildelése tesztjelzőkkel és detox test — tesztek futtatása. A Detox támogatja a párhuzamos futtatást több eszközön a --workers jelzővel.

Tesztek írása Detox-szal

A Detox tesztek JavaScript vagy TypeScript nyelven íródnak egy olyan API-val, amely elemkeresésen (matchers) és műveleteken (actions) alapul. Matchers lehetővé teszi egy elem megtalálását azonosító, szöveg, típus vagy képernyőn elfoglalt pozíció alapján. Az Actions kattintást, szövegbevitelt, húzást és görgetést végez.

A teszt forgatókönyv szerkezete

Egy tipikus teszt sorozatként néz ki: keresd meg az elemet → hajtsd végre a műveletet → ellenőrizd az eredményt. Az ellenőrzéshez expect-API-t használnak matchers-ekkel az elem megléte, láthatósága vagy szövege alapján. A Detox támogatja a describe/it szintaxist a Jest-tel való integráción keresztül.

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

Munka gesztusokkal

A Detox támogatja az összes népszerű gesztust: tap, longPress, swipe, scroll, pinch, multiTap. A scroll esetében megadható az irány, sebesség és a megállási pozíció. Ez lehetővé teszi olyan összetett forgatókönyvek tesztelését, mint a pull-to-refresh vagy a körhinták.

Detox integrálása CI/CD-be

A Detox jól integrálódik a népszerű CI-rendszerekkel: GitHub Actions, CircleCI, Bitrise és Jenkins. A CI-ben való futtatáshoz be kell állítani egy virtuális szimulátort iOS-hez (GUI nélkül) és egy Android emulátort hardveres gyorsítással. A Detox artefaktumokat — képernyőképeket és naplókat — biztosít a sikertelen tesztek elemzéséhez.

Javaslatok CI-hez

A tesztek CI-ben történő felgyorsításához ajánlott a sharding (párhuzamosítás) használata a --workers jelzővel. A Detox automatikusan elosztja a tesztfájlokat több szimulátor között. Az alkalmazás-buildek gyorsítótárazása is hasznos a futtatások között a build idő csökkentése érdekében.

# GitHub Actions — Detox futtatása iOS-en
- 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 legjobb gyakorlatai

A stabil és gyors E2E-tesztekhez ajánlott néhány szabály betartása. Kerülje a sleep() használatát — a Detox automatikus szinkronizációt biztosít, és az explicit késleltetések csak lassítják a teszteket és instabillá teszik azokat. Ha a teszt időzítés miatt meghiúsul, először ellenőrizze, hogy a szinkronizáció nincs-e kikapcsolva. A tesztek funkciók szerinti csoportosítása és független futtatása is hasznos — ez egyszerűsíti a hiba okának megtalálását.

Device metódusok használata

A Detox számos device metódust biztosít az állapot kezeléséhez: a device.reloadReactNative() újratölti a bundle-t, a device.launchNewApp() új paraméterekkel indítja az alkalmazást, a device.sendToHome() minimalizálja az alkalmazást. device.setURLBlacklist() lehetővé teszi bizonyos URL-ek kizárását a szinkronizációból, ami hasznos az analitika és a long-polling kapcsolatok számára.

Tesztadatok szervezése

Minden teszthez ajánlott elkülönített állapotot létrehozni. Használja a beforeEach-t az alkalmazás újratöltéséhez a device.reloadReactNative() segítségével. Azokhoz a tesztekhez, amelyek speciális adatokat igényelnek, hozzon létre gyárakat vagy API-klienseket az adatok szerveren történő előkészítéséhez. Kerülje a függőségeket a tesztek között — minden tesztnek függetlennek kell lennie.

Munka WebView-val

A Detox támogatja a WebView tesztelését a web.element() és web.invoke() metódusokon keresztül. A webelemekkel való interakcióhoz by.web(id, css vagy className) használatos. Fontos megjegyezni, hogy a WebView további betöltési időt igényel — ha a szinkronizáció nem működik, adjon hozzá betöltési várakozást a waitFor segítségével.

// WebView tesztelése Detox-szal
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');

Képernyőkép-tesztelés

A Detox támogatja a képernyőképek összehasonlítását a detox-image-matching bővítményen keresztül. Képernyőképek lehetővé teszik a vizuális regressziók észlelését: elmozdult elemek, helytelen színek, hiányzó ikonok. A stabil képernyőképekhez kapcsolja ki az animációkat és használjon rögzített szimulátorméretet.

Detox problémák diagnosztizálása

A Detox leggyakoribb problémái a szinkronizációhoz kapcsolódnak: végtelen animációk, hosszú hálózati kérések vagy lefagyott időzítők. Naplózás a --loglevel trace jelzővel megmutatja, milyen erőforrásokat vár a Detox. Ha a Detox lefagy — használja a device.disableSynchronization() metódust a problémás kódrészlethez.

Problémák a szimulátorral

iOS szimulátoron a Detox megköveteli az alkalmazás előzetes buildelését xcodebuild segítségével iphonesimulator konfigurációval. Gyakori hiba a Release séma használata Debug helyett, ami kikapcsolja a tesztjelzőket. Android esetében győződjön meg arról, hogy az AVD az alkalmazásával kompatibilis API-val készült és az Intel HAXM gyorsítás be van kapcsolva. macOS CI-környezetekhez kényelmes a GitHub Actions használata macOS futóval, ahol az Xcode és a szimulátorok már előre telepítve vannak.

Tesztek időtúllépése

Ha a tesztek rendszeresen időtúllépés miatt hiúsulnak meg, ellenőrizze: nincs-e globálisan kikapcsolva a szinkronizáció, nem használnak-e setTimeout vagy setInterval függvényeket tisztítás nélkül az alkalmazás kódjában, és nem blokkolja-e a fő szálat egy hosszú művelet. Néha segít az időtúllépés növelése a detoxrc.js fájlban a testRunner.args.jest.$.testTimeout segítségével. A problémás részek megtalálásához kapcsolja be a Detox nyomkövetési naplózását — megmutatja, hogy a keretrendszer jelenleg milyen erőforrásokra és időzítőkre vár.

Artefaktumok és jelentések

A tesztek futtatása után a Detox artefaktumokat hoz létre: képernyőképeket a sikertelen tesztekről, alkalmazásnaplókat és JUnit XML jelentéseket. Képernyőképek automatikusan készülnek a teszt meghiúsulásakor, és segítenek vizuálisan azonosítani a problémát. CI esetében az artefaktumok feltöltődnek a felhőtárhelyre, és webes felületen keresztül érhetők el a meghiúsulás okainak elemzéséhez.