In this short tutorial, we show how to quickly implement a simple browser-based load test based on existing Cypress scripts in step.

This is a technical tutorial for people who are already familiar with Cypress and load testing in general.

Prerequisite

Get step

To follow this tutorial you’ll need an instance of step with the Cypress plugin enabled. You can either install an Enterprise Edition of step following the Quick setup or get a SaaS instance up and running in minutes. For most users the SaaS option is recommended.

Install Cypress

This tutorial also assumes that you’ve installed Cypress on your local machine. If not, please follow the installation guide of Cypress to install it.

Load Test Scenario

Application under Test

In this tutorial we will use an online shop application based on OpenCart as Application under Test (AUT). The application is deployed at following URL: https://opencart-prf.exense.ch/

Test case

To showcase the advantages of browser-based load-testing, and especially with Cypress, we will load-test a complete test case with many screens interactions. This is typically complex and error-prone to implement with a classical protocol-based load-testing approach.

Our first test case models a typical user visit in our online shop. We call it “TC01 Place order”:

an unregistered user navigates to the homepage
searches for an article
adds the article to the cart
checks out the cart
enter all the required information and place the order

Load model

For the sake of this tutorial we define the goal of our load test as follows: Simulate 10 concurrent visits. Assuming that our test case represents a typical user visit, we can simulate this while running our test case with 10 virtual users in parallel.

Cypress script

Run the script locally

As per target of this tutorial we use Cypress to automate our test case.

We have implemented a Cypress test and pushed its code to our step sample project on github. This tutorial assume that you’re already familiar with Cypress. We’re therefore not going into scripting details of Cypress. If you’re not familiar with Cypress we recommend to follow the good getting started guide of Cypress.

To clone our sample repo containing our Cypress project using git:

git clone https://github.com/exense/step-samples.git

To run it locally in headed mode using Cypress:

cd step-samples/keywords/cypress/opencart
cypress run --headed

This should open a browser window and run the test case

Zip the Cypress project

Now that we’ve validated run our script locally, we’ll have to zip our Cypress project in order to upload it to step afterwards:

Assuming that you are still in the folder “step-samples/keywords/cypress/opencart”:

cd .. 
zip -r opencart.zip opencart/

This should create a Zip file opencart.zip of the folder opencart/. We’ll need it in the following step.

Plan creation in step

Now that we have a running implementation of our test case we can define our load test plan.

In the simplest terms a Load Test Plan defines the test scenario to be executed and at which level of concurrency. The Load Test Plan definition takes place in step.

Switch to your step instance

If you have access to an existing step instance (on-premise or SaaS) as described in the prerequisite, access it and log in.

Otherwise, you can get a SaaS instance up and running in minutes on steploud.ch !

Create the Keyword

In step a Plan consists of logical Controls and so-called Keywords that encapsulate the automation scripts. In its simplest form a Keyword can encapsulate an whole test case or workflow. For modular compositions of Plans, the use of more granular Keywords is however prefered in practice. For the sake of this tutorial we’ll define one single Keyword for our test case.

To create the Keyword for our test case:

Login to step
Navigate to Menu > Keywords.
Click on the New keyword button.
Enter a Name for your keyword. For instance: “Place an order in Opencart”
Select “Cypress” as “Type”
In the field “Cypress Project”, upload the Zip of our Cypress project created previously
And finally in the field “Command”, enter the Cypress command of our project to be called: “cy.Opencart_PlaceOrder()”

Create the Plan

Now that we have our Keyword defined, we can define our actual load test.

This is done by creating a new Plan in step. In this case, we’ll use the TestScenario template.

Test Scenario

The scenario is created by selecting the Plans tab, then clicking on New Plan, and providing the required information:

Thread Groups

Once the plan for the scenario is established, the visual editor can be used to add one ThreadGroup children to the plan:

Thread Groups Content

In each thread group, we first add a “Session” control. This forces the creation of a new browser session (and thus a clear cache) at each ThreadGroup iteration. Without Session each ThreadGroup iteration would reuse the same Browser session which is not what we want to simulate.

Within the Session we add our unique Keyword “Place an order in Opencart”. Please not that we’ve decided to define on Keyword for the whole test case. In practice, it often makes sense to split the test case in more granular Keywords. In that case we would simply add them in sequence within our Session:

Thread Groups Parameters

Once the structure ot the test scenario is established, we return to the ThreadGroup nodes to configure their parameters:

We want the ThreadGroup to run 10 threads in parallel.
We do not want a limit on the number of iterations per thread: the corresponding input box must be empty.
The ThreadGroup should terminate after a maximum of 10 minutes (600000 ms).

Run the load test

As soon as you have successfully started the required number of step Agents and that these Agents appear in the “Grid” view of step, you are ready to start.

To run the load test, simply click the “run” button:

Analyze the results

Performance view

Once the execution started you will be redirected to the execution page.

By selecting the “Performance (Beta)” or the legacy “Performance” tab, you can explore detailed performance metrics of the execution:

There you’ll find all metrics relative to the transactions of your cypress scripts:

The execution time of our custom command “Opencart_PlaceOrder”
The series related to the different Cypress commands called within our custom command: “visit”, “contains”, etc
The total execution time of our Keyword: “Place an order in Opencart”. Warning: the measure of the whole Keyword execution also contains the time taken to start the Cypress runner and not only the time spent in the script and thus application. This measure is useful for diagnose purposes. For measurement of the application’s performance the measurements of the custom command should be used

Transaction statistics

At the bottom of the “Performance (Beta)” view you’ll find an aggregation of the performance metrics over the selected timeframe:

The marked row can be read as follows:

Within the selected timeframe:

The command Opencart_PlaceOrder has been called 278 times
A throughput of 0.487 calls to Opencart_PlaceOrder per second has been reached
The average duration of the command Opencart_PlaceOrder was 9.57s