Performance Testing Tutorial Part 2: Front End Testing Using Sitespeed.io and Docker

This is post 2 of 2 in the series “Performance Testing Tutorial”

1. Performance Testing Tutorial Part 1: Getting Started
2. Performance Testing Tutorial Part 2: Front End Testing Using Sitespeed.io and Docker

Typically, we hear a lot about performance testing, REST API testing, and even JMeter. But in this post, I am going to explain how to create a robust and modern framework for front end testing, since most of the tools on the market actually only help test our backend.

Additionally, we will take a look at how browsers work behind the scenes rendering resources (an infinite number of JavaScript layers or DOM manipulations) and how we can monitor them to identify regressions.

The framework we are going to implement for front end testing consists of the following tools: Sitespeed.io + Docker + InfluxDB + Grafana + Selenium (and it’s really important to mention that ALL of these tools are free!). Sitespeed.io is an emerging tool that makes it easy to monitor and measure the performance of any website. Additionally, it also has full integration with the Docker engine.

Let’s take the bull by the horns and list all the steps to create a full front end, client-side performance suite: 

Step 1: Install the Sitespeed.io Docker image. First of all, you need to make sure you have Docker installed on your machine. If so, open your terminal and type:

• docker run –rm -v “$(pwd)”:/sitespeed.io sitespeedio/sitespeed.io:9.3.0 https://www.sitespeed.io/

• After image creation, type “docker image ls” to make sure the image got installed successfully.

Note: It is crucial to keep your Sitespeed.io instance updated. For more info about Sitespeed.io pulling, check out the documentation . 

Step 2: Pull the InfluxDB & Grafana Docker containers. InfluxDB is a time series database that we are going to use to store our metrics. We will use Grafana to monitor them in real time. To acquire these tools, open your terminal and type the following commands:

• docker pull influxdb
• docker pull grafana/grafana

These commands will pull InfluxDB and Grafana from Docker Hub. After that, type “docker ps” in your terminal to make sure the containers were installed successfully.

Step 3: Create a Docker network to connect containers. The next step in this front end testing tutorial is to get the InfluxDB and Grafana containers to talk to each other. The way we are going to do this is by implementing a Docker network. Open your terminal and type the following commands:

• docker ps (extract Container ID for InfluxDB)—in my case, “0261ec478a21”
• docker network create my-net
• docker network connect my-net 0261ec478a21
• docker network ls (list all networks) front end testing 

Step 4: Create a database in InfluxDB. We need to have a place to store our metrics. It is similar to native SQL, but first you need to get inside the InfluxDB container by using the following command:

• docker exec -it <INFLUXDB-CONTAINER-ID> influx (with this command, you will be able to access the InfluxDB shell to send SQL commands)

• CREATE DATABASE fe_performance

• SHOW DATABASES

Note : The _internal database is created and used by InfluxDB to store internal runtime metrics. Check it out later to get an interesting look at how InfluxDB is performing under the hood.

Step 5: Set up the InfluxDB data source in Grafana. Open http://localhost:3000/?orgId=1 in your browser. There, you should be able to see the Grafana interface.

• From Grafana, click the gear configuration icon > “Data Sources.”

• Click the “Add Data Source” button > “Choose Data Source.” Type in “InfluxDB.”

• Add the following details to the new data source:

• Set up a password of your choice, then click on the “Save & Test” button. If everything has been set up correctly, you should see a green pop-up saying the “Data Source is working.”  

Step 6: Create the Grafana dashboard. In order to display the metrics, we need to create the site speed dashboard. For this specific task, we are going to import a JSON script by following these steps:

• Click the “+” icon on the left menu > “Import.”

• In the text box, paste the JSON script copied from this link.  

• Click the “Load” button.

• In the import options, set a name for your dashboard, the folder where you want to have it, and the InfluxDB data source created in step 5.

• Click the “Import” button.

BRAVO! You can now see the Grafana dashboard integrated with Sitespeed.io and InfluxDB.

Step 7: Write a custom Selenium async script. If the application being tested needs to perform a log-in block, or you need to follow a sequence of processes, the best way is to implement a Selenium script for Sitespeed.io that executes multiple flows.

In the following example, I am using the EventCloud demo page, and the script name is “EventCloud2.js”:

module.exports = async function(context, command) {       
// Use case #1: Open EventCloud Page   
await command.measure.start('http://eventcloud.aspnetboilerplate.com/', 'Load EventCloud');      
try   {       // Use case #2: Open Register Page       
await command.navigate('http://eventcloud.aspnetboilerplate.com/account/login');      
await command.measure.start('Open_Register');       
await command.click.byClassName('btn btn-block bg-deep-purple waves-effect');       context.log.info('Register page opened..');       
await command.measure.stop();       
// Use case #3: Login Page.       
await command.navigate('http://eventcloud.aspnetboilerplate.com/account/login');       
await command.wait.byTime(5000);       
await command.addText.byXpath('john', '//input[@name="userNameOrEmailAddress"]');       
await command.addText.byXpath('123qwe', '//input[@name="password"]');       
await command.measure.start('Login');       
await command.click.byIdAndWait('LoginButton');       
context.log.info('User logged In..');       
return command.measure.stop();   }   
catch(e) {} 
};

These lines of code execute three use cases: “load the EventCloud page,” “open the register page,” and “perform a log-in.”

Note : You can find more information on the Sitespeed.io scripting page . 

Step 8: Run the Sitespeed.io command. One of the last steps in this front end testing tutorial is to run the Sitespeed.io command in order to store data in InfluxDB and display it on Grafana. The command we will use is the following:

docker run –rm -v “$(pwd)”:/sitespeed.io sitespeedio/sitespeed.io:9.3.0 –network=my-net –influxdb.host <LOCALHOST-IP> –influxdb.port 8086 –influxdb.database fe_performance EventCloud2.js –multi –browsertime.visualMetrics false –browsertime.video false –browsertime.skipHar –plugins.remove html

For more information about the flags used in the above command, check out the Sitespeed.io documentation.

It is important to note that you can run the Sitespeed.io command either using your terminal or Jenkins. You can have more flexibility, automation views, and periodic builds if you use Jenkins for your front end testing.  

Some results:

Due to the variety of JavaScript flavors we have these days, we need to be defensive in regard to the time that every web component takes to render in our front end. Our users expect speed when navigating, so we need to offer it from the first click.

Go ahead and check it out; your users will appreciate the silent improvements you make to your website with the tools from this front end testing tutorial!