Load Testing with Cypress - advanced

This tutorial shows you how to efficiently set up a browser-based load test using existing Cypress tests in the Step automation platform.

Get Step SaaS for free to follow this tutorial

Illustration for Load Testing with Cypress

Test Scenario

In this tutorial, we will use a sample online store application based on OpenCart as our Application Under Test (AUT). The AUT has been deployed at the following URL: https://opencart-prf.exense.ch/

Our first test case, “TC01 Place Order”, simulates a typical user visit to our online store, where the user searches for a product, adds it to the shopping cart and completes the order.

The objective of this tutorial is to simulate 10 concurrent visits by executing this test case with 10 virtual users simultaneously.

The tutorial involves the following steps:

Setting up the Cypress project
Configuring the load test in Step
Running and analyzing the test

The main advantage of Step is the ability to reuse automation artifacts, so if you have already followed our Synthetic Monitoring with Cypress or RPA with Cypress tutorials, you can go straight to Configure the load test in Step.

1. Set up the Cypress project

Clone the Cypress sample project from GitHub:

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

Optionally, run the Cypress test locally:

  cd step-samples/keywords/cypress/opencart
npm install
npx cypress run --headed

Zip the Cypress project that will be uploaded to Step:

  cd ..
zip -r opencart.zip opencart/

Note: For more information about the project structure, click here.

2. Configure the load test in Step

Log in to the Step Portal, or sign up for free and create a Step Cluster with 10 [java, ui-automation] Agents, following this Quick setup guide.

Note: In this tutorial, we simulate 10 concurrent visits and therefore need 10 Step Agents. You can run plans with fewer Agents, but this will cause the test cases to fail if a free Agent isn’t found.

Once you’ve scaled the Agents, click Open in Step to open the Step application and carry on with the tutorial.

2.1. Upload the Cypress project

Note: In Step, a Plan consists of logical controls and Keywords that encapsulate the automation scripts. In its simplest form, a Keyword can encapsulate a whole test case or workflow.

Create a Keyword for our test case:

Go to the Keywords section
Click on the New Keyword (+) button
Name the Keyword, e.g. Place order in Opencart
Select “Cypress” as the Type
Upload the Cypress project previously zipped to the Cypress project
Enter the filename of the Cypress spec to be executed e.g. opencart.cy.js
Click Save

Image showing how to create a Cypress keyword

Note: Additional info: To learn more about the Cypress plugin for Step, check out our documentation.

2.2. Create the Plan

Create a new Plan using the TestScenario template:

Go to the Plans section
Click on the New Plan (+) button
Name the Plan, e.g. Load test OpenCart
Select “TestScenario” as the Template
Click Save and edit

2.3. Configure the load test

Note: The visual editor is the primary tool for creating and editing plans in Step. We will use this to design the load testing scenario.

For our load test, we will create a ThreadGroup that will execute our Keyword (Cypress script) in parallel to simulating the target load.

In the Controls section of the Component tabs, click on the New ThreadGroup (+) button to add a ThreadGroup child to the Plan.
Hint: Use the filter function in the Component tabs to easily find controls.
Select the previously defined Keyword (Cypress script) from the Keywords section in the Component tabs.
Configure the ThreadGroup with the following parameters:

Number of Threads: 10 (to run 10 threads in parallel)
Number of iterations per thread: (leave empty) (there should not be a limit on the number of iterations per thread)
Maximum duration (ms): 600000 (to terminate after a maximum of 10 minutes or 600'000 ms)

Add a Session control from Controls in the Component tabs. Hint: this forces the creation of a new browser session (and thus clear the cache) at each ThreadGroup iteration.
Add the Keyword “Place an order in Opencart” from Keywords in the Component tabs.

Image showing how to configure a ThreadGroup to perform a load test — After following this tutorial, your plan should look like this

Note: Additional info: For more information on ThreadGroup configuration, refer to the ThreadGroup documentation.

Note: For simplicity, we use only one Keyword for this test case, but in practice, it is often better to split the test case into smaller Keywords and add them in sequence within the Session.

3. Run and analyze the test

3.1. Run the load test

In Step, click Start Execution and confirm in the opened modal.

3.2. Analyze the results

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

In the Performance tab, you can explore detailed performance metrics:

Image showing performance charts — Performance charts for a more complex load test

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 (e.g. “visit”, “contains”)
The total execution time of our Keyword: “Place an order in Opencart”

Note: The total execution time contains the time spent in the script plus the time spent starting the Cypress runner. This is useful for diagnosis purposes. For application performance measurements, use the custom command measurements.

3.3. Review the transaction statistics

At the bottom of the Performance view, you’ll find an aggregation of performance metrics for the selected time frame:

Image showing performance metrics — Performance metrics for a more complex load test

This tutorial serves as a starting point for those interested in performing load tests using Cypress scripts. Step enables you to reuse automation artifacts across the whole DevOps cycle and load testing is just one aspect of it. Further learning and exploration on performance testing, synthetic monitoring, and robotics can be found in other tutorials and resources.

Using Step with Grafana

This article demonstrates how to connect Grafana to data generated by Step.

Setting up system monitoring with a Step agent

This article demonstrates how to set up distributed system monitoring using Keyword executions, and analyze the results as measurements.

NET tutorials: Microsoft Office automation with Step

This tutorial demonstrates how to automate interaction with Microsoft Office applications using the Office Interop Assembly.

JUnit Plan Runner

This article provides documentation for how to integrate JUnit tests into Step.

How to monitor services availability and performance

This tutorial demonstrates how Step can be used to monitor services, availability and performance metrics.

.NET tutorials: AutoIt with Step

This tutorial demonstrates how to utilize the AutoIt C# binding to automate interactions with Windows applications.

Android Testing using Step and Appium

This article demonstrates the automation of mobile applications on Android using the Appium framework.

Browser-based automation with Step and Selenium

This article defines three Keywords which will be used in browser-based automation scenarios, using Step and Selenium, as general drivers.

Adding and Configuring New Agents

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

Illustration for Load Testing with Playwright

Load Testing with Playwright using Step UI

This tutorial shows you how to set up a browser-based load test using existing Playwright tests in the Step UI.

Basic Keyword Development

This article explains Keywords in Step and demonstrates how to create simple ones.

Designing functional tests

This tutorial demonstrates the design, execution, and analysis of functional tests using the web interface of Step.

Robotic Process Automation (RPA) with Selenium

This tutorial will demonstrate how to use Step and Selenium to automate various browser tasks.

Robotic Process Automation (RPA) with Cypress

This tutorial demonstrates how to use Step and Cypress to automate various browser tasks.

Synthetic Monitoring with Selenium

This tutorial demonstrates how Selenium automation tests can be turned into full synthetic monitoring using Step.

Load Testing with Cypress

In this tutorial, you'll learn how to reuse existing Cypress tests to quickly set up and run a browser-based load test using the automation as code approach.

Load Testing with Serenity BDD and Cucumber

In this tutorial, you'll learn how to reuse existing tests written with Serenity BDD and Cucumber for load testing.

Synthetic Monitoring with Cypress

This tutorial demonstrates how Cypress automation tests can be turned into full synthetic monitoring using the automation as code approach.

Load Testing with Cypress using Step UI

In this tutorial, you'll learn how to reuse existing Cypress tests to quickly set up and run a browser-based load test using the Step UI.

Load Testing with Selenium

This tutorial demonstrates how to leverage existing Selenium tests to set up and execute browser-based load tests, following a full code-based approach.

Load Testing with Selenium using Step UI

This tutorial demonstrates how to set up a browser-based load test in the Step UI using existing Selenium tests.

Synthetic Monitoring with Playwright

This tutorial demonstrates how Playwright automation tests can be turned into full synthetic monitoring using Step.

Synthetic Monitoring with Cypress using Step UI

This tutorial demonstrates how Cypress automation tests can be turned into full synthetic monitoring using the Step UI.

Robotic Process Automation (RPA) with Playwright

This tutorial will demonstrate how to use Step and Playwright to automate various browser tasks.

Load Testing with Playwright for Java

In this tutorial, you'll learn how to reuse existing Playwright tests written in Java to quickly set up and run a browser-based load test using the automation as code approach.