WebdriverIO - Part1: A Journey
Tags: webdriverio, typescript, node, testing
Published: 2021-05-25 17:54:55

[WebdriverIO](http://webdriver.io/) 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](https://github.com)
- [VSCode](https://code.visualstudio.com/download)
- [NodeJS](https://nodejs.org/en/download)
- NPM (it comes with NodeJS)

### Creating Project
Create directory
```bash
mkdir WebdriverIOTypeScriptUI & cd WebdriverIOTypeScriptUI
```

First we will initialize node project with default setting
```bash
npm init -y
```

Then we will install wedriverio cli
```bash
npm i @wdio/cli --save-dev
```

Now we will configure webdriverio
```bash
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)
![WDIO Config Helper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp3jcwcprteu1nsbz4w0.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emfognq8fkmr4cycbk33.png)
 
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)
```bash
{
    "compilerOptions": {
      "types": ["node", "webdriverio/sync", "@wdio/mocha-framework", "expect-webdriverio", "@wdio/selenium-standalone-service"]
    }  
}
```

Your folder structure will look something like this
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cldgbqiq6sa3s8tgnjh.png)
 
Open *Package.json* file and modify script section as below
```bash
"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
```bash
npm run test
```

Successful execution will be logged in terminal
```bash
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](https://youtube.com/playlist?list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN)
[Naveen Automation Labs YouTube WebdriverIO playlist](https://youtube.com/playlist?list=PLFGoYjJG_fqqswF8qDdWNG3b-BtZfiqQn)
[17th Sep YouTube Channel](https://www.youtube.com/channel/UCqaDA1xslraCbam2CxuKhUw/featured)

Feel to ask if you have any query. 
LinkedIn: [Md Sadab Saqib](https://www.linkedin.com/in/sadabnepal/)
GitHub: [sadabnepal] (https://github.com/sadabnepal)