MemeGenerator — JuniorsLoveToCode — Automated Testing Meme

Why did I write this article?

I was asked to integrate a JavaScript mobile testing framework in order to automate the E2E testing of a React Native App. During this process, Detox framework popped up in my head. We had to check for all the alternatives that can be easily configured and used, however, Appium wasn’t that easy to play with. When we were trying to integrate the framework we came across hurdles, it wasn’t easy to find any community support or people with similar issues to ours and that was a big challenge. Nevertheless, challenge accepted and now we would like to simplify your life!

MemeGenerator — Appium Meme

Lets get it done!

I am assuming you already have a running React Native project, however, for this example, I will do it on newly created react-native project.

Step 1: Create a new React Native project by running: react-native init YourProjectName

Step 2: Run the newly created app: react-native run-android

Step 3: Let’s install the dependencies we need:

 

yarn add appium appium-doctor

 

Step 4: Now run

 

yarn run appium-doctor

 

in order to see the errors you have to fix before continuing to the next step , For now we will just make the Android configurations so you can fix the Android errors generated by the Appium doctor:

Step 5: we need to install the Web-Driver

 

yarn add wd

 

Step 6: We also need an Appium server to run our tests, and there are two ways to do it:

A — To download the desktop version of the Appium server here(Recommended)

B — Or, you can start the Appium server by running this command in the terminal: yarn run appium

Step 7: Now that all the dependencies are installed, let’s modify the initial component for our tests. Appium uses “accessibilityLabel” to access and find your code. For our example, we will add a TouchableOpacity inside App.js file (No one recommends inline styles, this is just for the sake of complexity)

 

<TouchableOpacityaccessibilityLabel=’alertButton’ style={{width:100,height:100,backgroundColor:’aqua’}} onPress={() => alert(‘Hello’)}> <Text>Hello</Text> </TouchableOpacity>

 

Step 8: Now let’s add some configs for the tests. In order to do this, create a new file inside “__tests__” folder ./__tests__/myTests.test.js

 

import wd from ‘wd’; jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000; const PORT = 4723; const config = { platformName: ‘Android’, deviceName: ‘Android Emulator’, app: ‘Users/user/yourProjectName/android/app/build/outputs/apk/app-debug.apk’}; const driver = wd.promiseChainRemote(‘localhost’, PORT);

 

Please note:

*WD: is the web driver library we installed to communicate with Appium

*Jasmine: is a JavaScript testing framework and responsible for async calls

Step 9: We also need to add our test cases inside the same file:

 

beforeAll(async () => { await driver.init(config); await driver.sleep(3000); }) // Sometime for the app to load test(‘my first appium test’, async () => { expect(await driver.hasElementByAccessibilityId(‘alertButton’)).toBe(true); const element = await driver.elementByAccessibilityId(‘alertButton’) await element.click() expect(await driver.hasElementByAccessibilityId(‘notHere’)).toBe(false); });

 

Step 10: Finally, let’s run the tests:

1- Start the Appium server

2- yarn test

MemeGenerator — StarWars Meme

Have a look at the full example in this github repository.

Written by: Mahmoud Hamed. 

An IT wiz made of many parts: part Software Engineer, part ReactJS/React Native Developer, part gamer, part technology curious geek and part gym enthusiast.