WebdriverIO Performance Testing Workshop (Custom Docker Setup)

This guide walks you through setting up a full local environment for performance testing using WebdriverIO, with Selenium Grid, InfluxDB, and Grafana. You will use a customized Docker Compose configuration to spin up all necessary services.

🎯 Goal

To enable real-time performance testing and monitoring of web applications using:

WebdriverIO for test automation
Selenium Grid for browser execution
InfluxDB for metrics storage
Grafana for dashboards and analysis

✅ Prerequisites

Windows 10/11, macOS, or Linux
Node.js 18+ and NPM 6+
Docker & Docker Compose
Git
Visual Studio Code

📦 Step 1: Install Core Dependencies

Node.js & NPM

Download from: https://nodejs.org
Verify installation:

node -v
npm -v

Docker & Docker Compose

Download Docker Desktop from https://www.docker.com/products/docker-desktop
Verify:

docker --version
docker compose version

Git

Install Git from https://git-scm.com

📁 Step 2: Set Up Your Project

Create your project folder and initialize WebdriverIO:

mkdir wdio-performance-test
cd wdio-performance-test
npm init -y
npm init wdio@latest .

Follow the prompts to select:

Local runner
Mocha framework
Spec reporter
ChromeDriver

🐳 Step 3: Use Custom Docker Compose

Create a file named docker-compose.yml in your project directory and paste the following configuration:

version: '3.8'

services:
  influxdb:
    image: influxdb:1.8
    container_name: influxdb
    ports:
      - "8086:8086"
    environment:
      - INFLUXDB_DB=metrics
      - INFLUXDB_ADMIN_USER=admin
      - INFLUXDB_ADMIN_PASSWORD=admin123
      - INFLUXDB_HTTP_AUTH_ENABLED=true
    volumes:
      - influxdb_data:/var/lib/influxdb
    networks:
      - monitoring

  grafana:
    image: grafana/grafana:latest
    container_name: grafana
    ports:
      - "3000:3000"
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin123
      - GF_USERS_ALLOW_SIGN_UP=false
    volumes:
      - grafana_data:/var/lib/grafana
    depends_on:
      - influxdb
    networks:
      - monitoring

  selenium-hub:
    image: seleniarm/hub:4.16.1
    platform: linux/arm64
    container_name: selenium-hub
    ports:
      - "4442:4442"
      - "4443:4443"
      - "4444:4444"
    networks:
      - monitoring

  chrome1:
    image: seleniarm/node-chromium:4.16.1
    platform: linux/arm64
    container_name: chrome1
    shm_size: 2gb
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_HOST=chrome1
      - SE_NODE_MAX_SESSIONS=1
      - SE_NODE_OVERRIDE_MAX_SESSIONS=true
      - SE_VNC_NO_PASSWORD=1
      - SE_NODE_GRID_URL=http://selenium-hub:4444
    ports:
      - "5901:5900"
    networks:
      - monitoring

  chrome2:
    image: seleniarm/node-chromium:4.16.1
    platform: linux/arm64
    container_name: chrome2
    shm_size: 2gb
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_HOST=chrome2
      - SE_NODE_MAX_SESSIONS=1
      - SE_NODE_OVERRIDE_MAX_SESSIONS=true
      - SE_VNC_NO_PASSWORD=1
      - SE_NODE_GRID_URL=http://selenium-hub:4444
    ports:
      - "5902:5900"
    networks:
      - monitoring

  chrome3:
    image: seleniarm/node-chromium:4.16.1
    platform: linux/arm64
    container_name: chrome3
    shm_size: 2gb
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_HOST=chrome3
      - SE_NODE_MAX_SESSIONS=1
      - SE_NODE_OVERRIDE_MAX_SESSIONS=true
      - SE_VNC_NO_PASSWORD=1
      - SE_NODE_GRID_URL=http://selenium-hub:4444
    ports:
      - "5903:5900"
    networks:
      - monitoring

  chrome4:
    image: seleniarm/node-chromium:4.16.1
    platform: linux/arm64
    container_name: chrome4
    shm_size: 2gb
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_HOST=chrome4
      - SE_NODE_MAX_SESSIONS=1
      - SE_NODE_OVERRIDE_MAX_SESSIONS=true
      - SE_VNC_NO_PASSWORD=1
      - SE_NODE_GRID_URL=http://selenium-hub:4444
    ports:
      - "5904:5900"
    networks:
      - monitoring

volumes:
  influxdb_data:
  grafana_data:

networks:
  monitoring:
    driver: bridge

Start all services:

docker compose up -d

You’ll have:

Grafana at http://localhost:3000
InfluxDB at http://localhost:8086
Selenium Grid at http://localhost:4444/ui
VNC access to Chrome containers (e.g. localhost:5901, localhost:5902, etc.)

let me explain more in detail how it is connected

⚙️ Step 4: Connect WDIO to InfluxDB

The test runner (e.g., custom reporter or service) we wrote can write performance metrics like response time, load time, etc., into InfluxDB using its HTTP API.

You can:

With a library you can can to push metrics to InfluxDB as we will show you in the coming lessons

Step 5: Set Up Grafana Dashboards

Open Grafana (http://localhost:3000)
Log in with:
- User: admin
- Password: admin123
Add a new data source:
- Type: InfluxDB
- URL: http://influxdb:8086
- Database: metrics
- Auth: Enabled with same credentials as above
Create dashboards to visualize:
- Test durations
- Browser performance
- Network/XHR timings (if captured)

🧪 Step 6: Run Performance Tests

Create test files using Mocha syntax inside the ./test directory. Then run your suite:

npx wdio wdio.conf.js

In the coming lessons we will help you to configure setting up a test using

Webdriver IO performance test github repository

🛠️ Optional: Add More Nodes

To increase concurrency, duplicate or scale chrome containers:

docker compose up -d --scale chrome1=2

Or extend your Docker Compose file with more nodes (like chrome5, chrome6, etc.).

Task

check if all is connected

✅ Conclusion

You’ve now set up a full local performance testing environment with WebdriverIO and real-time metrics via Grafana + InfluxDB, backed by a custom Selenium Grid.

learnautomatedtesting.com

Module 1: Introduction to UI and performance testing