Getting Started With WebdriverIO Appium: With Examples

What is WebdriverIO?

WebdriverIO is a modern test automation framework built to automate web and mobile applications. It is an open-source test automation framework written in JavaScript and runs on NodeJS. The latest version of WebDriver is v8, released in December 2022.

It can be used to perform end to end testing for web as well as mobile applications on local machines and cloud testing platforms like LambdaTest. It can also be used to run component tests in the browser.

WebdriverIO provides flexibility to write the tests in JavaScript or TypeScript using frameworks like Mocha, Jasmine, or Cucumber. It supports multiple reports like spec, dot, JUnit, allure, etc.

Why WebdriverIO?

Using WebdriverIO has multiple benefits, such as easy configuration, setup, and support for web and mobile automation testing. Let’s discuss the points one by one in detail.

• Easy configuration and setup

The setup and configuration for WebdriverIO is easy and as simple as opening the terminal and typing in the command “npm init wdio”. WebdriverIO will prompt a few questions related to configuration and setup, and that’s it for the setup!

Details related to the installation, configuration, and setup of WebdriverIO will be discussed in the later section of this WebdriverIO Appium tutorial.



• Cross browser testing

Cross browser testing ensures that the web application works fine on different browsers like Chrome, Firefox, and Microsoft Edge and operating systems like Windows, macOS, etc.

WebdriverIO supports cross browser testing that can help improve overall user experience by testing websites on multiple browsers and platform combinations.




• Support for both web and mobile application testing

The major benefit of using WebdriverIO test automation framework is its support for testing web applications written in React, Vue, Angular, and Svelte frontend frameworks.

It can also be used for testing native and hybrid Android as well as iOS mobile applications running on real devices, real devices on cloud platforms, and emulators/simulators. WebdriverIO supports testing native desktop applications written in Electron.js and also helps perform unit and component testing of web components in the browser.



• Support for different test automation frameworks

WebdriverIO can be used with various testing frameworks, such as Mocha, Jasmine, and Cucumber, making it highly adaptable.



• Detailed reporting mechanisms

It supports major test reports like Allure reports, JUnit reporters, Dot reporters, Spec reporters, etc., that can be used to showcase the test automation runs.



• Support for popular programming languages

WebdriverIO supports popular programming languages like JavaScript and TypeScript. We can leverage this support of multiple languages to write our automated tests efficiently with the programming language of our choice.



• Easy integration with cloud platforms

With multiple operating systems, browsers, mobile devices, etc. Cloud platforms for software testing are the need of the hour. These platforms offer convenient access to the necessary infrastructure needed for testing, ensuring a smooth and uninterrupted testing experience.

WebdriverIO can be integrated with cloud-based platforms like LambdaTest easily. We just need to install the wdio-lambdatest-service using npm, and we are good to go.



• Support for web component testing

WebdriverIO allows performing web component testing using Browser Runner that initiates and executes the framework within the browser rather than in JSDOM like many other test frameworks.

This allows developers/testers to run the component tests in the actual browser. React components can be directly tested in the browser using WebdriverIO.



• Built-in auto wait support

WebdriverIO internally provides a built-in mechanism that handles the auto waiting. It uses explicit wait on elements before interacting with them.

It is recommended by WebdriverIO not to use implicit wait as it internally handles all element wait actions explicitly.



• Supports WebDriver BiDi

With Version v8, WebdriverIO provides BiDi support based on WebDriver protocol.

It is a web standard for automating browsers that guarantees the ability to run the browser tests rather than as opposed to a browser engine.



• Multi-language documentation

With the recent addition of multi-language support to the documentation page of WebdriverIO, the documentation can be translated into German, Spanish, French, Hindi, Tamil, Persian, Ukrainian, etc. This helps the QA community all over the world to use WebdriverIO easily.

WebdriverIO Architecture

WebdriverIO follows a modular architecture. At its core, it utilizes the WebDriver protocol to communicate between the client and the browser or mobile application under test. The architecture consists of a test runner, WebDriver Client, and the Selenium server. To learn more about it, you can go through this tutorial on Cypress vs WebdriverIO.

The Test runner manages the test execution and reporting. WebDriver client helps in interacting with the browser or the mobile application under tests using the WebDriver protocol. Selenium server acts as a bridge between the client and the browser or mobile application.

This modular architecture allows smooth integration with various test frameworks allowing the testers and developers to write and execute the automation tests seamlessly.

Note : Automated mobile app testing on the cloud. Try LambdaTest Now!

What is Appium?

Appium is a popular mobile automation testing tool that supports automating iOS and Android mobile applications. Using Appium, Native, Web, and Hybrid mobile applications can be automated seamlessly. Checkout our earlier blog on web vs hybrid vs native apps, which details the different types of mobile applications currently available in the market.

Referencing our previous blog post on emulator vs. simulator vs. real device, you can gain valuable guidance in selecting the most suitable option for your needs. Additionally, Appium tests can run on actual devices, and cloud platforms such as LambdaTest offer the convenience of executing these tests on real devices.

Let’s now quickly move toward the installation and setup of WebdriverIO. We will use the following tools and programming language to automate the iOS mobile application in this WebdriverIO Appium tutorial.

As a prerequisite, NodeJS needs to be installed on the local machine.

• Programming Language: TypeScript - Version 5.0.4
• Test Automation Framework - WebdriverIO - Version 8
• Mobile Automation Framework: Appium - Version 2.0
• Cloud Platform to run tests on real mobile devices: LambdaTest
• wdio-lambdatest-service - Version 2.0.0 - Checkout Step 14 in the later section of this WebdriverIO Appium tutorial where details are provided to install this service. Checkout LambdaTest Service for more details.

Application Under Test

We will be using the Proverbial App on iOS built by LambdaTest for running the demo tests. This is a sample iOS hybrid application with some basic features of an iOS application with buttons, notifications, text, webview, etc.

Test Strategy for Mobile Automation

Following scenarios will be covered as part of the mobile automation demo of the Proverbial App using WebdriverIO Appium.

Test Scenario 1

On the Homepage of the app, click on the Text button and verify the text Proverbial is displayed correctly.

Test Scenario 2

On the Homepage of the app, click on the Notification button and check that the notification is displayed.

Test Scenario 3

Navigate to the Browser page by clicking on the Browser menu link at the bottom. Verify that the Find button is displayed on the browser page

Let’s now move toward the installation and configuration of WebdriverIO and check out how to implement the scenarios in actual code.

Installation and Setup

To begin with, let’s first install TypScript, as it is the programming language we will be using to write the automated tests.

TypeScript Installation

With Node, it is pretty easy and simple to install any package. We just need to run the following command to install TypeScript:

npm install TypeScript ts-node --save-dev

To verify that the installation succeeded and TypeScript is installed, we can run the command tsc -v that should print the version of TypeScript in the terminal.

We can see version 5.0.4 printed in the terminal.

Let’s now install WebdriverIO and the related services to begin with mobile automation.

WebdriverIO Installation

Step 1

It is quite simple to install WebdriverIO, we just need to run the following command:

npm init wdio

This command will first install the @wdio/cli service, the WebdriverIO test runner command line interface. Once installed, it will prompt you with a different set of configuration questions. Let’s go through them one by one in this section of this WebdriverIO Appium tutorial.

Note: For selecting the option for the questions asked in the terminal, we can use the arrow keys for moving up/down for selection and press Enter/Return Key to accept the option.

Step 2

Q. Where should your tests be launched?

Select - local - for e2e testing of web and mobile applications

Selecting this option will allow us to run the tests on our local machine. However, this option also works when we plug in any cloud platform services like LambdaTest to run our tests on real devices in the cloud.

Step 3

Q. Where is your automation backend located?

As we will be running on the LambdaTest cloud platform, select the option

In the cloud using Testingbot or LambdaTest or a different service

Since we have chosen the cloud option for our automation backend, the subsequent inquiry pertains to the host address and port of the cloud service.

Step 4

Q. What is the host address of that cloud service?

As we will be running the tests on the LambdaTest cloud platform, the host address for mobile is @mobile-hub.lambdatest.com/wd/hub

The value for the host address was added by following this GitHub project that provides all configuration and desired capabilities implementation details.

Step 5

Q. What is the port on which that service is running (80)?

Let’s accept the default value, which is 80.

The point to note here is that we can provide another port number in case the default port 80 is in use.

As we have chosen to run the tests on the cloud platform, WebdriverIO recognizes that we will have to provide the username and access keys of the respective platform. Since these are secret values, they should be provided as an environment variable.

Step 6

Q. Environment variable for username

Let’s enter the variable name as LT_USERNAME (you can add any text here, this will be used at the time of test execution, where we will use this value to store the actual Username for the cloud platform) for now, we will learn how to use this in the later section of this WebdriverIO Appium tutorial when we are running the tests on cloud.

Step 7

Q. Environment variable for username

As we did for username, let’s enter the variable name as LT_ACCESS_KEY.

Step 8

Q. Which framework do you want to use? (Use arrow keys)

Select the Mocha framework, i.e., Mocha (https://mochajs.org/)

Step 9

Q. Do you want to use a compiler? (Use arrow keys)

Here as we will be using TypeScript for writing the tests, so let’s select TypeScript (https://www.TypeScriptlang.org/)

Step 10

WebdriverIO also provides us with the option to help us with the test samples so we can begin writing the tests easily by checking out the sample tests.

Q. Do you want WebdriverIO to auto-generate some test files? (Y/n)

If you need auto-generated files, Press Y, or else press N. We will be pressing Y here.

Step 11

Provide the path in the project at /test/specs/**/*.ts

A Page Object Model (POM) helps maintain the project well. We can place all the page objects of different pages in the application in a separate class. This way, maintenance of the page object becomes easier, and also it helps in writing tests neatly.

Step 12

Q. Which reporter do you want to use? (Press <space> to select,<a> to toggle all, <i> to invert selection, and <enter> to proceed)

Select - spec

Test automation report helps us analyze the health of the software under tests by providing us with the data related to total test runs, how many passed and how many failed, error logs, time taken to run tests, etc.

Step 13

Q. Do you want to add a plugin to your test setup? (Press <space> to select,<a> to toggle all, <i> to invert selection, and <enter> to proceed)

Select wait-for by pressing the space bar key and then press Enter.

wdio-wait-for plugin is a third-party package that provides a set of common conditions that offer functionalities to wait for certain conditions until the defined task is complete.

Step 14

Q. Do you want to add a service to your test setup? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

Select > lambdatest

WebdriverIO has LambdaTest support out of the box. wdio-lambdatest -service manages the tunnel and job metadata for LambdaTest users. Using this service, we can easily set up the user and accesskey in the wdio.conf.js file.

Step 15

Q. What is the base URL?(http://localhost)

Leave it blank, as we will be running tests on a mobile application.

A base URL probably is required in case of web automation. It is the web application URL that will be navigated for performing test automation

Step 16

Finally, we came to the end of the questionnaire. We will now be asked if we want the command line interface to run the installation command to install all the dependencies.

Q. Do you want me to run `npm install` (Y/n)

Press N and press Enter key.

It is up to us if we want to get all the installations done right away by pressing Y, or we can say N, and Command Line Interface will provide us with the npm installation command in the terminal that can be run manually.

We will check out both steps here to demo the working behavior of the configuration setup. Let’s say N for now.

As we can see in the below screenshot, after successfully setting up TypeScript, the npm install command is printed in the terminal that can be copy pasted and run later to install all dependencies.

WebdriverIO creates the config file named wdio.conf.ts, which auto-generates the sample test files and successfully adds the WebdriverIO scripts to package.json.

The command to execute the test also gets printed, which is quite helpful to beginners and experienced testers using WebdriverIO Appium for the first time.

Note: Here is an additional step demonstrated to illustrate the configuration setup process. Please note that this step is optional and can be skipped if you have selected "N" earlier.

You just need to copy the npm install command printed in the terminal and run it in the root folder path of your project to install all the dependencies manually.

Let’s now check out what happens if we provide the answer to the npm install question by pressing Y.

Step 17

Do you want me to run `npm install` (Y/n)

Press Y and press Enter key.

All the packages will start getting installed as soon as the Enter key is pressed after pressing Y.

We can see the package names getting printed in the terminal. While installation, if there are any warnings or errors in the specific packages, those logs will also get printed.

Once the installation is complete, we should be able to see the success message printed.

To confirm all the dependencies are successfully installed, navigate to the project root folder and open the package.json file.

Project Structure

The Project Structure should look as per the screenshot below once the installation is complete with the autogenerated sample tests and pageobjects folders.

Within the project, you will find two JSON files. The package.json file encompasses all the dependencies and related components, whereas the tsconfig.json file contains the configuration details specific to TypeScript.

Note: These sample tests and page object folders can be deleted once we have the actual tests in place. These sample tests are just for guidance purposes.