Kutay

Run Maestro end to end tests with Expo


This tutorial will not explain how to use Maestro or how to write tests with it. It will only explain how to run the tests with Expo. If you want to learn how to use Maestro, you can check the official documentation.

There are two ways you can run Maestro tests with Expo, you can use expo prebuild or you can use eas build. We will cover both ways in this tutorial. There are some differences between the two, but in this context the one we care about is that while expo prebuild gives you native code while still in development, eas build compiles/builds app binaries so that is why you need the development client.

I also made a video out of this blog post, you can check it out here.

Prerequisites

You are going to need a linux or a macOS machine to run the tests. You can also use a windows machine, but you will need to use WSL2 and it requires more configuration. This tutorial will cover macOS but the steps are similar for linux.

Make sure you have the following installed, I assume you already have your mobile environment set up.

  • Maestro CLI
brew tap mobile-dev-inc/tapF
brew install maestro
  • Eas CLI
npm install -g eas-cli

Setting up the project

I made a simple project to demonstrate how to run the tests with Expo. You can follow along with the starter branch or clone the main branch to see the final result. The below steps are also viable if you are integrating Maestro into your own project.

git clone -b starter https://github.com/kutaui/expo-maestro.git

With expo prebuild

After you have cloned the project, you can run the following command to build the project for IOS or Android.

npx expo prebuild

This command will ask you for your desired Android package name and IOS bundle identifier. You can use the default values if you want.

After the installation is done you can start your android or IOS emulator and run the following command to install and start the app.

npm run android  // or ios

After the app is running you can skip the eas build section and go directly to the Running the tests section.

With eas build

Login to your expo account

eas login

Configure the build and generate the eas.json file

eas build:configure

Now we need to add a custom profile to eas.json so we can run a development build. Here is how the final eas.json looks

{
	"cli": {
		"version": ">= 12.6.2",
		"appVersionSource": "remote"
	},
	"build": {
		"development": {
			"developmentClient": true,
			"distribution": "internal"
		},
		"preview": {
			"distribution": "internal"
		},
		"production": {
			"autoIncrement": true
		}
	},
	"submit": {
		"production": {}
	}
}

Now we need to install expo-dev-client, this comes installed on the main branch but if you are following along with the starter branch or setting up for your own project you need to install it.

npx expo install expo-dev-client

Building and Installing the app

Now we need to build the project with the development profile for IOS or Android. You can run the following command to build the project for IOS.

eas build --profile development --platform ios --local

Or for Android

eas build --profile development --platform android --local

Start the development client

npx expo start --dev-client

To install app on the IOS simulator follow these steps:

Extract the build with:

tar -xvzf build-*.tar.gz

Then install the app on the simulator with:

xcrun simctl install booted maestrotutorial.app

For the android you just need to drag and drop the APK to emulator.

Running the tests

Now you need to create your test file, you can name it whatever you want. I usually store it inside the .maestro folder. Here is a working test for our example project.

appId: com.kutaui.maestrotutorial
---
- launchApp
- tapOn: 'Email'
- inputText: '[email protected]'
- tapOn: 'Password'
- inputText: 'password'
- tapOn:
    text: 'Login Button'
- assertVisible:
    text: 'Job Listings'
- tapOn:
    text: 'Software Engineer'
- assertVisible:
    text: 'Job Detail'

Now after you make sure you are running the expo development client, you can run the tests with the following command on another terminal.

maestro test .maestro/test.yaml

Tags: