Initial Setup For App

In order to test the our react native app with Appium, we would need a react native app that has good number of interactions that can be automated. I have seen a number of posts regarding Appium, but not a lot with react-native apps, and almost nil where Appium with Python has been used.

This is a problem that one of my friend has faced in the past so, I thought I would have a demo and blog post about the same.

 

App Set Up

We would need an app developed in react native for the same. The Kitten app in app store is a nice app that gives a lot of UI interactions that a user can work with. The UI is also good looking and I think it’s one of the best apps to learn automation for react-native using Appium.

 

In this post, I will walkthrough the whole installation of the app along with other build tools to generate an .apk file for Android and then we’ll continue with the Appium steps.

 

Here is the github link for the demo app that we’re going to use. Here a couple of screenshots

 

Note : The set up , installation and tests are written on a MacOS machine. The installation steps are almost same for another Unix/Linux machines like with Ubuntu etc.

The assumption is that your system should have git and node.js and a package manager like npm or yarn installed. If these are not installed, please install them and then come back to this tutorial.

Step 1 :

Clone the repository in your system using

git clone <repo_name>

 

Step 2 :

Go to the directory , which is kittenTricks using the cd command.

 

Step 3 :

Do an

npm install

once inside the directory. It will install all the dependencies.

 

Step 4 :

This app is created with CRNA as such, to view this app and generate a signed .apk file, we would need to install Expo and create an account.

Install Expo on the system using

npm install exp --global

 

Step 5 :

Go to https://expo.io/ and create an account. Remember the email-id and password used since these will be important in later steps.

 

Step 6 :

Follow this step if you’re trying to run on an actual device. If not, the skip to Step 7. In order to view the app on your actual device, you’d need to download the Expo app on your device. This has been mentioned in the official documentation here

Expo Client helps view your projects while you’re developing them. When you serve your project from XDE or exp, it generates a development URL that you can open in Expo Client to preview your app. On Android, Expo Client can also be used to view others’ projects on expo.io. Expo Client works on devices, simulators, and emulators.
Required Android and iOS versions: The minimum Android version Expo supports is Android 4.4 and the minimum iOS version is iOS 9.0.
You don’t need to manually install the Expo client on your emulator/simulator, because XDE will do that automatically. See the next sections of this guide.

Step 7 :

Open Android Studio and open a simulator. Follow these steps if you’re not sure how to create a simulator in Android Studio.

Step 8 :

Now, to get your app running on the simulator, run this command
react-native run-android
which will give an output in terminal like this screenshot below
If you see there is a hyperlink which says to open it in the Expo app. Copy this url.

Step 9 :

In your simulator you’ll see the Expo app (since Expo was already installed). Open the app and go to the profile tab and login using the credentials created in Step 5 

Step 10 :

Once logged in, return to the terminal and copy the url that tells you to open in Expo. Once copied, you’ll automatically see that in the app in your simulator like this.

Step 11 :

Click on the link to open the app in your simulator like this
Now we’ve the app installed on the device. But to test it using Appium, we’ll need the signed .apk file to use. In next tutorial we’ll see how to use Expo to generate a new .apk file from the set up and use it for testing with Appium.
Next tutorial in this series here.