Mobile UI testing with React Native and Maestro

Introduction

I started this project mainly for fun and to develop my mobile UI testing skills. After reading the Documentation for Maestro and Maestro with React Native, I found it seemed easy to implement, simple and effective. So... Let's go! :D I created a React Native app built with Expo to simply this part. The aim of this project is Maestro. Enjoy it! :)

This app has three screens:

• A sign in interface with two fields, email and password. After clicking the sign in button, if the form is valid (a valid email and password) we'll see the next screen.
• A simple screen with greetings and email user, a link to another screen and a sign out button.
• A scrollview screen with some texts and images. It's also possible to go back to the previous screen.

Installation

React Native Maestro

$ git clone https://github.com/kiki-le-singe/react-native-maestro.git <name>
$ cd <name>
$ npm install

Maestro

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

Only for iOS: Connecting to Your Device

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

See the official documentation: Installing Maestro

Run

$ npm start
$ npm run ios or android

Maestro tests

The tests are in the maestro directory. You can run them locally in your iOS simulator or Android emulator. At the moment, Maestro does not support real iOS devices. See Installing Maestro and Connecting to Your Device

You can run the tests in CI with Maestro Cloud. See Running Flows on CI.

Running tests

# run single test
$ maestro test maestro/[fileName].yaml

$ maestro test maestro/simple-flow.yaml

$ maestro test maestro/signin/signin-errors-flow.yaml

$ maestro test maestro/signin/signin-success-flow.yaml

$ maestro test maestro/home/home-flow.yaml

$ maestro test maestro/details/details-flow.yaml

Sometimes you could see this error: Failed to reach out XCUITest Server... Maybe your component is not reachable, so you probably check your code. Sometimes the CLI just seems a little capricious... So just wait a few secondes... And it perfectly works! :D

Resources

• Maestro Documentation
• Maestro GitHub Repository
• Maestro with React Native
• Maestro Cloud Documentation
• A great and complete introduction to Maestro with React Native