How to use Maestro with React Native (Expo)

Raşit Çolakel

3 min readJan 28, 2023

About

This article is a simple example of how to use the Maestro to test your mobile application.

Getting Started

There are some prerequisites that you need to install before running the Maestro.

You can check the GitHub Repository: https://github.com/rasitcolakel/react-native-maestro-example

Prerequisites

Installing the Maestro

To install the Maestro, run the following command:

curl -Ls "https://get.maestro.mobile.dev" | bash

Running the tests

Before running the tests, you need to install the dependencies for iOS:

brew tap facebook/fb
brew install facebook/fb/idb-companion

To run the tests, run the following command:

maestro test your-flow.yaml

Creating a flow

To create a flow, you need to create a YAML file with the following structure:

appId: com.example.app
---
- openLink: exp://127.0.0.1:19000

The first line is the application identifier, and the second line is the URL to open the application because the app is running on the Expo.

Tapping on an element

There are two ways to tap on an element:

With the element’s text

- tapOn: login

With the element’s accessibility identifier

- tapOn:
    id: "login"

Notes:

Please check the testID on React Native documentation to know how to add an accessibility identifier to your element.
For more information about TapOn, you can check the Maestro documentation.

Input Text

To input text, you need to use the following syntax:

- inputText: "maestro"

Login Flow

To run the login flow, run the following command:

maestro test flows/login.yaml

React Native Code:

const LoginScreen = (props: Props) => {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <View className="w-full gap-y-4 p-1">
        <Input testID="username" placeholder="Username" />
        <Input
          testID="password"
          placeholder="Password"
          secureTextEntry={true}
        />
        <Button testID="login" title="Login" />
      </View>
    </View>
  );
};

Login Yaml:

appId: com.example.app
---
- openLink: exp://127.0.0.1:19000
- tapOn:
    id: "username"
- inputText: "maestro"
- tapOn:
    id: "password"
- inputText: "12345678"
- tapOn:
    id: "login"

Running the Login Test on iOS

Running on iPhone 11 - iOS 16.0 - 2DBFC5E7-FAE6-4B2A-BD9B-D9D7EDF22C7B

 ║                                                                          
 ║  > Flow                                                                  
 ║                                                                          
 ║    ✅  Open exp://127.0.0.1:19000                                        
 ║    ✅  Tap on id: username                                               
 ║    ✅  Input text maestro                                                
 ║    ✅  Tap on id: password                                               
 ║    ✅  Input text 12345678                                               
 ║    ✅  Tap on id: login

Running the Login Test on Android

Running on emulator-5554

 ║                                      
 ║  > Flow                              
 ║                                      
 ║    ✅  Open exp://127.0.0.1:19000    
 ║    ✅  Tap on id: username           
 ║    ✅  Input text maestro            
 ║    ✅  Tap on id: password           
 ║    ✅  Input text 12345678           
 ║    ✅  Tap on id: login

Run a nested flow

To run a nested flow, you need to use the following syntax:

- runFlow: newTask.yaml # <-- Run commands from "Login.yaml"

Run a Nested Flow with the condition

To run a nested flow with the condition, you need to use the following syntax:

- runFlow:
    when:
      visible:
        text: "Login"
        index: 1
    file: login.yaml

The above example will run the login flow if the text “Login” is visible on the screen.

Repeat a flow

To repeat a flow, you need to use the following syntax:

- repeat:
    times: 3
    commands:
      - runFlow: deleteTask.yaml

The above example will run the delete task flow three times.

Example Videos:

With the Login Flow

This video presents the main flow which logs in to the app, creates three tasks, and then deletes them.

iOS Example

Android Example

With the Skipped Login Flow

The second video presents the main flow which skips the login flow and then creates three tasks, and then deletes them.