DEV Community

Cover image for WebdriverIO - Part1: A Journey
MD SADAB SAQIB
MD SADAB SAQIB

Posted on

WebdriverIO - Part1: A Journey

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:

Creating Project

Create directory

mkdir WebdriverIOTypeScriptUI & cd WebdriverIOTypeScriptUI
Enter fullscreen mode Exit fullscreen mode

First we will initialize node project with default setting

npm init -y
Enter fullscreen mode Exit fullscreen mode

Then we will install wedriverio cli

npm i @wdio/cli --save-dev
Enter fullscreen mode Exit fullscreen mode

Now we will configure webdriverio

npx wdio config
Enter fullscreen mode Exit fullscreen mode

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)
WDIO Config Helper

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.
image

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"]
    }  
}
Enter fullscreen mode Exit fullscreen mode

Your folder structure will look something like this
image

Open Package.json file and modify script section as below

"scripts": {
    "test": "npx wdio wdio.conf.ts"
 },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Successful execution will be logged in terminal

Spec Files:1 passed, 1 total (100% completed) in XX:XX:XX
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)