WebdriverIO - Quick Guide

WebdriverIO - Introduction

WebdriverIO helps to automate any tests designed for a present-day application developed in React, Angular, Polymerer Vue.js, and so on. Besides, it can also be used in Android and iOS platforms.

WebdriverIO is implemented in Node.js and the automation code is written in JavaScript. It comes under the umbrella of Selenium. All the capabilities of Selenium are also available in WebdriverIO, along with certain accessory assertions available for validations.

Now-a-days, the front end of the majority of applications is developed with the JavaScript frameworks like React, Angular, and so on. WebdriverIO is really useful for testing these applications.

This is because WebdriverIO coding is also done in JavaScript. This tool falls under the roof of Selenium and also there are some additional APIs. If we are aware of Selenium, then gaining knowledge in WebdriverIO is a simple task.

WebdriverIO can also be used for testing normal applications but if we are using WebdriverIO for verifying any application implemented in React, Angular, Polymerer Vue.js, and so on, we can enjoy an additional edge in building a robust framework.

If we are creating Selenium tests in JavaScript, then WebdriverIO should be the choice. There are other tools like Cypress which is based on the JavaScript framework but it does not fall under the umbrella of Selenium.

If we follow the npm trends for WebdriverIO downloads for the last few years, we shall observe an upward trend towards the use of WebdriverIO available from the link mentioned below −

https://www.npmtrends.com/webdriverio

The following screen will appear on your computer −

Reports

Some of the reports generated in WebdriverIO are as follows −

Allure
Spec
JUnit
HTML
JSON
Cucumber JSON

Services

Some of the services offered by WebdriverIO are as follows −

Appium
Docker
Selenium Standalone
ChromeDriver
Firefox Profile
DevTools

Testing Frameworks

Some of the testing frameworks supported by WebdriverIO are as follows −

Cucumber
Jasmine
Mocha

WebdriverIO - Prerequisite

As a prerequisite for WebdriverIO, we need to have an editor to write the JavaScript code. For this, we can use the Visual Studio Code. We can download it from the below link −

https://code.visualstudio.com

Step 1 − Based on the local operating system we have for example - macOS, Linux or Windows, we need to select the link for download.

The following screen will appear on your computer −

Step 2 − A zip file gets downloaded after clicking the Download button. Click on this zip file and the Visual Studio Code application should be available on the machine.

The following screen will appear on your computer −

Step 3 − Double-click on Visual Studio Code and it gets launched along with the welcome page. The following screen will appear on your computer −

WebdriverIO - Architecture

WebdriverIO architecture consists of the following components −

NodeJS
WebdriverIO
JavaScript
JSON Wire Protocol
Services
Browsers
Application

Nodejs is enabled to execute the JavaScript runtime environment. It is actually an open-source project. WebdriverIO is developed on Nodejs and JavaScript is the script implemented by the end-user using the WebdriverIO library.

Thus the JavaScript implemented by the end-user passes a request using the WebdriverIO via Nodejs to the Services (in the format of an HTTP command). The entire process is done following the JSON Wire Protocol.

Services send the request to the browsers like Chrome, Firefox, and so on to execute a test against the application under test. Thus the Services can be termed as a middle-layer between the browser and the automation framework.

WebdriverIO - Getting Started with NodeJS

WebdriverIO coding is done using JavaScript. For this, NodeJS has to be installed since it is a JavaScript engine. Only after its installation, we can execute WebdriverIO tests. The steps to configure NodeJS are listed below −

Step 1 − Launch the application using the below link −

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

Step 2 − As per the local operating system (Windows, Mac or Linux) we are using, click on the link to download the Installer. The following screen will appear on your computer −

Step 3 − Once the installer is downloaded, click on it. Navigate to the Node.js Installer welcome screen. Click on Continue. The following screen will appear on your computer −

Step 4 − Agree to the terms of agreement of Nodejs. The following screen will appear on your computer −

Step 5 − Click on Install.

Step 6 − Once the success message of Nodejs installation is displayed, click on Close. The following screen will appear on your computer −

Step 7 − To check if Nodejs is installed successfully, open the terminal and run the command −

node

The following screen will appear on your computer −

The version of the Nodejs installed in the machine should be displayed.

WebdriverIO - Installation of NPM

Once Nodejs has been installed, we have to create a NPM folder. NPM is actually the package manager for writing tests in JavaScript. The official page for NPM is available in the below link −

https://www.npmjs.com/search?q=webdriverio

Once we launch this page, enter WebdriverIO in the search box and click on Search, to get the npm packages for WebdriverIO. The following screen will appear on your computer −

Create NPM Project

The steps to create a NPM project are listed below −

Step 1 − Create an empty folder, say webdriverIO in a location.

Step 2 − Open the terminal and move from the current directory to the directory of the empty folder that we have created.

Step 3 − Run the following command −

npm init -y

The y parameter is given to set the default values. The following screen will appear on your computer −

Step 4 − The output obtained on running the command in Step 3 says that all the default configurations have been captured within the package.json file. It is generated within the folder we have created (named webdriverIO) in Step 1.

The following screen will appear on your computer −

This package.json contains all the dependencies which we need to work with the WebdriverIO project. To get any package under NPM, we can refer to the link −

https://www.npmjs.com/

WebdriverIO - VS Code Installation

In this chapter, let us understand how to install the Visual Studio (VS) Code in WebdriverIO.

The steps to install the Visual Studio Code are listed below −

Step 1 − Navigate to the below link −

https://code.visualstudio.com/

Step 2 − Depending on the local operating system we have for example - macOS, Linux or Windows, we need to choose the link for download.

The following screen will appear on your computer −

Step 3 − A zip file gets downloaded after clicking the Download button. After downloading this file has completed, click on it and the Visual Studio Code application should become available for use.

The following screen will appear on your computer −

Step 4 − Double-click it and the Visual Studio Code application should launch along with the welcome page.

The following screen will appear on your computer −

Step 5 − Click on the Open folder link and import the folder that contains the package.json file. The details of how the package.json file got created are discussed in detail in the Chapter titled Installation of NPM.

The following screen will appear on your computer −

WebdriverIO - Package.json

Once the package.json file gets generated, we need to install other npm packages for WebdriverIO. The details of how the package.json file got created are discussed in detail in the Chapter titled Installation of NPM.

The necessary packages for WebdriverIO in the NPM registry can be found in the below link −

https://www.npmjs.com/package/webdriverio

The following screen will appear on your computer −

For installation of WebdriverIO, we have to run the below command from the terminal −

npm i webdriverio

npm install webdriverio.

The following screen will appear on your computer −

After the command gets executed successfully, the package.json now displays the WebdriverIO version installed.

We can verify if the WebdriverIO has installed successfully, if the folder node_modules created within the project contains the webdriverio folder.

The following screen will appear on your computer −

WebdriverIO - Mocha Installation

Mocha is a testing framework based on JavaScript which is built on Nodejs. It makes asynchronous test execution flow interesting and simple. Mocha tests can be run serially.

It is capable of producing accurate and customizable reports. Also, the uncaught exceptions can be easily tagged with the proper test cases. The details of Mocha can be found in the below link −

https://www.tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

To install Mocha packages in the NPM registry, the command is as follows −

npm install mocha

The following screen will appear on your computer −

After the command has been executed successfully, the Mocha version installed gets reflected within the package.json file.

Selenium Standalone Server Installation

WebdriverIO works under the roof of Selenium. To establish communication with the browser, we are required to install the Selenium standalone server.

To install Selenium standalone server, we have to run the following command −

npm install selenium-standalone

Or,

npm i selenium-standalone.

The following screen will appear on your computer −

After the command has been executed successfully, the Selenium standalone server package version installed gets reflected within the package.json file.

WebdriverIO - Configuration File generation

WebdriverIO tests are controlled from a Configuration file. It is often considered the heart of WebdriverIO. It contains details on what test cases to be executed, browser on which the tests should run, global information - timeout, reports, screenshots and so on.

In WebdriverIO we do not execute a single test. We are required to trigger the Configuration file with the help of the Test Runner. Test Runner scans the information provided in the Configuration file and then triggers the tests accordingly.

To get the Test Runner, we have to install the WebdriverIO CLI dependencies. To install this and save it in the package.json file, we have to run the below mentioned command −

npm i --save-dev @wdio/cli

After this command has been executed successfully, the version of CLI dependency shall be reflected within the package.json file. The following screen will appear on your computer −

To create a Configuration file, we have to run the below mentioned command −

npx wdio config -y

After this command has been executed successfully, the configuration file called the wdio.conf.js gets created within our project. Also, the package.json file should now contain some more dependencies under the devDependencies field.

The following screen will appear on your computer −

Apart from the dependencies marked in the above image, we have to add one more dependency so that the WebdriverIO commands can execute synchronously.

We have to add the dependency - "@wdio/sync": "<version number>" under the devDependencies field. Then run the following command −

npm install

To run a Configuration file from the test runner, we have to run the below given command −

npx wdio run wdio.conf.js

Create Mocha Spec File

After a Configuration file is created, we shall find a test folder generated within the WebdriverIO project. The details on how to create a Configuration file are described in the Chapter titledConfiguration File generation.

The following screen will appear on your computer −

If we expand this folder, we shall find two sub-folders - pageobjects and specs containing JavaScript files created by default. These are basically sample tests provided to guide the first time users to get accustomed with the Mocha framework.

Mocha is a testing framework based on JavaScript which is built on Nodejs. It makes asynchronous test execution flow interesting and simple. Mocha tests can be run serially.

It is capable of producing accurate and customizable reports. Also, the uncaught exceptions can be easily tagged with the proper test cases. The details of Mocha can be found in the below link −

www.tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

As per the Mocha testing framework, all the test files are known as the spec files and they should reside within the specs folder.

Blocks in Test File

A test file should have the following blocks −

describe − This is higher in hierarchy than the it block. A test file can have multiple describe blocks. A describe block represents a test suite. It has two arguments - description of the test suite and an anonymous function.
it − This is lower in hierarchy than the describe block. A describe can have multiple it blocks. An it block represents a test case and should be mandatory within a describe block It has two arguments - description of the test case and an anonymous function. The actual WebdriverIO code is implemented within the it block.Steps to Create Mocha File

To create a Mocha file, let us follow the below steps −

Step 1 − Right-click on the specs folder (which is within the test folder), then select New File. The following screen will appear on your computer −

Step 2 − Enter a filename, say testcase1.js.

The following screen will appear on your computer −

Step 3 − Add the below code in this file −

// test suite name 
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
   // URL launching
      browser.url("https://www.tutorialspoint.com/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

In the above code, the browser is the global object exposed by the WebdriverIO.

Please note − We cannot run this individual file directly. We shall take the help of the Configuration file in order to execute it.

WebdriverIO - VS Code Intellisense

Once we have completed installation of the Visual Studio Code, we should add the intellisense in the editor so that once we begin writing the WebdriverIO commands, the auto-suggestions of the WebdriverIO methods are displayed.

The details on how to do a VS Code installation are discussed in detail in the Chapter titled VS Code Installation.

This is a very important feature that should be added so that the end-users do not need to memorize the raw code for the WebdriverIO.

Add intellisense to VS Code

The steps to add intellisense to the VS Code for the WebdriverIO are listed below −

Step 1 − Click on the New File button appearing to the right of the WebdriverIO project.

The following screen will appear on your computer −

Step 2 − Enter the file name as jsconfig.json. Here, we have to specify the path of the spec files where we are implementing our test.

If we want to apply intellisense feature to all the spec files within the test folder, we can specify the relative path as test/spec/*.js.

The following screen will appear on your computer −

Step 3 − Add the below code inside the file.

{
   "include": [
      //relative path of all spec files
      "test/specs/*.js",
      "**/*.json",
      "node_modules/@wdio/sync",
      "node_modules/@wdio/mocha-framework"
   ]
}

Step 4 − In the spec file, start writing a WebdriverIO object or a method and we shall obtain the entire auto - suggestions.

The following screen will appear on your computer −

WebdriverIO - Wdio.conf.js file

WebdriverIO tests are controlled from the Configuration file. It is often considered the heart of WebdriverIO. It contains details on which spec files to be executed, browser on which the tests should run, global information - base URL, timeout, reports, screenshots and so on.

To create a Configuration file, we have to run the below command −

npx wdio config -y

After this command has been executed successfully, the Configuration file called the wdio.conf.js gets created within our project.

The following screen will appear on your computer −

Within this file, we have to specify the path of the spec file that we want to execute within the specs parameter.

By default, the path provided is: ./test/specs/**/*.js. This means any .js file under the sub-folder specs (which is under the folder test) should be picked for execution.

The following screen will appear on your computer −

To execute the test with the help of the wdio.conf.js file, we have to run the command −

npx wdio run wdio.conf.js

The following screen will appear on your computer −

After the command has been executed successfully, the page title of the application launched is obtained in the console.

However, a lot of the logs got captured in the console. This is because the parameter logLevel is set to info by default in the wdio.conf.js file.

The following screen will appear on your computer −

In order to get rid of some of the logs and to obtain only those which the test case directs, we can set this parameter to silent.

The following screen will appear on your computer −

Again run the Configuration file with the following command −

npx wdio run wdio.conf.js

The following screen will appear on your computer −

After the command has been executed successfully, we find lesser logs and the page title of the application launched - About Careers at Tutorials Point - Tutorialspoint is obtained in the console.

WebdriverIO - Xpath Locator

Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.

For this, our first job is to identify the element. We can create an xpath for an element for its identification. The rules to create a xpath expression are discussed below −

The syntax of xpath is

//tagname[@attribute='value']

Here, the tagname is optional.

For example,

//img[@alt='tutorialspoint']

Let us see the html code of the highlighted link - Home. The following screen will appear on your computer −

The xpath for element Home shall be as follows −

//a[@title='TutorialsPoint - Home'].

The following screen will appear on your computer −

In the WebdriverIO code, we can specify the xpath expression of an element in the below format −

$('value of the xpath expression')

Or, we can store this expression in a variable −

const p = $('value of the xpath expression')

Let us identify the text highlighted in the below image and obtain its text −

The xpath of the above highlighted element should be as follows −

//li[@class='heading']

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath', function(){        
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath then obtain text
      console.log($("//li[@class='heading']").getText() + " - is the text.")
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js.

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation

The following screen will appear on your computer −

After the command has been executed successfully, the text of the element - About Tutorialspoint is printed in the console.

Xpath Locator with Text

We can create an xpath for an element for its identification. However, there are scenarios where there are no HTML attributes or tagname available to uniquely identify an element.

In such a situation, we can create an xpath for an element with the help of the text visible on the page by using the text function. The text function is case-sensitive.

The rule to create a xpath expression with visible text is discussed below −

The syntax of xpath is as follows −

//tagname[text()='displayed text'].

For example,

//li[text()='WebdriverIO']

Let us identify the element highlighted in the below image with the help of the visible text in xpath −

The xpath of the above highlighted element using the text() function shall be as follows −

//li[text()='About Tutorialspoint']

To begin, follow Steps 1 to 5 from the Chapter - Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath - text()', function(){
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath - visible text then obtain text
      console.log($("//li[text()='About Tutorialspoint']").getText() + " - is the text.")
   });
});

Run the Configuration file - wdio.conf.js file with the command −

npx wdio run wdio.conf.js.

The details on how to create a Configuration file are discussed in detail in the Chapter titledWdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

After the command has been executed successfully, the text of the element - About Tutorialspoint is printed in the console.

WebdriverIO - CSS Locator

For this, our first job is to identify the element. We can create a css for an element for its identification. The rules to create a css expression are discussed below −

The syntax of css is as follows −

tagname[attribute='value']

Here, the tagname is optional. We can also specifically use the id and class attribute to create a css expression.

With id, the format of a css expression should be tagname#id. For example, input#txt [here input is the tagname and the txt is the value of the id attribute].

With class, the format of the css expression should be tagname.class.

For example,

input.cls-txt

Here, input is the tagname and the cls-txt is the value of the class attribute.

In the WebdriverIO code, we can specify the css expression of an element in the below format −

$('value of the css expression')

Or, we can store this expression in a variable as follows −

const p = $('value of the css expression')

Let us identify the text highlighted in the below image and obtain its text −

The css of the above highlighted element should be li.heading.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with CSS', function(){        
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with CSS then obtain text
      console.log($("li.heading").getText() + " - is the text.")
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js

The details on how to create a Configuration file are discussed in detail in the Chapter titledWdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

After the command has been executed successfully, the text of the element - About Tutorialspoint is printed in the console.

WebdriverIO - Link Text Locator

Once we navigate to a webpage, we may interact with a webelement by clicking a link to complete our automation test case. The locator link text is used for an element having the anchor tag.

We can identify an anchor element with a matching text. In the WebdriverIO code, we have the option to specify the link of an element in the below format −

$('=value of the anchor text')

Or, we can store this expression in a variable as follows −

const p = $('=value of the anchor text')

Let us identify the link highlighted in the below image and click on it −

The link highlighted in the above image has a tagname - a and the anchor text - Terms of Use.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

/ test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Link Text', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js.

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

After the command has been executed successfully, the title of the page after clicking - Terms of Use - Tutorialspoint is printed in the console.

Partial Link Text Locator

Once we navigate to a webpage, we may interact with a webelement by clicking a link to complete our automation test case. The locator partial link text is used for an element having the anchor tag.

We can identify an anchor element with a matching text. In the WebdriverIO code, we have the option to specify the partial link of an element in the below format −

$('*=value of the anchor text which is matching')

Or, we can store this expression in a variable as follows −

const p = $('*=value of the anchor text which is matching')

The partial link text is similar to link text with the only difference being that it assists in scenarios where a few characters of an anchor element are fixed and the remaining ones are dynamic.

Let us identify the link highlighted in the below image and click on it −