The following file will present instructions for complete Performance Testing infrastucture setup on your local machine. The infrastructure contains the following tools and integrations:

Performance Testing Tools:

• Local WebPageTest instance
• Google PageSpeed Insights

Load Testing Tool:

• JMeter

Database storage:

• InfluxDB

Reporting and monitoring:

• Grafana
• Telegraf

• Git installed - link
• Code Editor (Visual Studio Code is preffered) - link
• Docker capable of executing Linux containers - link
• Node.js installed globally - link
• [Optional] Homebrew for macOS users - link

1. Pull and start the InfluxDB docker image in Terminal

   Windows/macOS/Linux

   docker run -d -p 8086:8086 --name influxdb influxdb:1.8

   Windows/macOS/Linux

   docker exec -it influxdb bash

2. Create the databases needed for all tools Windows/macOS/Linux

   influx

   Windows/macOS/Linux

   CREATE DATABASE webpagetest
   CREATE DATABASE googlepagespeed
   CREATE DATABASE telegraf
   CREATE DATABASE jmeter

3. Access InfluxDB instance

   🌐Navigate to http://localhost:8086/ - 404 error IS EXPECTED

   🌐Navigate to http://localhost:8086/query?pretty=true&q=SELECT%20*%20FROM%20%22webpagetest%22&db=webpagetest to query the newly created Database

1.Pull and run the grafana docker image

docker run -d -p 3000:3000 --name grafana grafana/grafana

2. Add InfluxDB Datasource

• 🌐Access Grafana by visiting http://localhost:3000/
• Login using admin/admin
• Set new password
• Open Settings/Add Datasource InfluxDB
• Fill in:
  • DataSource name: InfluxDB
  • URL: http://localhost:8086
  • Access: Select type "Browser"
  • Database name: webpagetest
• Click on Save & Test
• Expected result:

1. Clone repo

   git clone https://github.com/n1xan/webpagetest-docker-setup.git
   cd webpagetest-docker-setup
   

2. Build docker images

Windows

.\build-docker-images.bat

macOS/Linux

./build-docker-images.sh

3. Start server and agent images

Windows

.\start-server-and-agent.bat

macOS/Linux

./start-server-and-agent.sh

4. Access WebPageTest instance

• 🌐Navigate to http://localhost:4000/
• ✔Start a new test with Location Test Location

1. Clone repo

   git clone https://github.com/n1xan/webpagetest-nodejs-runner.git
   cd webpagetest-nodejs-runner
   

2. Install dependancies and start a test

   npm install
   node webpagetest.js "https://example.com" example.com LAN Chrome
   

1. Clone repo

   git clone https://github.com/n1xan/psi-report.git
   cd psi-report
   

2. Install dependancies and start a test

   npm install
   node run run.js https://example.com
   

1. Follow the tutorial: User manual link
2. Load sample test

   git clone https://github.com/n1xan/jmeter-influx-integration.git
   cd jmeter-influx-integration
   jmeter -t DemoBellatrixNavigation.jmx
   

1. Follow the tutorial: User manual link

1. Download Telegraf for Windows/macOS/Linux: Download Link

2. Run telegraf application Windows

• Unzip
• Edit telegraf.config
  • Set database name /should be created/
• Save
• cmd telegraf.exe --config telegraf.conf
• debug telegraf.exe --config telegraf.conf --debug

macOS

1. Download config in local folder

   mkdir ~/.telegraf
   cd ~/.telegraf
   curl -O https://raw.githubusercontent.com/influxdata/telegraf/master/etc/telegraf.conf
   

2. Edit telegraf.config

• open ~/.telegraf
• Uncomment row 119
• Set your database name if different than telegraf
• Save file

3. Start Telegraf application