DEV Community: 17thSep

Create your first WDIO Automation script with Typescript

17thSep — Mon, 01 Mar 2021 15:16:33 +0000

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

17thSep / WebdriverIO_Master

This is the core branch for WebdriverIO by Ap.

WebdriverIO_Master

This is the core branch for WebdriverIO, take a look at each of the folders

1. BasicTypeScript - Only TypeScript
2. Cucumber - WDIO 7 scripts with typescript in Cucumber Framework
3. Mocha - WDIO 7 scripts with typescript in Mocha Framework
4. Docker - Run WDIO 7 script in Docker
5. Networklogs - Capture Network logs

More to follow

Watch WDIO7 videos

Basics of Typescript
Create your first Mocha scripts with TypeScript
Create your Cucumber scripts with TypeScript
Run scripts in Docker (GRID+NODE)
Run scripts in Docker (IMAGES)
Capture Network logs

Watch WDIO 6 videos

Run scripts in Docker (GRID+NODE)
Run scripts in Docker (IMAGES)
Capture Network logs

Alternatively,

Take a look at the WatchVideo.md file inside each folder for the step by step instructions

If you like to support my work, please check out the below

Patreon: https://www.patreon.com/17thsep/membership
Youtube: https://www.youtube.com/channel/UCqaDA1xslraCbam2CxuKhUw
Dev.to: https://dev.to/17thsep1

View on GitHub

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.

TypeScript Basics for Automation

17thSep — Mon, 15 Feb 2021 16:21:46 +0000

Typescript is the buzzword in the javaScript world without a doubt. The question do Quality Engineers dealing with nodejs automation with tools like WebdriverIO, Cypress, Playwright, Protractor, Puppeteer need to get on to that wagon?

The short answer is, Yes definitely.

In this video below, I have explained the basics of typescript and these points

Shortcomings in javascript
How to configure Typescript
TypeScript Example
tsc TypeScript compiler
What is ts-node
tsconfig.json

Cheers
Ap.

How does WebdriverIO work

17thSep — Tue, 02 Feb 2021 10:09:42 +0000

Sooooooo the elements of a Webdriverio Automation framework, what does it have?

Of course, we need a browser where we can execute our scripts

An environment, Node.js where we can write scripts to pass commands

An IDE, Vscode where we can edit and write code efficiently with various extensions

A scripting language, Javascript or Typescript which the Node.js platform understands

A bunch of libraries/node modules Webdiverio Pupetteer Allurereports Cucumber etc.. to help achieve the various task we are wanting to achieve

Put this all together ...Booommmm! We can achieve what we want to in Automation

Since webdriverIO is Node.js based we have the entry into package.json first from there the control shifts to the wdio config file

Config file is the control room of this Automation execution with this js file holding all the critical information like

what browser
how many browsers
what files to test
where are the test files located
what framework
what kind of reports
where to run etc.

Finally, when we try to execute the scripts by entering npm test in the terminal then the terminal transfers this to npm which will inturn search in the package.json

Once the specific command is executed {usually to run the config file with node} then the flow goes to the config which then handles the rest.

Cool, If you are interested in learning more about webdriverio, keep a watch here or my youtube channel

You can watch all this with a small demo in the below video

Cheers!
Ap

Capture Network logs using WebdriverIO

17thSep — Sat, 23 Jan 2021 08:45:08 +0000

Capturing network logs is something that is key to complete automation.

Often testers are left with the black box of not knowing when a call is being made while going the automation route, with this tool WebdriverIO using the Chrome dev tools protocol via puppeteer it becomes easy for us to achieve that.

We can achieve automation of request analysis and also verify if the requests are made at the right place.

How to do it with WebdriverIO

Ensure you are running this with Chrome browser as this is not available for all the browsers

There are no additional changes required in your wdio.conf.js file

There are no additional libraries required as well

For you to capture a specific type of requests the control lies in browser.mock section

Example for when you want to capture all GET calls

    var output = browser.mock('**',{method:'get'})
    browser.url('https://reqres.in')

Example for when you want to capture all POST calls

    var output = browser.mock('**',{method:'post'})
    browser.url('https://reqres.in')

Example for when you want to capture any POST calls that end with login in the request URL

    var output1 = browser.mock('**/login',{method:'post'})
    browser.url('https://the-internet.herokuapp.com/login')

Example for when you want to capture any POST calls that end with authenticate in the request URL

    var output2 = browser.mock('**/authenticate',{method:'post'})
    browser.url('https://the-internet.herokuapp.com/login')

Example for when you want to capture any GET calls that end with api/users/2 in the request URL

    var output3 = browser.mock('**/api/users/2',{method:'get'})
    browser.url('https://reqres.in')

Note: Once you specify a URL to capture, it will capture all the calls that are made let's say if you made 5 calls all 5 will be captured as a separate object inside that variable in JSON format.

In this video below I have gone about explaining all of the above scenarios and how to automate them. Hope you'll like it

Br,
Ap.

WebdriverIO 6.0 + Docker + Create your own docker image

17thSep — Sun, 27 Dec 2020 00:03:34 +0000

At the end of this article, you will be able to create your own image and execute your automation scripts in a docker container.

Objective
Approach
Dockerfile
Execution
Mounting Volumes

Objective

Below are a few points which summarizes what we are trying to do:

I need to run my automation scripts in a docker container
I don't have to create multiple images every time I make a change
use the memory available efficiently

Approach

In the previous article

WebdriverIO 6.0 + Docker + Selenium Hub 4.0

17thSep ・ Dec 12 '20 ・ 4 min read

#webdriverio #docker #selenium #automation

we discussed how we can leverage docker images by docker selenium. Here, we will explain how we can create an image and run it

mount a volume from local machine to container
make changes locally and run it in a container

Dockerfile

The first step is to have your automation scripts ready. Once the script is ready ensure we have the configuration to run it in headless mode. You can do so by adding the below in your wdio config file

This is because the chromium-browser in Debian primarily runs in headless mode, moreover, it's the headless browser that we have used in the docker image.

ok, that's done. Let's crack on.

If you take a look at the Dockerfile, with the node image as the base, we have installed a few libraries and fonts followed by the chrome browser.

Once we have the base, we then set the working directory and copy all the files, and do an npm install to get the os specific node modules.

An important point to consider here is that the chrome driver for mac or windows will not work for the Debian version. So whatever node modules we have should not be carried over to the image, one way to prevent that from happening is to create a .dockerignore file and add node_modules to it.
Again if you have any queries refer to the git hub URL provided below and search for the .dockerignore file.

The final step is to mention the ENTRY POINT. Since the scripts get triggered as soon as we run the image to get the container it's a necessity for us to give the npm test command or npm run which points to the wdio config file.

This completes the docker file creation. You can refer to that docker file from the below link

https://github.com/17thSep/WDIO6_Docker_Custom_Image/blob/master/Dockerfile

Or refer to the screenshot below

Execution

Now that we have created the Dockerfile, to build and image

docker build -t {image name} .

This will create an image for us to execute.

Once we create the image, we should run the image to create a container. We can run the image by using the below command

docker run -it {image name}

This will trigger the scripts right away and once the execution is complete, the container will be exited.

This is how we use docker to run automation scripts created using webdriverio.

Mounting Volumes

Now comes the interesting topic, how can we ensure we don't create multiple images for every change that we make yet test all those changes in docker. This is where Volumes comes in.

Docker Volumes is a means of sharing a directory from the local machine with the container. So how do we achieve this?
It's quite simple actually. You don't have to do anything while creating the image, only when you run the image add -v tag as shown below

docker run -v : {image name}

That's it!

But the question comes up again what do you want to share as sharing the node modules again will create a problem. So while sharing the directory ensure you only share the files you want to. For example, if you have all your spec files inside the folder "tests" then the below command will only share the files under this directory.

docker run -v /tests/:/tests/ {image name}

Then comes the question of priority, one can assume that local files always takes precedence over the files in an image when we mount the volumes. Hurray!

Make as many changes as you want and run all of those changes in a docker container.

Please refer to the video above in case you need a demo.

Clone the repo from

17thSep / WDIO6_Docker_Custom_Image

In this repository i have experimented with creating your own docker image of the automation scripts.

WDIO6_Docker_Custom_Image

In this repository i have experimented with creating your own docker image of the automation scripts to run it in docker

You can watch the process as a video in the below link https://youtu.be/Yjg476fg1l0

View on GitHub

Below are some useful links to ponder upon.

buildpack-deps Image
https://github.com/docker-library/buildpack-deps

Node Image
https://github.com/nodejs/docker-node/blob/master/12/buster/Dockerfile

If you have any questions please add a comment, if you find this useful make sure you let me know. it is the biggest source of motivation!

Cheers!
Ap.

WebdriverIO 6.0 + Docker + Selenium Hub 4.0

17thSep — Sat, 12 Dec 2020 22:00:23 +0000

Ok, let's begin. My main intention is to play around with Docker containers and see if there are any benefits for Automation testers.

Given that the world is moving from a VM world to a container world it's kinda obvious that one has to move towards containers but it's not necessary for all.

In this article, I am going to explain how one can configure WebdriverIO to run the test scripts in a docker container using Selenium-hub.

What do we need

An automation script
Docker
Official docker images from {See below for github details}
- Selenium Hub
- Nodes of the browser {chrome, firefox, opera}
VNC Server/viewer (Optional)

SeleniumHQ / docker-selenium

Docker images for the Selenium Grid Server

The project is made possible by volunteer contributors who have put in thousands of hours of their own time and made the source code freely available under the Apache License 2.0.

👉 Status: Grid 4 is under development and on a Beta stage

We are doing prereleases on a regular basis to get early feedback. This means that all other Selenium components can be currently at a different alpha version (e.g. bindings on Beta 1, and Docker images on prerelease Beta 2).

Docker images for Grid 4 come with a handful of tags to simplify its usage, have a look at them in one of our prereleases

To get notifications of new prereleases, add yourself as a watcher of "Releases only".

Doubts or questions? Please get in touch through the different communication channels available in the Community section.

Looking for Grid 3…

View on GitHub

Note:

There is no official node for IE.
Docker cannot be installed directly on a few versions of windows.

You can watch this entire article in a video in the below link as well.

Step 1:

Ensure you have the automation script working on your local machine. In case you don't have it ready you can download this from this repository.

17thSep / WDIO6_Docker

WDIO6_Docker (GRID + NODE)

This is a sample script to run WebdriverIO Automation scripts in docker. I have added the compose file and the package.json You can clone this repository and do an npm install to get going.

Pre-requirements

Docker client should be installed on your machine
node.js v12.16.1 or greater

You can watch a video of how we can use docker to run automation scripts in the below link. https://youtu.be/NDt4alzH5E0

Thank you

View on GitHub

Points to consider:

You must have Node.js version v12.16.1 or higher as mentioned on the official site for WDIO v6
Ensure the Browser and chrome driver are compatible.

Step 2:

Changes to the configuration file

In your WebdriverIO config file, you have to make 2 changes

Add the location where you are planning to run your Selenium hub. Here I am running on the default port 4444 as shown in the screenshot.

Specify the runner to be docker.

That's the configuration part.

Points to consider:

If you have cloned the repository from the above git link, I have already made that change.

Step 3:

Create the containers for Selenium Hub and Node

Selenium Hub:

You can consider this to be the brains of the execution.

Selenium Hub will control which node should run which spec file/feature file and will distribute the unexecuted files based on the availability of the nodes.

Chrome Node

This is a simple Linux system with all that we need to run out Automation scripts i.e. browsers

You can do so in 2 ways

Option 1:
Manually run the commands on your terminal and kind of establish the communication between the hub and the nodes

Please refer Docker networking section in the git hub link provided above.

Option 2:(Recommended approach)
Simply just create a docker-compose file and save it as docker-compose.yml in the same location where you have your config file.

If you want to know more about the Docker compose file and what you should know please refer to step 7.

Step 4:

Running your docker container. This can be done again in 2 ways based on what you have chosen in step 3.

If you have chosen Option 1, then follow the commands provided in the description provided in the same URL. This is definitely a viable option if you just want to experiment but this has its limitation and inconveniences

You will have to run the same command every time you want to bring the setup
Scaling could be not as simple as it should be. And many more.

That's why I would always recommend Option 2 which is through docker-compose. If you have chosen this option, All you have to do is type one command after going to the location where you have placed the docker-compose.yml file.

docker-compose up -d

In case you have the filename as something else e.g. abcd.yml then

docker-compose -f abcd.yml up -d

Note: -d here is to run the container in a detached mode.

To verify if you have the nodes and selenium hub up and running you can verify by going to the URL Click here from the machine where you are running you selenium hub

If the setup is successful it should like this

Step 5:

Running you automation script

Now, all the setup is done. You can see 3 chrome nodes in the Selenium hub and once you trigger the scripts you can see the execution will begin in the containers.

If you want to see how the scripts are triggered visually, you can do so by setting up your VNC server and VNC viewer.
The command below shows all the containers that are running and their IP address and the ports.

So to see a specific container take up the port and enter in VNC viewer and then it will ask for a password.
The password is secret

Step 6:

Analyzing your Results

Depending upon whether you want to get as an HTML file or as a JSON file you can choose from the list that WebdriverIO is providing

Step 7:

Docker compose

There are a lot of things that one can learn about docker-compose but I will limit this to what we should from an automation perspective.

We need 2 main things

Flexibility to scale the number of nodes so parallel execution can be faster
The order in which the images should be

When we scale the nodes it's kind of imminent that we don't use the same port number more than once. To avoid that, we have 2 options,

we can leave it to docker for the ports from the local machine and specify the ports inside the container. (Recommended)
we can specify a range of ports that we want to allocate for the nodes.

If we want to spend less time troubleshooting different ports that are currently in use, I would strongly suggest to leave it to docker.

However, in the second part where we specify the port inside the docker container that's what the official image has but you change it or leave it as it is.

I will stop here, hope you found this useful!

Thanks

DEV Community: 17thSep

Create your first WDIO Automation script with Typescript

17thSep / WebdriverIO_Master

This is the core branch for WebdriverIO by Ap.

WebdriverIO_Master

Watch WDIO7 videos

Watch WDIO 6 videos

Alternatively,

If you like to support my work, please check out the below

Standalone Mode

TypeScript Setup

Dependencies

WDIO Config file

Sample Script

Tsconfig.json

types

include

WDIO Configuration Helper

TypeScript Basics for Automation

How does WebdriverIO work

Capture Network logs using WebdriverIO

WebdriverIO 6.0 + Docker + Create your own docker image

Table Of Contents

Objective

Approach

WebdriverIO 6.0 + Docker + Selenium Hub 4.0

17thSep ・ Dec 12 '20 ・ 4 min read

Dockerfile

Execution

docker build -t {image name} .

docker run -it {image name}

Mounting Volumes

docker run -v : {image name}

docker run -v /tests/:/tests/ {image name}

17thSep / WDIO6_Docker_Custom_Image

In this repository i have experimented with creating your own docker image of the automation scripts.

WDIO6_Docker_Custom_Image

WebdriverIO 6.0 + Docker + Selenium Hub 4.0

SeleniumHQ / docker-selenium

Docker images for the Selenium Grid Server

Docker images for the Selenium Grid Server

👉 Status: Grid 4 is under development and on a Beta stage

Step 1:

17thSep / WDIO6_Docker

WDIO6_Docker (GRID + NODE)

Step 2:

Step 3:

Selenium Hub:

Chrome Node

Step 4:

Step 5:

Step 6:

Step 7: