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

• Standalone Mode
• Using Typescript
• Using Configuration helpers

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

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

More to follow

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

Sample Script

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

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

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.