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 χρησιμοποιεί τον δικό του τύπο build για iOS, βασισμένο στη διαμόρφωση Xcode.

Βασική παραμετροποίηση

Η παραμετροποίηση περιλαμβάνει τη διαδρομή προς την εφαρμογή (app), τον τύπο builder (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, συνιστάται η χρήση sharding (παραλληλοποίηση) με τη σημαία --workers. Το Detox κατανέμει αυτόματα τα αρχεία δοκιμών μεταξύ πολλών προσομοιωτών. Επίσης, χρήσιμη είναι η προσωρινή αποθήκευση builds της εφαρμογής μεταξύ εκτελέσεων για μείωση του χρόνου δημιουργίας.

# 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, τα τεχνουργήματα μεταφορτώνονται σε αποθήκευση cloud και είναι προσβάσιμα μέσω διεπαφής ιστού για ανάλυση αιτιών αποτυχίας.