Detox: nima, ishlash prinsiplari va E2E-test

Detox nima

Detox — 2017 yilda Wix kompaniyasi tomonidan ishlab chiqilgan mobil ilovalarni kompleks (E2E) test qilish uchun freymvorkdir. U React Native loyihalari uchun mo'ljallangan, ammo iOS va Android da to'liq native ilovalarni ham qo'llab-quvvatlaydi. Detox gray-box modeli bilan ishlaydi, ya'ni ilovaning ichki mexanizmlariga kirish imkoniga ega.

Boshqa E2E-freymvorklardan farqi

Detox ning Appium yoki Calabash dan asosiy farqi ilova bilan avtomatik sinxronizatsiyadir. Freymvork keyingi harakatni bajarishdan oldin animatsiyalar, tarmoq so'rovlari va hodisalarni qayta ishlash tugashini kutadi. Bu testlarni sekinlashtiradigan Thread.sleep() yoki waitForElement ga bo'lgan ehtiyojni butunlay yo'q qiladi.

Qo'llab-quvvatlanadigan platformalar

Detox iOS (XCTest va Xcode orqali) va Android (Espresso va UI Automator orqali) platformalarini qo'llab-quvvatlaydi. React Native ilovalari uchun Fabric va eski arxitektura uchun to'liq qo'llab-quvvatlash ta'minlanadi. iOS da testlar simulyatorda, Android da esa emulyator yoki haqiqiy qurilmada ishga tushiriladi.

Detox arxitekturasi va gray-box modeli

Detox arxitekturasi uchta asosiy komponentdan iborat: Detox CLI, Detox test-runneri va Detox Native Driver. Detox CLI ilovani qurish, o'rnatish va testlarni ishga tushirishni boshqaradi. Test-runner (Jest yoki Mocha) test stsenariylarini bajaradi va WebSocket orqali ilova bilan aloqa qiladi.

Gray-box yondashuvi

Gray-box testi Detox native ko'prik orqali ilovaning ichki holatiga kirish imkoniga ega degani. Freymvork tarmoq so'rovlari, animatsiyalar, taymerlar va operatsiyalar navbatini kuzatadi. Barcha navbatlar bo'sh bo'lganda — Detox ilovani keyingi qadamga tayyor deb hisoblaydi.

Sinxronizatsiya mexanizmi

Sinxronizatsiya ilovaning asosiy oqimini (main thread) kuzatishga asoslangan. Detox barcha animatsiyalar tugashini, HTTP so'rovlari javob qaytarishini va hodisa ishlovchilari bajarilishini kutadi. Agar test cheksiz animatsiya tufayli qotib qolsa — muayyan kod bloki uchun sinxronizatsiyani majburiy o'chirish mumkin.

// Muammoli qism uchun sinxronizatsiyani o'chirish
await device.disableSynchronization();
// Uzoq animatsiyali harakat
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Detox o'rnatish va sozlash

Detox o'rnatish npm yoki yarn orqali paket qo'shish bilan boshlanadi. O'rnatishdan so'ng har bir platforma uchun qurish va ishga tushirish sozlamalarini tavsiflovchi .detoxrc.js konfiguratsiya fayli yaratilishi kerak. Detox iOS uchun Xcode konfiguratsiyasiga asoslangan o'z qurish turidan foydalanadi.

Asosiy konfiguratsiya

Konfiguratsiya ilova yo'li (app), quruvchi turi (build), qurish argumentlari va qurilma sozlamalarini (device) o'z ichiga oladi. iOS uchun appleSimulator, Android uchun androidEmulator ishlatiladi. Shuningdek simulyatorning tili yoki hududi kabi ishga tushirish argumentlari ham ko'rsatilishi mumkin.

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

Ishga tushirish buyruqlari

Konfiguratsiyadan so'ng buyruqlar mavjud: detox build — test bayroqlari bilan ilovani qurish va detox test — testlarni ishga tushirish. Detox --workers bayrog'i orqali bir nechta qurilmada parallel ishga tushirishni qo'llab-quvvatlaydi.

Detox da test yozish

Detox testlari JavaScript yoki TypeScript da elementlarni qidirish (matchers) va harakatlarga (actions) asoslangan API yordamida yoziladi. Matchers elementni identifikator, matn, tur yoki ekrandagi joylashuv bo'yicha topish imkonini beradi. Actions bosish, matn kiritish, surish va aylantirishni bajaradi.

Test stsenariysining tuzilishi

Oddiy test quyidagi ketma-ketlikka o'xshaydi: elementni top → harakatni bajar → natijani tekshir. Tekshirish uchun elementning mavjudligi, ko'rinishi yoki matni bo'yicha matchers bilan expect-API ishlatiladi. Detox Jest bilan integratsiya orqali describe/it sintaksisini qo'llab-quvvatlaydi.

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

Gestlar bilan ishlash

Detox barcha mashhur gestlarni qo'llab-quvvatlaydi: tap, longPress, swipe, scroll, pinch, multiTap. Scroll uchun yo'nalish, tezlik va to'xtash pozitsiyasi ko'rsatilishi mumkin. Bu pull-to-refresh yoki karusellar kabi murakkab stsenariylarni test qilish imkonini beradi.

Detox ni CI/CD ga integratsiya qilish

Detox mashhur CI tizimlari bilan yaxshi integratsiyalanadi: GitHub Actions, CircleCI, Bitrise va Jenkins. CI da ishga tushirish uchun virtual simulyator iOS (GUI siz) va apparat tezlashtirishi bilan Android emulyatori sozlanishi kerak. Detox muvaffaqiyatsiz testlarni tahlil qilish uchun artefaktlar — ekran tasvirlari va loglar taqdim etadi.

CI uchun tavsiyalar

CI da testlarni tezlashtirish uchun --workers bayrog'i bilan sharding (parallellashtirish) dan foydalanish tavsiya etiladi. Detox test fayllarini avtomatik ravishda bir nechta simulyator o'rtasida taqsimlaydi. Qurilish vaqtini qisqartirish uchun ilova buildlarini ishga tushirishlar o'rtasida keshga olish ham foydali.

# GitHub Actions — Detox ni iOS da ishga tushirish
- 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 ning eng yaxshi amaliyotlari

Barqaror va tez E2E testlar uchun bir nechta qoidalarga rioya qilish tavsiya etiladi. sleep() dan qoching — Detox avtomatik sinxronizatsiyani ta'minlaydi va aniq kechikishlar testlarni faqat sekinlashtiradi va beqaror qiladi. Agar test timing tufayli muvaffaqiyatsiz bo'lsa, avval sinxronizatsiya o'chirilmaganligini tekshiring. Shuningdek testlarni funksiyalar bo'yicha guruhlash va ularni mustaqil ishga tushirish foydali — bu muvaffaqiyatsizlik sababini topishni osonlashtiradi.

Device metodlaridan foydalanish

Detox holatni boshqarish uchun bir nechta device metodlarini taqdim etadi: device.reloadReactNative() bundle ni qayta yuklaydi, device.launchNewApp() ilovani yangi parametrlar bilan ishga tushiradi, device.sendToHome() ilovani minimallashtiradi. device.setURLBlacklist() ma'lum URL larni sinxronizatsiyadan chiqarish imkonini beradi, bu analitika va long-polling ulanishlari uchun foydali.

Test ma'lumotlarini tashkil qilish

Har bir test uchun izolyatsiya qilingan holat yaratish tavsiya etiladi. Ilovani device.reloadReactNative() orqali qayta yuklash uchun beforeEach dan foydalaning. Maxsus ma'lumotlarni talab qiladigan testlar uchun serverda ma'lumot tayyorlash uchun fabrikalar yoki API mijozlarini yarating. Testlar o'rtasida bog'liqliklardan qoching — har bir test mustaqil bo'lishi kerak.

WebView bilan ishlash

Detox WebView testini web.element() va web.invoke() metodlari orqali qo'llab-quvvatlaydi. Veb elementlari bilan o'zaro aloqa qilish uchun by.web(id, css yoki className) ishlatiladi. WebView yuklash uchun qo'shimcha vaqt talab qilishini yodda tutish muhim — sinxronizatsiya ishlamasa, waitFor orqali yuklashni kutish qo'shing.

// WebView ni Detox da test qilish
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');

Ekran tasviri testi

Detox detox-image-matching plagini orqali ekran tasvirlarini solishtirishni qo'llab-quvvatlaydi. Ekran tasvirlari vizual regressiyalarni aniqlash imkonini beradi: siljigan elementlar, noto'g'ri ranglar, yo'qolgan piktogrammalar. Barqaror ekran tasvirlari uchun animatsiyalarni o'chiring va qattiq simulyator o'lchamidan foydalaning.

Detox muammolarini diagnostika qilish

Detox ning eng keng tarqalgan muammolari sinxronizatsiya bilan bog'liq: cheksiz animatsiyalar, uzoq tarmoq so'rovlari yoki qotib qolgan taymerlar. --loglevel trace bayrog'i bilan loglash Detox qanday resurslarni kutayotganini ko'rsatadi. Detox qotib qolsa — muammoli kod qismi uchun device.disableSynchronization() dan foydalaning.

Simulyator bilan muammolar

iOS simulyatorida Detox ilovani iphonesimulator konfiguratsiyasi bilan xcodebuild orqali oldindan qurishni talab qiladi. Keng tarqalgan xato — Debug o'rniga Release sxemasidan foydalanish, bu test bayroqlarini o'chiradi. Android uchun AVD ilovangiz bilan mos API da yaratilganiga va Intel HAXM tezlashtirishi yoqilganiga ishonch hosil qiling. macOS da CI muhitlari uchun GitHub Actions dan macOS runneri bilan foydalanish qulay, bunda Xcode va simulyatorlar oldindan o'rnatilgan.

Test taymutlari

Agar testlar muntazam ravishda taymut tufayli muvaffaqiyatsiz bo'lsa, tekshiring: sinxronizatsiya global darajada o'chirilmaganmi, ilova kodida tozalanmasdan setTimeout yoki setInterval ishlatilmaganmi va asosiy oqim uzoq muddatli operatsiya bilan bloklanmaganmi. Ba'zan detoxrc.js da testRunner.args.jest.$.testTimeout orqali taymutni oshirish yordam beradi. Muammoli qismlarni topish uchun Detox kuzatuv logini yoqing — bu hozirda freymvork qanday resurslar va taymerlarni kutayotganini ko'rsatadi.

Artefaktlar va hisobotlar

Testlarni bajarishdan so'ng Detox artefaktlar yaratadi: muvaffaqiyatsiz testlarning ekran tasvirlari, ilova loglari va XML JUnit hisobotlari. Ekran tasvirlari test muvaffaqiyatsiz bo'lganda avtomatik ravishda olinadi va muammoni vizual aniqlashga yordam beradi. CI uchun artefaktlar bulutli xotiraga yuklanadi va muvaffaqiyatsizlik sabablarini tahlil qilish uchun veb interfeysi orqali mavjud bo'ladi.