WebdriverIO - Part1: A Journey

Mohammad Sadadab Saqib — Tue, 25 May 2021 17:54:55 +0000

WebdriverIO is a testing framework that uses NodeJS to provide an extensive API to write automated tests.

Glimpse of my journey:

Unforgettable year 2020, new company and new team. I remember, with Selenium and Java in resume joining new work place. The rationale for switching to WebdriverIO started with a project member saying “Start exploring WEBDRIVERIO” in call. A quick search on the YouTube and I landed on channel called Naveen Automation Labs where I started the playlist and I was able to write my first test. I recommend everyone to check it out as you will gain enough knowledge to start your journey.

Not sufficiently convinced (that bond with selenium being obvious reason), I continued on practicing (no other option as project requirement). After couple of weeks I started realizing that I am falling in love and the reasons are...

Fairly easy configuration (WDIO Helper wizard)
An escape from writing all those listeners to capture result, attach screenshot and logs
Powerful chai assertion library support
And the look of Allure Report 😊

Use of WebdriverIO:

As per official documentation we can use WebdriverIO to automate

Modern web applications written in React, Vue, Angular, Svelte or other frontend frameworks

Hybrid or native mobile applications running in an emulator/simulator or on a real device

Native desktop applications (e.g. written with Electron.js)

Prerequisites:

Git/Github
VSCode
NodeJS
NPM (it comes with NodeJS)

Creating Project

Create directory

mkdir WebdriverIOTypeScriptUI & cd WebdriverIOTypeScriptUI

First we will initialize node project with default setting

npm init -y

Then we will install wedriverio cli

npm i @wdio/cli --save-dev

Now we will configure webdriverio

npx wdio config

Above command will start WDIO Configuration Helper wizard with set of framework options to select.

Select options as per your requirement (we can change all setting selected later from configuration file as needed)

Upon last selection, required node dependency will start downloading, once completed you will see something like below log. Copy the highlighted content from command line.

Now let's open the project in visual studio
Create tsconfig.json file in root project folder and paste the copied data from last step (this is required for typescript support)

{
    "compilerOptions": {
      "types": ["node", "webdriverio/sync", "@wdio/mocha-framework", "expect-webdriverio", "@wdio/selenium-standalone-service"]
    }  
}

Your folder structure will look something like this

Open Package.json file and modify script section as below

"scripts": {
    "test": "npx wdio wdio.conf.ts"
 },

Finally we are ready to run our first test(created by default with help of WDIO configuration helper in above steps)
Open command prompt (CTRL + J short key in vscode)
run below command which will start execution in chrome browser

npm run test

Successful execution will be logged in terminal

Spec Files:1 passed, 1 total (100% completed) in XX:XX:XX

Conclusion:

So we have seen how we can configure webdriverio with very simple steps and execute sample tests generated with help of WDIO Helper wizard.
In upcoming blogs I will talk about how we can generate allure report.

References:

Automation Bro YouTube WebdriverIO playlist
Naveen Automation Labs YouTube WebdriverIO playlist
17th Sep YouTube Channel

Feel to ask if you have any query.
LinkedIn: Md Sadab Saqib
GitHub: sadabnepal