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.

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 (use network conditioning)
   - Verify loading states appear for slow requests
   - Verify timeouts trigger after reasonable duration
   - Images show placeholders while loading

Use Detox device.setNetworkCondition for network simulation.

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 in test builds (UIView.setAnimationsEnabled(false) on iOS, Settings > Developer options > Animation scale 0x on Android) or use Detox’s synchronization.

“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.