Are you new to Software Development Engineering in Test (SDET) and eager to write your first test code? Starting with a well-planned setup is key to building a stable, scalable, and maintainable testing framework. I’ve done that myself, only to realize later there were some tools I missed that could have helped to make my journey easier from the start. That is why we will see the system specifications, tools, and configurations that will help us to write better code from day one.

In this post, I'll share the essential tools and configurations needed to begin developing a robust Test Automation Framework. These are designed to help you write more tests, debug more efficiently, and produce a testing framework that will be stable, scalable, and require far less code maintenance.

The main topics covered:

• Machine Setup (Windows or MAC)

• Installing Visual Studio Code IDE

• Getting a GitHub account for code Version Control

• Writing better code with Prettier, ESLint, and GitLens VS Code Extension

• Installing Browser Extensions

Why to Start with Tools?

As a beginner, you might be tempted to jump straight into writing your first test script. However, starting with the right tools and setup will save your time and headaches down the road. This blog will discuss the essential tools that every SDET should have in their Skill set.

Machine Setup

Before you can do anything in the world of test automation on a machine, you must install some packages. You need admin rights and should install essential packages like:

• NodeJS (Latest Stable Version)

• Yarn (Preferred over npm due to its speed in parallel installations)

• Java JDK

• Visual Studio Code (VSCode) or other IDEs like IntelliJ

• Git

Note for Windows Users:

• Set up the PATH environment for your node

• Reboot the machine for all the changes to take effect

Before we get to running our first test, we need to check out system requirements and get our tools. we’re going to cover how to install and configure tools that will make our job easier, as follows:

• Hardware specifications

• Node.js

• A GitHub account and GitHub Desktop for code change management

• Microsoft Visual Studio Code

• Prettier, GitLens, and ESLint extensions

• The SelectorsHub and EditThisCookie Chrome extensions

Hardware specifications

What are the technical spec requirements for my WebdriverIO test automation system?

Note - Do not use the minimum requirements listed anywhere on the internet. Whatever it is, it is too small.

Do match the CPU speed, the amount of RAM, the drive space, and the number of monitors on desks.

• CPU: Aim for a modern multi-core processor. The faster, the better.

• RAM: Minimum 8 GB; 16 GB is recommended.

• Storage: At least 50 GB of free space, preferably on an SSD for faster performance.

• Monitors: Multiple monitors will significantly improve productivity, especially when debugging.

Installing Node.js and npm

Node.js is a tool used to run web applications outside of a web browser. This project was created using Node version v16.13.0 for several reasons. Earlier versions only supported synchronous mode, which was deprecated in WebDriverIO 9.0 and removed in version 8.0. Although the latest version of Node is v22, it is recommended to use v20 as it is the most compatible with other modules and packages.

Let’s begin by installing Node and npm. The following screenshot shows how you can do this:

Figure 1.1 – Downloading Node.js from https://nodejs.org/en/

The version of Node.js to install will be long-term support (LTS), which is version 20.16.0 as of this writing.

For both Mac and Windows, we will install a version of Node that is at least version 18.0. From the command shell, type these two commands:

> nvm install 20
Downloading node.js version 20.16.0 (64-bit)...
> nvm use 20
Now using node v20.16.0 (64-bit)

While this completes the Node installation, we need to take note of alternative package managers that offer additional options.

Alternate node package managers – Yarn versus npm

While npm is the default node package manager provided, we recommend using Yarn to both install packages and run programs. One major advantage of Yarn is that it installs packages in parallel. This reduces the build time significantly when initializing or refreshing the package.json file.

Again, from the command shell type the following:

> npm install --global yarn

After installing Yarn, you can verify the installation by running the following command:

> yarn --version
1.22.21

Configuring the coding environment with GitHub

In the upcoming blogs, we will dive deeper into Git and GitHub for code versioning. But it is good to plan, so we will create a Git folder structure for our projects.

Our wdiov9 project workspace will live in a Git repository (repo) folder that holds your projects, Let’s begin by creating a \repos folder at the root of our drive, or on the desktop on Mac, to hold our projects:

Figure 1.2 – Sample repository and project directory structure

Our project will be stored inside a local repository named "wdiov9" folder. This is where we will create a place where our files will be stored. This folder will store our files. Later, we will use code repositories like GitHub, GitLab, and Bitbucket for version control.

Create a GitHub account

Go to https://github.com/ and click Sign up. Enter an email, a password, and a username, and verify your account.

Figure 1.3 – Github Signup page from https://github.com/signup

Or if you already have a Github account then Sign-In,

Figure 1.4 – Github SignIn Page https://github.com/login

We now have a free public GitHub account for practising commits and version control. Please go to your GitHub page and create a "wdiov9" repository with a README file.

Steps to Create a Repository on Github:-

1. Login on Github

2. Go to Repository

3. Click on New Button

4. Now fill in the Repository Name for Example "wdiov9" in our case.
   Figure 1.5 – Github Repository creation

5. 

   Check the "Add a README file" checkbox

6. Click on Create repository

Here we have successfully created the git repository.

Figure 1.6 – Github Created Repository

Installing Visual Studio Code

Download Visual Studio Code from https://code.visualstudio.com/download.

Figure 1.7 – Visual Studio Code download

Now that Visual Studio has been installed, we can check that Node and npm have been installed from the embedded Terminal shell window.

Figure 1.8 – Visual Studio code installed and Open

Installing Visual Studio Code add-ons – Prettier

From the Extensions icon, add the Prettier Code formatter extension:

Figure 1.9 – Prettier Extension

Prettier will automatically format code without the need to manually type tabs. In this example, the unformatted code on the left can be formatted by right-clicking and selecting Format Document.

Figure 1.10 – Prettier Extension application

Installing Visual Studio Code add-ons – GitLens

Among other features, the GitLens extension displays the latest code changes in our GitHub repository. To add the GitLens extension, go to Extensions.

Figure 1.11 – GitLens Extension

Clicking on any line of any tracked document in the project activates GitLens:

Figure 1.12 – GitLens Extension application

Installing Visual Studio Code add-ons – ESLint

ES stands for ECMAScript, which is the code standard for JavaScript that is intended to ensure the interoperability of web pages across different browsers.

From Extensions, add the ESLint extension:

Figure 1.13 – ESLint Extension

ESLint identifies and reports code patterns in TypeScript projects to promote consistency and prevent bugs. View it in action in the screenshot below.

Figure 1.14 – ESLint Extension application

Now that we have configured Visual Studio Code, let’s add some tools to our browser for selecting elements and managing cookies.

Installing Chrome extensions

Our next two tools are the easiest to install.

1. SelectorsHub - which allows us to create robust locators of elements in Chrome, Edge, and any Chromium-based browsers.

   

   Figure 1.15 – SelectorsHub Extension

2. Cookie-Editor - which allows us to clear the cookie cache from the browser frontend.

   

   Figure 1.16 – Cookie-Editor Extension

Summary

In this blog, we have focused on the essential tools and configurations required to develop a robust Test Automation Framework with an Example of WebDriverIO with Typescript. This blog is tailored to help both beginners and experienced testers to set up a stable and scalable testing environment.

In the next Blog, we will install WebdriverIO v9 and begin to explore the folder structure of the WebdriverIO TypeScript framework project.