Mobile App Testing Patterns

Your React Native app works flawlessly on the iPhone 15 Pro sitting on your desk. Then the crash reports roll in: Android 12 on Samsung Galaxy A13, iOS 16 on iPhone SE (2nd gen), and a tablet layout that overlaps every text element. Mobile testing is a combinatorial explosion — dozens of devices, multiple OS versions, varying screen sizes, and platform-specific behaviors. AI tools cannot test on every device, but they can generate the tests that cover the most ground.

What You’ll Walk Away With

• Cross-platform test generation for React Native and Flutter applications
• Device matrix strategies that maximize coverage without testing every permutation
• Platform-specific testing patterns for gestures, navigation, and permissions
• Responsive layout testing across screen sizes and orientations
• AI prompts for generating Detox and Maestro test suites

Cross-Platform Test Generation

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.

Maestro Flows for Fast Smoke Tests

Detox gives you tight, code-level control; Maestro trades some of that control for declarative YAML flows that are far quicker to write and read — ideal for smoke tests and for QA folks who do not live in the codebase. A flow is just a list of commands against accessibility labels or visible text:

.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

Run it with maestro test .maestro/login-smoke.yaml. Ask the AI to bootstrap the flow from your screen labels:

Tip

Copy-paste prompt for a Maestro smoke-test flow:

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

Where each tool runs these flows differs in practice:

Cursor

Run Detox and Maestro locally against a booted simulator/emulator while you iterate, using Agent mode to fix selectors the moment a flow fails. Keep the device and the Metro bundler running so re-runs are fast; Cursor’s checkpoints let you revert a broken test edit without losing the rest.

Claude Code

Wire the Maestro smoke flows into CI headlessly: claude -p "run npm run e2e:smoke and fix any failing Maestro flow, then re-run until green" in a job that boots one iOS and one Android emulator. The non-interactive -p mode plus a Bash hook makes this a reliable per-PR gate.

Codex

Push the heavy device-matrix runs off your machine: kick off the full Detox suite as a Codex Cloud task so it runs the iOS and Android jobs in parallel and opens a PR with the results, while you keep working locally. Pair it with a GitHub automation so the cloud run triggers on every PR.

Device Matrix Strategy

You cannot test on every device. Choose strategically.

Tip

Copy-paste prompt for device matrix design:

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.

Platform-Specific Testing

Gesture and Interaction Testing

Tip

Copy-paste prompt for gesture test generation:

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.

Responsive Layout Testing

Tip

Copy-paste prompt for responsive layout tests:

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.

Offline and Network Testing

Tip

Copy-paste prompt for offline mode tests:

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.

When This Breaks

“Detox tests pass on simulator but fail on real devices.” Simulators and emulators do not perfectly replicate real device behavior. Gestures, performance, and system dialogs behave differently. Run critical path tests on at least one real device through a cloud service (BrowserStack, AWS Device Farm).

“Tests are flaky due to animation timing.” Mobile animations cause timing issues. Disable animations inside the app process, not from the test: have your AppDelegate check for a launch arg the test passes (e.g. -disableAnimations) and call UIView.setAnimationsEnabled(false) — calling it from the E2E test itself has no effect because it runs in a separate process. On Android, set Developer options > Window/Transition/Animator scale to 0x on the emulator image, or rely on Detox’s built-in synchronization to wait out animations.

“Android tests behave differently across manufacturers.” Samsung, Xiaomi, and OnePlus add custom UI layers that affect system dialogs and navigation. Test on the top 3 manufacturers in your analytics, not just the stock Pixel emulator.

“Our CI is too slow for mobile tests.” Mobile test suites are inherently slower than web tests. Run smoke tests (3-5 critical flows) on every PR and the full suite nightly. Use cloud device farms for parallel execution.

What’s Next

E2E Testing Web E2E testing patterns that complement mobile testing.

Accessibility Testing Mobile accessibility testing for VoiceOver and TalkBack.

Performance Testing Mobile performance profiling and benchmarking.