Mobile Test Automation using WebDriver.io and Appium

Benefits of Mobile Automation Testing:

Faster App Deployment: Manual testing can be time-consuming and resource-intensive when it comes to identifying bugs in code. Mobile automation testing reduces the time and effort required by using automation tools. These tools enable quick checks to ensure the code performs as desired, leading to a faster feedback loop and accelerated app deployment.

Improved Efficiency: With automated testing, there is no need for human intervention. Tests can be scheduled to run overnight, and results can be collected the next morning. By automating the testing process, app developers and QA teams can spend less time on testing and focus more on other critical tasks. This boosts overall productivity and efficiency.

Precision in Testing: Mobile automation testing is more reliable than manual testing, which is prone to human errors. Automated tests produce precise and consistent results, reducing the likelihood of bugs. Test cases generated by automated systems enhance reliability and minimize the probability of errors when launching the app.

Real-time Feedback: Automated testing provides instant feedback. Tests run quickly, and test reports are generated immediately. This enables developers to promptly address any malfunctions or issues detected during the testing process. Real-time feedback helps in identifying and resolving problems swiftly, ensuring app quality.

Cost Savings: Contrary to common misconception, automated testing is more cost-effective than manual testing. Manual testing can be repetitive and monotonous, leading to increased chances of human error. Automation increases testing speed and accuracy, reducing the need for extensive manual intervention. Once the automated testing scripts are developed, they can be reused 24/7 without incurring additional costs.

What is WebDriver.io?

WebdriverIO is an open-source testing automation framework written in JavaScript and running on NodeJS. Next-gen browser and mobile automation test framework for Node.js

Why Webdriver.IO?

WebdriverIO is a progressive automation framework built to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create a scalable, robust, and stable test suite.

Features of WebDriver.io:

Easy to Set up: WebdriverIO follows a simple setup process. Just install node packages using npm and start testing

Customization: WebdriverIO is highly extendable so users can customize the framework as they need

Cross-Browser Testing: WebdriverIO supports multiple browsers such as Chrome, Edge, Firefox, Internet Explorer, and Safari.

Native Mobile Application Testing: WebdriverIO framework can be extended to test native mobile applications.

Multiple Tab/Window Support: WebdriverIO Supports switching to and from various windows and tabs.

iFrame Support: WebdriverIO doesn’t restrict in terms of iFrame. Testers can automate iframe-based scenarios using simple web driver commands.

Reporters: WebdriverIO supports more than dozens of reporters.

Testing Framework/Assertions: WebdriverIO supports Mocha, Jasmine, and Cucumber test frameworks.

Parallel Testing: Testers can configure WebdriverIO to launch multiple instances and execute tests parallelly.

Screenshots: WebdriverIO can be configured to take screenshots for tests.

Video: Though WebdriverIO doesn’t support video recording out of the box it can be configured to do so.

Pipeline Integration: WebdriverIO tests can be integrated into CI Systems like Jenkins, Azure, etc.

Selectors: It supports various types of selectors including CSS and Xpath.

Page Object Pattern: WebdriverIO Framework can be easily configured to Page Object Model.

File Upload and Download: WebdriverIO supports File Upload and Download features.

Mobile Automation with WebDriver.io: This enables code usage between iOS, Android, and Windows test suites. It runs on iOS and Android applications using the WebDriver protocol.

Technology stack: WebDriver.io, TypeScript, Appium, Android Studio, Cucumber, Node js, Browser Stack

Requirement For Mobile Automation using webdriver.io:

Pre-Setup

Installation & Configuration

Install the latest stable version of Android Studio from https://developer.android.com/studio

Then Install android-platform-tools from CLI

Install JDK’s latest stable version from here https://www.oracle.com/java/technologies/javase-jdk16-downloads.html

Download the latest stable version of VS Code from https://code.visualstudio.com/download

Install the latest version of Allure for Report Generation from https://docs.qameta.io/allure/

Download and install the latest LTS Node.js – https://nodejs.org/en/download

Install Following Dependencies

Commands to install the dependencies

npm i @wdio/allure-reporter
npm i @wdio/appium-service
npm i @wdio/browserstack-service
npm i @wdio/cli
npm i @wdio/cucumber-framework
npm i @wdio/local-runner
npm i @wdio/mocha-framework
npm i chromedriver
npm i wdio-chromedriver-service
npm i ts-node
npm i webdriverio
npm i allure-commandline
npm i appium

Official website links:

https://webdriver.io/

https://appium.io/

https://cucumber.io/

your packages will look like in package.json

"devDependencies": {
    "@wdio/allure-reporter": "^8.0.13",
    "@wdio/appium-service": "^8.0.13",
    "@wdio/browserstack-service": "^8.0.11",
    "@wdio/cli": "^8.0.13",
    "@wdio/cucumber-framework": "^8.0.13",
    "@wdio/local-runner": "^8.0.13",
    "@wdio/mocha-framework": "^8.0.13",
    "@wdio/spec-reporter": "^8.0.13",
    "chromedriver": "^108.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
    "wdio-chromedriver-service": "^8.0.1",
    "webdriverio": "^8.0.13"
  },
  "dependencies": {
    "allure-commandline": "^2.20.1",
    "appium": "^1.22.3"
  }

Use of Config file in wedriver.io:

In WebDriver.io, the config file (wdio.conf.js) is a crucial component used for configuring and customizing the test execution environment. It allows you to define various settings, options, and capabilities for your WebDriver.io tests. The config file acts as a central configuration hub for your test suites and provides flexibility in managing different test environments and setups.

Here are some common uses of the config file in WebDriver.io:

Specifying Test Framework and Reporter:

You can define the test framework (e.g., Mocha, Jasmine) and the reporter (e.g., Spec, Dot, Allure) for your test runs. This ensures that the tests are executed using the desired framework and provides appropriate reporting formats.

Defining Test Files and Suites:

You can specify the test files or directories containing the test files to be executed during a test run. Additionally, you can define test suites, which allow you to group related tests together for organized execution.

Configuring Test Environments:

The config file allows you to configure different test environments (e.g., local, remote, cloud-based) and set the desired capabilities for each environment. This includes specifying the browser or device to be used, browser version, operating system, and other relevant configurations.

Managing Selenium Grid and WebDriver Services:

If you’re using a Selenium Grid or WebDriver service, the config file lets you configure the connection details and capabilities for these services. You can specify the host, port, and other relevant configurations for connecting to the grid or service.

Defining Hooks and Lifecycle Events:

WebDriver.io provides hooks and lifecycle events that allow you to execute code at specific points during the test execution cycle. The config file lets you define these hooks, such as before and after hooks, to perform setup and teardown actions or customize test behavior.

Setting Timeout and Retry Options:

You can configure timeout values for various actions, such as test execution, page loading, and element interactions. Additionally, you can define retry options, which specify the number of times a test should be retried in case of failures.

Integrating with Test Services and Frameworks:

WebDriver.io supports integration with various test services and frameworks, such as Appium, Sauce Labs, and Cucumber. The config file allows you to set up and configure these integrations, enabling seamless usage and interaction with these services.

By utilizing the config file effectively, you can streamline and tailor your WebDriver.io test runs according to your specific requirements. It provides a flexible and centralized approach to managing test configurations, environments, and other essential aspects of your test automation setup.

Prerequisites for the Android Studio:

To use Android Studio, you will need to ensure that your system meets the following prerequisites:

Operating System:

Android Studio is compatible with Windows, macOS, and Linux operating systems. Make sure you have a supported version of the operating system installed on your computer.

Java Development Kit (JDK):

Android Studio requires a compatible version of the JDK to be installed. It is recommended to use the latest stable version of JDK. Currently, Android Studio supports JDK 8 or higher. You can download the JDK from the Oracle website or use OpenJDK.

System Requirements:

Android Studio has certain hardware requirements to function optimally. The exact specifications may vary depending on the version and updates of Android Studio, but generally, you should have:

Android SDK:

Android Studio requires the Android SDK (Software Development Kit) to develop and test Android applications. The SDK provides libraries, APIs, and tools necessary for app development. Android Studio includes a bundled version of the Android SDK, which you can install during the Android Studio installation process. Alternatively, you can download the SDK separately and configure Android Studio to use it.

Emulator Requirements:

If you plan to test your apps on emulated devices, your system should meet the requirements for running the Android Emulator. This includes having an Intel or AMD processor with virtualization extensions enabled in the BIOS settings.

Internet Connection:

An internet connection is required during the installation and setup process of Android Studio. It is necessary to download additional components, SDK packages, and updates. It’s important to note that the specific requirements and recommendations may change with different versions of Android Studio. It’s always a good practice to refer to the official documentation and system requirements provided by Google for the most up-to-date information before installing Android Studio.

What is use tsconfig.json:

The tsconfig.json file is used in TypeScript projects to configure the TypeScript compiler (tsc) and specify the compilation settings for your TypeScript code. It provides a way to customize the behavior of the TypeScript compiler and control how your TypeScript files are transpiled into JavaScript.

key uses and features of the tsconfig.json file:

Compiler Options:

The tsconfig.json file allows you to define various compiler options to specify how the TypeScript compiler should handle your code. These options include target ECMAScript version, module system (e.g., CommonJS, ES modules), output directory, source map generation, strictness level, and more. You can tailor these options to match the requirements of your project and the desired JavaScript output.

File Inclusion and Exclusion:

Using the include and exclude properties in tsconfig.json, you can specify the files or directories to include or exclude from the TypeScript compilation process. This helps you define the scope of compilation and avoid unnecessary collection of files that are not part of your project.

Module Resolution:

TypeScript supports different module resolution strategies (e.g., Node.js, Classic) for resolving module imports in your code. The tsconfig.json file allows you to specify the desired module resolution strategy using the module resolution compiler option.

Type Checking and Error Reporting:

TypeScript provides powerful type-checking capabilities. The tsconfig.json file enables you to configure the level of type-checking strictness using options like strict, noImplicitAny, strictNullChecks, and more. By adjusting these options, you can control the rigor of type checking and the level of error reporting during compilation.

Project References:

With the tsconfig.json file, you can set up project references, which enables you to organize your TypeScript code into multiple smaller projects and manage their dependencies. Project references allow you to compile and reference TypeScript code across projects and enforce dependencies between them.

Extended Configuration Inheritance:

The tsconfig.json file supports extending and inheriting configurations from base configuration files using the extends property. This allows you to define a common set of compiler options in a base configuration file and override or extend them in specific project configurations.

IDE and Tooling Integration:

IDEs and development tools, such as Visual Studio Code and other TypeScript-aware editors, use the tsconfig.json file to provide features like IntelliSense, code navigation, error highlighting, and build integration. The configuration file helps tools understand the project structure, dependencies, and compilation settings, enhancing the development experience.

The tsconfig.json file serves as a central configuration file for TypeScript projects, enabling you to customize and fine-tune the TypeScript compilation process according to the needs of your project. It helps maintain consistency, improves code quality, and ensures smooth integration with development tools and workflows.

In Behavior-Driven Development (BDD), feature files, step files, and page files are essential components used to describe and implement the behavior of a software system. BDD focuses on collaboration and communication between developers, testers, and stakeholders by using a common language that is easily understandable by all parties involved.

Feature file Step Definition and Page object file:

Feature Files:

A feature file is a textual representation of a software feature or functionality. It typically describes the behavior of a specific feature from a user’s perspective. Feature files are written using a plain-text format, often in the Gherkin syntax. They are used to capture high-level scenarios, user stories, and acceptance criteria in a structured manner. Feature files serve as a communication tool between stakeholders, developers, and testers to ensure a shared understanding of the system’s behavior.

Step Files:

Step files, also known as step definitions or step implementations, are code files that provide the actual implementation of the steps described in the feature files. Each step in a feature file is associated with a corresponding step definition in the step files. Step files are written in a programming language (such as JavaScript, Java, Ruby, etc.) and contain the logic and actions to be performed for each step. They connect the feature files with the underlying codebase and define the behavior of the system in response to the steps described in the feature files.

Page Files:

In the context of BDD test automation, page files represent the Page Object Model (POM) or similar abstraction that represents the user interface (UI) elements and actions of a web application. Page files provide a structured way to define and manage the UI elements, such as buttons, forms, input fields, etc., along with associated methods for interacting with those elements. They encapsulate the UI interactions and provide reusable methods to perform actions on the web application’s pages. Page files enhance the maintainability and reusability of the test automation code.

In summary, feature files describe the behavior of a software feature in a structured, human-readable format. Step files provide the implementation of the steps described in the feature files, connecting them to the underlying codebase. Page files, specific to BDD test automation, represent a web application’s UI elements and actions, encapsulating the UI interactions and providing reusable methods. These files collectively enable collaboration, communication, and automated testing in a BDD approach.

Let’s See about Appium

‍Appium is an open-source tool for traditional automation, web, and hybrid apps on iOS, Android, and Windows desktop mobile platforms. Indigenous apps are those written using iOS and Android. Mobile web applications are accessed using a mobile browser (Appium supports Safari for iOS apps and Chrome or the built-in ‘Browser’ for Android apps). Hybrid apps have a wrapper around “web view”—a traditional controller that allows you to interact with web content. Projects like Apache Cordova make it easy to build applications using web technology and integrate them into a traditional wrapper, creating a hybrid application.

Importantly, Appium is “cross-platform”, allowing you to write tests against multiple platforms (iOS, Android), using the same API. This enables code usage between iOS, Android, and Windows test suites. It runs on iOS and Android applications using the WebDriver protocol.

Cucumber:

Cucumber is a tool for running automated tests written in plain language. Because they’re written in plain language, they can be read by anyone on your team. Because they can be read by anyone, you can use them to help improve communication, collaboration and trust in your team.

Android Emulator:

The Android Emulator simulates Android devices on your computer so that you can test your application on a variety of devices and Android API levels without needing to have each physical device. The emulator offers these advantages:

Flexibility: In addition to being able to simulate a variety of devices and Android API levels, the emulator comes with predefined configurations for various Android phones, tablets, Wear OS, and Android TV devices.

High fidelity: The emulator provides almost all the capabilities of a real Android device. You can simulate incoming phone calls and text messages, specify the location of the device, simulate different network speeds, simulate rotation and other hardware sensors, access the Google Play Store, and much more.

Speed: Testing your app on the emulator is in some ways faster and easier than doing so on a physical device. For example, you can transfer data faster to the emulator than to a device connected over USB.

In most cases, the emulator is the best option for your testing needs. This page covers the core emulator functionalities and how to get started with it.

Browser Stack:

BrowserStack is a cross-platform web browser testing tool that allows users to test their websites and mobile applications on different browsers and operating systems. It is available as a cloud-based service or as an on-premise solution. BrowserStack provides a range of features, including live testing, automated screenshots, and performance analysis. It is also compatible with a number of popular testing frameworks, such as Selenium, WebDriver, and Protractor. BrowserStack is a paid service, but it offers a free trial for new users.

Create a sample Appium Project:

initialize a project and create the package. json file

npm  init -y

Install Dependencies

npm  install

Install Webdriver.io

npm install -g webdriverio or npm install --save-dev webdriverio @wdio/cli

Generate config file

npx wdio config

This is how package.json will look:

{
  "name": "wdioappium",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "appium --address 127.0.0.1 --port 4723",
    "wdio": "wdio run ./wdio.conf.ts",
    "allure": "allure generate ./allure-results"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wdio/allure-reporter": "^8.0.13",
    "@wdio/appium-service": "^8.0.13",
    "@wdio/browserstack-service": "^8.0.11",
    "@wdio/cli": "^8.0.13",
    "@wdio/cucumber-framework": "^8.0.13",
    "@wdio/local-runner": "^8.0.13",
    "@wdio/mocha-framework": "^8.0.13",
    "@wdio/spec-reporter": "^8.0.13",
    "chromedriver": "^108.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
    "wdio-chromedriver-service": "^8.0.1",
    "webdriverio": "^8.0.13"
  },
  "dependencies": {
    "allure-commandline": "^2.20.1",
    "appium": "^1.22.3"
  }
}

This is how your Configuration file will look like:

import type { Options } from '@wdio/types'
export const config: Options.Testrunner = {
  user: 'x',
  key: 'x',
  autoCompileOpts: {
    tsNodeOpts: {
      project: './tsconfig.json',
    },
  },
  specs: ['./Features/Demo.feature'],
  exclude: [
  ],
  maxInstances: 1,
  services: [
    [
      'appium',
      {
        command: 'appium',
        args: {
          relaxedSecurity: true,
          address: '127.0.0.1/wd/hub',
          log: './appium.log',
        },
      },
    ],
  ],
  services: [
    [
      'browserstack',
      {
       app: 'C:/Users/Admin/harish2/android/calculator.apk',
        // OR
      },
    ],
  ],
  capabilities: [
    {
      path: '/wd/hub',
      'appium:automationName': 'UiAutomator2',
      platformName: 'Android',
      'appium:platformVersion': '9.0',
      'appium:deviceName': 'Google Pixel 3',
      'appium:app': 'C:/Users/Admin/harish2/android/calculator.apk',
      'appium:udid': 'emulator-5554',
    },
  ],
   capabilities: [
     {
       project: 'First Webdriverio Android Project',
       build: 'browserstack-build-1',
       name: 'local_test',
       device: 'Google Pixel 3',
       os_version: '9.0',
       app: 'bs://643870ef70d1d507902e6844d9669388060beac7',
       'browserstack.local': true,
   },
   ],
  ...
  logLevel: 'info',
  framework: 'cucumber',
  // ...
  reporters: [
    [
      'allure',
      {
        outputDir: 'allure-results',
        disableWebdriverStepsReporting: true,
        disableWebdriverScreenshotsReporting: true,
      },
    ],
  ],
  cucumberOpts: {
    require: ['./Features/step-definitions/calc.ts', '*.js'],
  },
}

Step-by-Step Configuration of Android Emulator using Android Studio:

Launch android studio

Create / Select a Device

And Click on the launch

Appium Desktop Configuration

Launch

How to Write BDD test

Add services in the wdio.conf.ts file
For Browser Stack :

services: [
    [
     'browserstack',
      {
        app: 'android/calculator.apk',
        // OR
      },
    ],
  ],

Add Capabilities in the wdio.conf.ts file:

capabilities: [
    {
      path: '/wd/hub',
      'appium:automationName': 'UiAutomator2',
      platformName: 'Android',
      'appium:platformVersion': '9.0',
      'appium:deviceName': 'Google Pixel 3',
      'appium:app': 'calculator.apk',
      'appium:udid': 'emulator-5554',
    },
  ],

Services for local Appium

services: [
    [
      'appium',
      {
        // This will use the globally installed version of Appium
        command: 'appium',
        args: {
          // This is needed to tell Appium that we can execute local ADB commands
          // and to automatically download the latest version of ChromeDrive
          relaxedSecurity: true,
          address: '127.0.0.1/wd/hub',
          // Write the Appium logs to a file in the root of the directory
          log: './appium.log',
        },
      },
    ],
  ],

Install cucumber

$ npm install @cucumber/cucumber

Write your Feature File then, write your feature in features/calculator.feature

Feature: Mobile App Feature
Scenario: Verify user can perform addition operation on calculator
When User taps on fou
And User taps on +
And User taps on four
And User taps on equals
Then User Verify total is 8

Create a Step definition features/support/calc.ts

const { When, Then } = require('@cucumber/cucumber')
import { DemoPage } from '../page/DemoPage'
let Demo = new DemoPage()
When('User taps on four', async () => {
  await Demo.firstNumber()
})
When('User taps on +', async () => {
  await Demo.Add()
})
When('User taps on equals', async () => {
  await Demo.Equals()
})
Then('User Verify total is 8', async () => {
  await Demo.Verify()
})

Here Create a page file calculator.ts

export class DemoPage {
  async firstNumber() {
    await $('//android.widget.Button[@text="4"]').click()
  }
  async Add() {
    await $('//android.widget.Button[@text="+"]').click()
  }
  async Equals() {
    await $('//android.widget.Button[@text="="]').click()
  }
  async Verify() {
    const text = await $('//android.widget.TextView[@text="8"]').getText()
    expect(text).toEqual('8')
  }

Create a tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "CommonJS",
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/mocha-framework",
      "@wdio/appium-service"
    ],
    "target": "ES2015"
  }
}

Create a folder apk and paste the .apk file in it. Execute the following command in terminal

"scripts": {
    "test": "appium --address 127.0.0.1 --port 4723",
    "wdio": "wdio run ./wdio.conf.ts",
  },

Run the test

npm  run test
npm run wdio

Results :

Allure Results:

Conclusion:

Webdriver.io has great support for Mobile automation and using Webriver.io users can Quickly set up the Mobile automation framework.BDD helps Teams across Organizations to work collaboratively and helps non-tech teams to understand the flow of applications. Tools like Appium make mobile automation easy. combination of Webdriver.io cucumber appium and BrowserStack makes things more. Reliable and useful in modern Mobile automation testing.