banner image 1 banner image 2

WebdriverIO — JAVA to JS Automation for Mobile Apps

September 23, 2022
4 mins
blog-img 1
Padmini Aishwarya Bolgam

Develop Automation Script using Page Object Model and Mocha for your Mobile App

By Padmini Aishwarya Bolgam- A Sitha “The Warrior” in her own Life!

In the initial days of my career, I used to hear my seniors saying WebdriverIO, Appium and many keywords then I started feeding my brain with some knowledge about the tools that we use for our Mobile App Automation. I’m gonna take you on the Journey of the iOS App Automation Architecture and some challenges faced to build the beautiful Framework.

Let’s get Started:

There was a saying “Without a solid foundation you’ll have trouble creating anything of value”. So to create value for Beautiful Well Structured Automation we need to have a great and strong foundation i.e. Setup and Folder implementation. We have implemented Page Object Model(POM).

Pre-Requirements for setting up

  1. Visual Studio Code to be installed on the System.
  2. Node.js and NPM
  3. Xcode for Simulator(iOS) and Android Studio for Emulator(Android).
  4. JAVA

For iOS Native apps, we need to use the .app file for the Simulator and the .ipa file on a Real device to run the app.

Firstly we need to install WebdriverIO

WebdriverIO Architecture

Then we need to setup the Configurations by running the below command

npx wdio config

Configurations for Setup


Appium is an open-source, cross-platform test automation tool for native, hybrid, and mobile web apps, tested on simulators (iOS, FirefoxOS), emulators (Android), and real devices (iOS, Android, FirefoxOS).

Appium can be installed through the following command globally

npm install appium -g

  • However while using WebdriverIO we don’t need to start it manually, it already initialises it automatically.
  • To use desired Simulator then we need to download from Xcode -> Preferences-> Components-> Simulators

As earlier said we have followed Page Object Model(POM), we have segregated the folders in the following ways

Page Object Model Framework
  • We are using JavaScript as the medium to program our apps.

Packages required:

  1. Mocha-> Is needed to run the test suite
  2. Chai -> For Assertions

Config: This config is a specific config called shared.conf.js which is having all the default configurations for both the Apps(iOS & Android). This holds separate configuration files for both Android and iOS. These conf.js files have desired capabilities such as .app file path, version of the simulator, and name of the simulator.

Specs Files folder: This is having a folder called FrontEnd that contains files that have test cases for each page such as TS01.Onboarding.js which means <TestSuiteNumber>.<PageName>.js

Source: Source files contain the Test Data of each module.

Screen Activity: Each .js file contains methods that are used in each page/module.

Screen Objects:

  • Each .js file contains locators of each page that identify the element.
  • Getters will return the element to page activity depending upon whether it belongs to iOS or Android.

Utils: Utils are the connectors that are used to fetch the data such as DB, Mails, API Connections, etc.

sendMail.js: This .js file contains the mail configurations on what needs to be sent in the mail.

MysqlDBConnection.js: This .js file has all the Database Connectivity methods through which we will be able to get the data from the Databases.

Wrappers: Wrappers are .js files with functions that are used for the overall App commonly.

Swipe.js: This .js file contains Swipe functions regardless of the screen Size.

appfunctions.js: This .js file contains app functions through which we use it in common for each page.

basefunctions.js: This .js file is a core and center of the project which interacts App with WebdriverIO Functions.

constants.js: Constants have the number of JSON Objects which have parameters with configurable values for running the test cases.

alertmessages.js: This file contains all the alert messages of each page that need to be validated according to the functionalities.

Runner: It has a wdioFunctions.js file. This file is a template for how the report has to generate in the mail.

Reporter: We are using allure as a reporter to create allure test reports.

Allure Report

Installing Appium Inspector

The next step is to install the Appium Inspector. Appium Inspector serves the purpose of inspecting UI elements on mobile apps.

To use the Appium Inspector firstly we need to execute the command appium in the terminal, Then appium starts

Now open the appium inspector and enter the following values

Config Setup in Appium Inspector
Desired Capabilities in Appium Inspector



Meet the team!


Padmini Aishwarya Bolgam


Seema Jain

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to
blog-img 2


blog-img 3
5 mins
May 17, 2023
Sharing Data Between Controllers: Best Practices S...

This article will help you to understand the diffe

By Naveen C

blog-img 3
5 mins
March 21, 2023
Understanding Auto Layout and Constraints in Swift...

This article gives you an easy way of understandin

By Ramasamy P