Mobile Automation with WebdriverIO

Let’s make things easier

7 min readMay 29, 2020

Most of us are just trying to automate web applications only, thinking mobile automation is really hard to initiate and manage. It is just a matter of configuring your machine with the correct guidelines. In this post we are going to Automate an Android Native Application with Appium Using WebdriverIO and generate Allure Report.

Content

1. Setup Environment

2. WebdriverIO configurations

3. Capture elements using Appium desktop

4. Start writing a test case

5. Execute test case on physical android device

Setup Environment

1. Download and install java development kit (JDK) latest version

https://www.oracle.com/java/technologies/javase-jdk14-downloads.html

Then setup java path. Once you set java path type java -version in cmd to verify that the path has been set correctly.

2. Install Node.js latest version.

https://nodejs.org/en/download/

Once installed open cmd and enter node -v to verify node version

3. Install Android Studio latest version

https://developer.android.com/studio

Set ANDROID_HOME variable as below.

Type adb in the cmd. You will get the Android debug bridge version as below.

If you get ‘command not found’ error, then setup ‘platform-tools’ path and ‘tool’ path which are inside the SDK folder, in the path system variable. (Same as setting java path. ex: C:\users\sdk\platform-tools; C:\users\sdk\tool)

4. In your physical device, enable USB Debugging in Settings > developer options

Connect your android device to the machine and enter adb devices in cmd. You can see connected android devices.

**Image: Connected devices to the machine**

If your device is shown as unknown, remove the device from the machine and disable USB debugging. Try to enable it again and connect to the machine. Once you connect your device, it will be getting a popup message asking, ‘do you trust the machine’. You need to allow it.

If your device is not shown under the list of devices attached, it means your machine doesn’t have drivers to identify your device. Search for the drivers which do support your device and install them will be sorted out this issue. (Example: you have Samsung A7 device. So, you have to google, Samsung A7 drivers for windows, then download the driver and install it)

5. Install VSCode

https://code.visualstudio.com/download

6. Install Appium desktop application

http://appium.io/downloads.html

WebdriverIO configurations

Create a project folder and initiate package.json. In cmd enter below commands

> mkdir TestProject 
> cd TestProject
> npm init

Enter a package name and if you don’t want to enter a value, just click enter. Finally type ‘yes’ to initiate the package.json

2. Install WebdriverIO

Open the project you have created with VSCode. You could see package.json is available in your project.

Open cmd from the project itself

Enter below commands in that command prompt

> npm install webdriverio --save-dev       
> npm i --save-dev @wdio/cli                           
> npm install -g allure-commandline --save-dev 
> npm install appium                                           
> npx wdio config

Answer below questions in order to make webdriverIO config file

Now you can see ‘wdio.conf.js’ file has been created as below

3. Add device capabilities and allure report configurations to the ‘wdio.conf.js’

Add device capabilities. The device name can be found when you type adb devices in cmd

platformName: 'Android',
platformVersion: '9',
deviceName: 'd5ccda7f',
app: '/Users/Desktop/apps/EriBank.apk', <app path>

Change ‘maxInstances’ number to 1 and comment ‘browser name’ which are highlighted in the above screenshot. To get more idea about Appium desired capabilities please refer

http://appium.io/docs/en/writing-running-appium/caps/

Add below code snippet to generate allure report with screenshots and steps

reporters: [['allure', {
outputDir: 'allure-results',
disableWebdriverStepsReporting: false,
disableWebdriverScreenshotsReporting: false,
}]],

Capture Elements using Appium desktop

We are going to automate ‘eribank’ native application. So, Google and download eribank APK

https://code.google.com/archive/p/eribank/downloads

Our Automation Scenario is to enter the username, enter password, click on login button and then validate the home page. So, let’s start to capture those elements’ XPaths!

Open Appium desktop and click on Start server button

2. Then click on the search icon

3. Enter your device capabilities, and app path in the desired capability section and click on the start session button

**Image: Add device capabilities and start session**

4. Once you start the session, Appium will launch the application and you can capture the elements

5. Let’s try to capture the username element. Click on username text field. Then you get element attributes in right side panel.

6. Here I want to write the XPath. I can write the XPath using the ‘class’ tag and the ‘text’ attribute. So XPath would be,

//android.widget.EditText[@text=‘Username’]

You can learn more on webdriverIO element locators by referring https://webdriver.io/docs/selectors.html.

Start writing a Test case

Now your project folder structure would be looks like this.

2. To start writing a test case, let’s create a folder call test and under that folder, create a file call TS_01.js. now your folder structure would look like this.

3. Now we can write our first test case. Open TS_01.js file and copy and paste below code

var wdio = require('webdriverio');
var allureReporter = require('@wdio/allure-reporter').default;
var assert = require('assert');describe('Test cases for EriBank', () => {
it('TC_01_Sign In To The Account', () => {allureReporter.addDescription('User should be able to login to the account and verify the home page');driver.pause(5000); //wait time have been given in mili seconds which means we are waiting for 5 secondsusername = $("//android.widget.EditText[@text='Username']"); //$ locator is equals to findelement functionusername.setValue('company'); //type user namepwd = $("//android.widget.EditText[@text='Password']");pwd.setValue('company'); //type passwordloginButton = $("//android.widget.Button[@text='Login']"); //element captured from textloginButton.click(); //click on login buttondriver.pause(5000); //wait time have been given in mili seconds. here we are waiting for 5 secondsverifyHomePage = $('//android.view.View[contains(@text,"Your balance is")]'); //element captured from partial textactualText = verifyHomePage.getText(); //get element textexpectedText = 'Your balance is: 100.00$'; // this is the expected value need to be in homepageassert.equal(actualText, expectedText); // compare expected value and actula value});
});

Execute the Test Case

1. Now all are set. Before executing the test case we have to make sure

>The device is connected to the machine

>Appium desktop is closed. This is not a big issue. But sometimes you will get some errors

>And go to the ‘wdio.conf.js’ file and change spec file path to your test file path

2. Now you can execute the test case with below command

npx wdio run wdio.conf.js

3. Finally, you will get the results

4. To open the allure report, use below command

allure generate allure-results --clean && allure open

You can learn more about allure reports by referring http://allure.qatools.ru/

This report opens in localhost. If you need to share this report with the team, you can host the report in netlify and easily share the report by sending a link.