Building Confidence in Mobile Deployments with Maestro E2E Testing and Percy Visual Snapshots

A React Native team’s journey to AI-assisted testing, visual truth, and cross-functional confidence.

Visualizing the flow of AI-assisted mobile testing from code to screenshots.

Moving Fast Without Breaking Trust

Every mobile release brings the same tradeoff: ship faster or ship safer. At Mission Lane, even with strong unit test coverage in our React Native app, we realized speed without visibility created risk. Unit tests validated components, but they couldn’t protect the experience — the real, end-to-end journeys customers take when updating payment methods, setting up autopay, or managing their accounts.

When we set out to implement E2E testing in our Expo-based React Native app, we looked for a tool that balanced developer speed with cross-functional visibility. Maestro quickly stood out — not just as an automation framework, but as a collaboration enabler.

Two capabilities made the difference:

• Built-in Expo Support: Maestro provides pre-packaged workflows for Expo applications, meaning we could get started quickly without wrestling with custom build scripts or configuration.
• Exceptional MCP (Model Context Protocol) Support: This was the game-changer. Maestro’s MCP integration lets AI coding assistants like GitHub Copilot and Cline interact directly with a running application during test development. Instead of the traditional write–run–debug cycle, we could iteratively build and refine tests in real time — inspecting the UI hierarchy, sending commands, and validating behavior through natural language conversations with our agentic AI.

Building Tests with AI Agents

The MCP integration fundamentally changed how our engineers approach test creation. Instead of the tedious write–run–debug grind, we now build tests conversationally. Our AI agent analyzes our codebase and existing test templates, generates YAML flows, and refines them live as the simulator runs.

Key Learnings and Best Practices

As our test suite matured, several best practices emerged that kept our flows maintainable and our team aligned:

1. Add Proper Test Identifiers

If elements are difficult to target, add identifiers directly to your React Native components:

<Button testID="submit-button" />
<View accessible={true} accessibilityLabel="Generic Form" />

2. Leverage MCP for Real-Time Debugging

With the simulator paused at a failed step, use your AI assistant (via MCP) for interactive debugging:

• Ask it to inspect the current view hierarchy
• Identify problematic elements or missing data
• Send individual flow commands to test interactions
• Have the AI make real-time changes to code, mock data, or test files

Integrating Percy for Visual Regression Testing

To protect our app’s look and feel, we integrated Percy.io, a visual regression testing platform, alongside Maestro.

While Percy doesn’t natively support Maestro, it provides a CLI tool for uploading static images. We built a simple bridge to upload Maestro screenshots to Percy, creating a unified pipeline that validated both function and form.

The Workflow

Our EAS (Expo Application Services) workflow runs Maestro tests and automatically captures screenshots, then uploads them to Percy for visual comparison:

[embed]EAS Workflow for Maestro e2e tests and Percy screenshots upload

The Impact: Confidence, Clarity, and Speed

The results were measurable.

• Deployment confidence: Every critical customer journey is now validated both functionally and visually.
• Cross-functional clarity: Product managers and designers can verify experience fidelity before release.
• Iteration speed: AI-assisted test creation cut our test authoring time by more than half.
• Reduced regressions: We’ve caught numerous UI and navigation issues before they reached production.

Conclusion

For any cross-functional team shipping React Native apps, Maestro and Percy form a testing stack that scales with ambition. Maestro ensures journeys work and Percy ensures they look right.

If your product team is struggling with release confidence or wants clearer visibility into the mobile experience, this approach is worth exploring. The initial setup pays dividends in reduced incidents, faster iteration, and improved collaboration across engineering, design, and product.

Follow me for more deep dives on testing automation and design-system strategy.

Christopher Lanoue is a Creative Technologist who is currently a Sr Principal Frontend Engineer at Mission Lane and was formerly the President/CTO of Nautilytics.