Installation for this workshop

Purpose

This document provides step-by-step instructions for setting up the environment necessary to start performance testing using WebdriverIO (WDIO). It is intended for software developers and testers who aim to benchmark and optimize the performance of web applications.

Prerequisites

Operating System: Windows 10/11, macOS, or Linux

Node.js: Version 14.x or newer

NPM (Node Package Manager): Version 6.x or newer

Git: Optional, for cloning repositories if necessary

Tools and Libraries

WebdriverIO (WDIO)

@wdio/cli: WDIO Testrunner command line interface

@wdio/local-runner: WDIO Local runner

@wdio/mocha-framework: Mocha test framework for WDIO

@wdio/spec-reporter: WDIO Spec reporter

ChromeDriver: For Chrome browser testing (or corresponding drivers for other browsers)

Installation Steps

Step 1: Install Node.js and NPM

Download Node.js from https://nodejs.org.

Install Node.js on your system, which will also install NPM automatically.

Verify installation by running node -v and npm -v in your terminal or command prompt.

Step 2: Initialize Your Project

Create a new directory for your project and navigate into it.

Initialize a new Node.js project by running npm init -y.

This command creates a package.json file in your project directory.

Step 3: Install WebdriverIO

Go to the website of webdriverio and install the following

npm init wdio@latest .

Fork the github repository

The github repository can be found here, download and fork the repo

Install python

For Windows:

Download Python: Go to the official Python website (python.org) and navigate to the Downloads section. The website should offer you the latest version for Windows. Click on it to download the installer.

Run the Installer: Open the downloaded file to start the installation. Ensure you check the box that says “Add Python 3.x to PATH” before clicking “Install Now”. This step is crucial as it makes Python accessible from the Command Prompt.

Verify Installation: Open Command Prompt and type python –version and press Enter. If Python is installed correctly, you should see the version number of Python you installed.

For macOS:

Install with Homebrew: The easiest way to install Python on macOS is using Homebrew, a package manager for macOS. First, you need to install Homebrew by opening Terminal and pasting the following command and pressing Enter:

bash

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once Homebrew is installed, you can install Python by typing brew install python in the Terminal and pressing Enter.

Verify Installation: After the installation completes, you can verify it by typing

python3 –version in the Terminal.

For Linux:

Use Package Manager: Most Linux distributions come with Python pre-installed. If you need to install or update Python, you can use your distribution’s package manager. For Ubuntu or Debian-based distributions, you can use apt:


sudo apt update
sudo apt install python3

For Fedora or RHEL-based distributions, you might use dnf:


sudo dnf install python3

Verify Installation: You can verify the installation by typing python3 –version in the Terminal.

Setup venv

Setting up a virtual environment (venv) in Python is a great way to manage project-specific dependencies and ensure that your project is isolated from the rest of your system’s Python environments. As venv is already installed in the repo which you have forked you need to activate it on Windows, macOS, and Linux.

Activating a virtual environment (venv) in an existing repository is a straightforward process, but it slightly varies depending on your operating system. Here’s how to do it for Windows, macOS, and Linux. First, navigate to your project’s root directory in the terminal or command prompt where your venv is located.

Windows

Open Command Prompt or PowerShell and change to the repository directory:

Go to project
cd path\to\your\project
Activate the virtual environment by running:
.\venv\Scripts\activate

You should see the name of your virtual environment (venv) appear in the prompt, indicating that it is now active.

macOS and Linux

Open your Terminal and change to the repository directory:

cd path/to/your/project
Activate the virtual environment by running:
source venv/bin/activate

Similar to Windows, you’ll notice the virtual environment’s name (venv) prefixed to your terminal prompt when it’s active.

Install docker

For Windows:

For Windows 10 and newer, Docker Desktop is the preferred method:

  • Download Docker Desktop for Windows from the official Docker website.
  • Run the installer and follow the installation instructions.
  • Start Docker Desktop after the installation is complete.
  • Verify the installation by opening a terminal and running:
docker run hello-world

For macOS:

Similar to Windows, Docker Desktop is used for macOS:

  • Download Docker Desktop for macOS from the official Docker website.
  • Open the installer and drag the Docker icon to your Applications folder.
  • Launch Docker Desktop from your Applications folder.
  • Verify the installation by opening a terminal and running:
docker run hello-world

Install your ide: Visual Studio code, this will be the one on which I will present this

Visual Studio Code

For Windows & macOS:

  • Download the Installer:
  • Visit the Visual Studio Code website and download the installer for Windows or macOS, depending on your operating system.
  • Run the Installer:
  • Windows: Run the downloaded .exe file and follow the prompts to complete the installation.
  • macOS: Open the downloaded .zip file to extract the Visual Studio Code application, then drag it to the Applications folder.
  • Launch Visual Studio Code:
  • Find and open Visual Studio Code from your applications or programs list.

Linux:

Update package index (for Debian/Ubuntu-based distributions):

bash

sudo apt update

Install via Snap (Most straightforward method on distributions that support Snap):

sudo snap install --classic code

Alternatively, you can download a .deb or .rpm package from the Visual Studio Code website and install it using your distribution’s package manager.

Git

Windows:

  1. Download the Installer: Go to the Git website and download the Windows installer.

  2. Run the Installer: Execute the downloaded .exe file and follow the instructions to install Git. During installation, you can leave most options at their default settings, although you might want to choose which editor Git should use (e.g., you can select Visual Studio Code if you’ve already installed it).

  3. Verify Installation: Open the Command Prompt and type git –version to ensure Git is installed.

macOS:

  1. Install using Homebrew (if you have Homebrew installed): Open the Terminal and run:
brew install git
  1. Verify Installation: In the Terminal, type git –version to check that Git is installed.

Linux (Debian/Ubuntu):

  1. Install Git: Open a Terminal and run:
sudo apt update
sudo apt install git
  1. Verify Installation: Check the installed version by running git –version.

Configure Tests: Modify the wdio.conf.js file to set up your performance benchmarks and tests.

Write Performance Tests: Create test files under your test directory using Mocha syntax to define your performance test cases.

Run Tests: Execute your tests by running npx wdio wdio.conf.js.

Conclusion

Following these steps, you will have a basic WebdriverIO setup ready for performance testing. Remember to customize your tests according to the specific performance metrics and thresholds relevant to your project.