Wzorce testowania aplikacji mobilnych

Twoja aplikacja React Native działa bezbłędnie na iPhone 15 Pro leżącym na biurku. Potem zaczynają napływać raporty o crashach: Android 12 na Samsung Galaxy A13, iOS 16 na iPhone SE (2. generacja) i layout tabletowy, w którym każdy element tekstowy nakłada się na siebie. Testowanie mobilne to eksplozja kombinatoryczna — dziesiątki urządzeń, wiele wersji systemu operacyjnego, różne rozmiary ekranu i zachowania specyficzne dla platformy. Narzędzia AI nie mogą testować na każdym urządzeniu, ale mogą generować testy pokrywające największy obszar.

Czego się nauczysz

• Generowanie testów cross-platform dla aplikacji React Native i Flutter
• Strategie macierzy urządzeń maksymalizujące pokrycie bez testowania każdej permutacji
• Wzorce testowania specyficzne dla platformy: gesty, nawigacja i uprawnienia
• Testowanie responsywnego layoutu na różnych rozmiarach i orientacjach ekranu
• Prompty AI do generowania zestawów testów Detox i Maestro

Generowanie testów cross-platform

Cursor

Generate Detox E2E tests for our React Native app's onboarding flow:

Flow: Splash -> Welcome -> Permission Requests -> Profile Setup -> Home

1. Splash screen: Verify logo displays, auto-navigates after 2 seconds
2. Welcome: Swipe through 3 carousel pages, tap "Get Started"
3. Permissions: Handle push notification permission dialog (allow and deny paths)
4. Profile: Fill name, select avatar, tap "Complete"
5. Home: Verify the user name appears, main navigation tabs are visible

Platform-specific handling:
- iOS: Use system dialog matchers for permission requests
- Android: Use UiAutomator for permission dialogs

Test both:
- Happy path (all permissions granted)
- Permissions denied path (verify graceful degradation)
- Back navigation at each step

Save to /e2e/onboarding.e2e.ts

Claude Code

claude "Create a comprehensive Detox test suite for our React Native app:

1. Analyze the navigation structure in /src/navigation/
2. Generate E2E tests for each user flow:
   - Onboarding (first launch experience)
   - Authentication (login, signup, password reset)
   - Core feature (main product interaction)
   - Settings (profile edit, preferences, logout)

3. For each test:
   - Handle both iOS and Android platform differences
   - Include proper device synchronization waits
   - Test both portrait and landscape orientations
   - Handle system dialogs (permissions, alerts)

4. Create test utilities:
   - /e2e/utils/auth.ts (login/logout helpers)
   - /e2e/utils/permissions.ts (grant/deny system permissions)
   - /e2e/utils/navigation.ts (navigation state helpers)

Run on iOS simulator first, then verify Android compatibility."

Codex

Generate mobile E2E tests for this React Native application:
1. Analyze the app's navigation and screens
2. Create Detox tests for all critical user flows
3. Handle platform-specific differences (iOS vs Android)
4. Run tests on both platforms and fix any failures
5. Create a PR with the test suite

Include a device matrix configuration for CI.

Flow Maestro do szybkich smoke testów

Detox daje ścisłą kontrolę na poziomie kodu; Maestro wymienia część tej kontroli na deklaratywne flow w YAML, które pisze się i czyta znacznie szybciej — idealne do smoke testów i dla osób z QA, które nie żyją w kodzie. Flow to po prostu lista komend działających na etykietach dostępności lub widocznym tekście:

.maestro/login-smoke.yaml

appId: com.yourcompany.app
---
- launchApp:
    clearState: true
- assertVisible: "Welcome back"
- tapOn: "Email"
- inputText: "qa@example.com"
- tapOn: "Password"
- inputText: "hunter2"
- tapOn: "Sign in"
- assertVisible:
    id: "home-tab"
- takeScreenshot: login-success

Uruchom go poleceniem maestro test .maestro/login-smoke.yaml. Poproś AI, by zbudowała flow na podstawie etykiet Twoich ekranów:

Wskazówka

Prompt do skopiowania — flow smoke testu Maestro:

Generate a Maestro YAML flow (.maestro/checkout-smoke.yaml) for our app's
checkout happy path. App id is com.yourcompany.app.

Steps to encode:
1. launchApp with clearState, then sign in (email + password fields, "Sign in" button)
2. Open the first product from the home feed, tap "Add to cart"
3. Open the cart, tap "Checkout"
4. Fill the test card (4242 4242 4242 4242, any future expiry, any CVC)
5. Tap "Pay", assertVisible the "Order confirmed" screen, takeScreenshot

Rules:
- Reference elements by accessibility id where one exists, otherwise visible text
- Add runFlow conditionals so a leftover logged-in session is handled gracefully
- Keep it under 30 commands so it stays a smoke test, not a full regression suite

To, gdzie każde z narzędzi uruchamia te flow, różni się w praktyce:

Cursor

Uruchamiaj Detox i Maestro lokalnie na uruchomionym symulatorze/emulatorze podczas iteracji, używając trybu Agent do naprawiania selektorów w momencie, gdy flow zawiedzie. Trzymaj urządzenie i bundler Metro uruchomione, by ponowne uruchomienia były szybkie; checkpointy Cursor pozwalają cofnąć błędną edycję testu bez utraty reszty.

Claude Code

Wepnij smoke flow Maestro do CI w trybie headless: claude -p "run npm run e2e:smoke and fix any failing Maestro flow, then re-run until green" w zadaniu, które uruchamia jeden emulator iOS i jeden Android. Nieinteraktywny tryb -p plus hook Bash robią z tego niezawodną bramkę na każdy PR.

Codex

Przerzuć ciężkie uruchomienia na macierzy urządzeń poza swoją maszynę: odpal pełny zestaw Detox jako zadanie Codex Cloud, by uruchomił zadania iOS i Android równolegle i otworzył PR z wynikami, podczas gdy Ty pracujesz dalej lokalnie. Połącz to z automatyzacją GitHub, by uruchomienie w chmurze startowało na każdym PR.

Strategia macierzy urządzeń

Nie możesz testować na każdym urządzeniu. Wybieraj strategicznie.

Wskazówka

Prompt do skopiowania — projektowanie macierzy urządzeń:

Help me design a mobile testing device matrix for our React Native app.

Our analytics show:
- 55% iOS, 45% Android
- Top iOS devices: iPhone 15 (18%), iPhone 14 (15%), iPhone SE 3rd gen (8%), iPad Air (5%)
- Top Android: Samsung Galaxy S24 (12%), Pixel 8 (8%), Samsung A54 (7%), OnePlus 12 (4%)
- iOS versions: 18 (45%), 17 (35%), 16 (15%), 15 (5%)
- Android versions: 14 (40%), 13 (30%), 12 (20%), 11 (10%)

Design a test matrix that covers:
1. Critical path tests (login, main feature, payment) - which 6 device/OS combos?
2. Regression tests - which 3 device/OS combos for quick feedback?
3. Smoke tests in CI - which 2 (one iOS, one Android)?
4. Monthly full coverage - what additional devices for completeness?

Justify each choice. Optimize for maximum bug-finding with minimum device count.

Testowanie specyficzne dla platformy

Testowanie gestów i interakcji

Wskazówka

Prompt do skopiowania — generowanie testów gestów:

Generate Detox tests for gesture-based interactions in our React Native app:

1. Swipe gestures:
   - Horizontal swipe on image carousel (left/right)
   - Swipe to delete on list items (iOS and Android differ)
   - Pull-to-refresh on feed screen

2. Long press:
   - Long press on message to show context menu
   - Verify haptic feedback is triggered (check via accessibility)

3. Pinch zoom:
   - Pinch to zoom on image viewer
   - Double-tap to zoom in/out

4. Scroll behaviors:
   - Infinite scroll on feed (verify new items load)
   - Scroll to top on tab bar double-tap
   - Section headers stick during scroll

Handle platform differences:
- iOS: Elastic scroll bounce, inertial scrolling
- Android: Overscroll glow effect, edge-to-edge gestures

Include assertions that verify the UI state after each gesture.

Testowanie responsywnego layoutu

Wskazówka

Prompt do skopiowania — testy responsywnego layoutu:

Generate layout tests for our React Native app across device sizes:

Test each screen at these viewports:
1. Small phone: iPhone SE (375x667)
2. Standard phone: iPhone 15 (393x852)
3. Large phone: iPhone 15 Pro Max (430x932)
4. Small tablet: iPad Mini (744x1133)
5. Large tablet: iPad Pro 12.9" (1024x1366)

For each screen, verify:
- No text truncation (all labels are fully visible or properly ellipsized)
- No overlapping elements
- Touch targets are at least 44x44 points
- Images scale correctly without distortion
- Scroll views are scrollable when content overflows
- Navigation elements are reachable

Both orientations: portrait and landscape.
Flag any layout that looks broken at a specific size with a screenshot.

Testowanie offline i sieciowe

Wskazówka

Prompt do skopiowania — testy trybu offline:

Generate tests for offline behavior in our React Native app:

1. Offline detection:
   - App shows offline banner when network drops
   - Banner disappears when network returns
   - In-progress operations show clear error messages

2. Offline data access:
   - Previously loaded data is available offline
   - Forms can be filled out offline
   - Queued actions sync when back online

3. Network transitions:
   - Start action online, lose connection mid-request
   - Verify retry mechanism works correctly
   - No duplicate submissions after reconnection

4. Slow network:
   - Simulate 3G speeds (route the app through a throttling proxy)
   - Verify loading states appear for slow requests
   - Verify timeouts trigger after reasonable duration
   - Images show placeholders while loading

Detox has no built-in network-conditioning API, so drive connectivity from outside the test:
- Offline: launch with a flag the app reads, e.g. await device.launchApp({ newInstance: true, launchArgs: { offlineMode: true } }), and have the app fake a disconnected NetInfo state when that flag is set.
- Slow/failing network: point the app at a mock server (MirageJS, json-server, or WireMock) or a throttling proxy (Charles, mitmproxy) and inject latency/5xx responses there.
- Android only: toggle the radios directly with adb shell svc wifi disable / svc data disable (and re-enable) between steps.

Gdy coś się zepsuje

“Testy Detox przechodzą na symulatorze, ale failują na prawdziwych urządzeniach.” Symulatory i emulatory nie replikują idealnie zachowania prawdziwych urządzeń. Gesty, wydajność i dialogi systemowe zachowują się inaczej. Uruchamiaj testy critical-path na przynajmniej jednym prawdziwym urządzeniu przez usługę chmurową (BrowserStack, AWS Device Farm).

“Testy są niestabilne z powodu timingu animacji.” Animacje mobilne powodują problemy z timingiem. Wyłącz animacje wewnątrz procesu aplikacji, nie z poziomu testu: spraw, by Twój AppDelegate sprawdzał launch arg przekazywany przez test (np. -disableAnimations) i wywoływał UIView.setAnimationsEnabled(false) — wywołanie tego z samego testu E2E nie ma efektu, bo działa on w osobnym procesie. Na Androidzie ustaw Developer options > Window/Transition/Animator scale na 0x w obrazie emulatora lub polegaj na wbudowanej synchronizacji Detox, która przeczeka animacje.

“Testy Android zachowują się inaczej na różnych producentach.” Samsung, Xiaomi i OnePlus dodają własne warstwy UI wpływające na dialogi systemowe i nawigację. Testuj na trzech głównych producentach z Twoich analityk, nie tylko na standardowym emulatorze Pixel.

“Nasze CI jest zbyt wolne na testy mobilne.” Zestawy testów mobilnych są z natury wolniejsze niż testy webowe. Uruchamiaj smoke testy (3-5 krytycznych flowów) na każdym PR i pełny zestaw w nocy. Użyj chmurowych farm urządzeń do równoległego wykonywania.

Co dalej

Testy E2E Wzorce testów E2E w webie uzupełniające testowanie mobilne.

Testowanie dostępności Testowanie dostępności mobilnej dla VoiceOver i TalkBack.

Testowanie wydajności Profilowanie i benchmarking wydajności mobilnej.