Create your first WDIO Automation script with Typescript
Tags: typescript, webdriverio, webdriveriotutorials, learnwebdriverio
Published: 2021-03-01 15:16:33

In this article, we will take a look at how you can create your first automation script using webdriverio in 

If you are new to Typescript look at the basics [here](
https://dev.to/17thsep1/typescript-basics-for-automation-45j0)

+ **Standalone Mode**
+ **Using Typescript**
+ **Using Configuration helpers**

If you need to visually see all these ways developed refer to this video below

{% youtube QT3UeCI0H2Q %}

Also, take a look at the sample script in the github link 

{% github https://github.com/17thSep/WebdriverIO_Master %}


# Standalone Mode

Standalone can be picturized like an engine of the car, you have what you need to run but this will be easier to drive if you have all the necessary parts. 

With all those necessary parts put together, we can develop our framework which is the Test Runner Mode.

Standalone Mode needs just one dependency 

`npm i webdriverio`

After you have installed this, you can write the asynchronous way of scripting for your automation scripts. 

If you need to write it in a synchronous way that's when you will need `@wdio/sync` library which the WebdriverIO team has designed.

# TypeScript Setup

Test runner mode is the complete product where we can leverage the modules developed for specific purposes rather than developing them all by us.

We need 4 main steps to do this

1 - Install all the dependencies
2 - Create a WDIO config file
3 - Develop Automation scripts
4 - Tsconfig.json {Only needed if you choose typescript}

## Dependencies

    "@wdio/cli": "^7.0.8",
    "@wdio/dot-reporter": "^7.0.7",
    "@wdio/local-runner": "^7.0.8",
    "@wdio/mocha-framework": "^7.0.7",
    "@wdio/sync": "^7.0.8",
    "chromedriver": "^88.0.0",
    "ts-node": "^9.1.1", {Only for typescript}
    "typescript": "^4.2.2",{Only for typescript}
    "wdio-chromedriver-service": "^7.0.0" 

## WDIO Config file

A basic config file will have these elements below.

**Note:**
`autoCompileOpts` shown below is necessary for typescript to work seamlessly
 
![Screenshot 2021-03-01 at 15.12.18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu095ejpugdl4vahgdyy.png)

## Sample Script

Once we have it all done we have our automation scripts ready.

![Screenshot 2021-03-01 at 15.13.22](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3ckhu18y3g3t2wad4ra.png)
 
## Tsconfig.json

The one main difference to creating scripts with Typescript is that 

you need to create a tsconfig.json which serves as the controller for how you want typescript to behave. A sample tsconfig file will have the below 

![Screenshot 2021-03-01 at 14.53.29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p88e81io3oa277ygpwt9.png)

I will talk about 2 main sections here

#### types 
Whatever library which you include here, typescript will let you verify your scripting is as per the definitions inside these libraries. For e.g. if you have not included "@wdio/mocha-framework" in here, when you write scripts in the files in the include section below Typescript will warn you for definition not found error.

#### include

This is a list of file for which we need typescript to do a type check

### WDIO Configuration Helper

If you find doing this tough, that's when the `WDIO Configuration helper` comes in

You can access that after installing @wdio/cli by typing in 

`npx wdio config`  - if you want to choose the options

`npx wdio config -y` - if you want to get some basic automation script running


Cheers
Ap.