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.

Get Step SaaS for free to follow this tutorial
Illustration for Load Testing with Playwright
Note: This tutorial is designed for users who prefer setting up their tests using the Step UI. For developers, we highly recommend the code-driven approach outlined in the Load Testing with Playwright tutorial.
Note: Git and Maven are required to follow this tutorial.

In this tutorial, we will use a sample online store application based on OpenCart as our Application Under Test (AUT). To implement our load test, we will reuse existing Playwright tests written in Java that simulate a typical user visit to our application under test.

1. Check out the sample project

Clone the sample project from GitHub:

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

Optionally, run the JUnit tests locally:

  cd step-samples/keywords/java/demo-playwright-keyword
mvn clean compile test
  
Note: The test cases automatically navigate through the “Desktop” and “Components” categories of the website, as defined in the unit tests.

Create the Keyword Package that will be uploaded to Step:

  mvn clean package -DskipTests
  

After execution of this command, a JAR file named demo-playwright-keyword-0.0.0.jar is generated and located in the “target” directory of the project. This JAR file will be used in the subsequent steps of this tutorial.

Note: -DskipTests will skip the local execution of the tests. If you successfully ran the JUnit tests locally, adding -DskipTests should not be required.

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 Keyword Package

Upload the Keyword Package built previously. The Keyword Package contains the automation steps that will be integrated in our load test.

  1. Go to the Keywords section
  2. Click on the Upload Package button
  3. Select the “demo-playwright-keyword-0.0.0.jar” as the Package file
  4. Click Save
Image showing how to upload a keyword package

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
Image showing how to create a new plan using the TestScenario template

2.3. Configure the load test

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

For our load test, we will create a ThreadGroup that will repeatedly execute a task on OpenCart to simulate high loads.

  1. 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.
  2. Select the Keyword “Buy MacBook in OpenCart” from the Keywords section in the Component tabs.
  3. Configure the ThreadGroup with the following parameters:
  • Number of Threads: 10 So the ThreadGroup runs 10 threads in parallel.
  • Number of iterations per thread: (empty): There should not be a limit on the number of iterations per thread;
  • Maximum duration (ms): 600000: The ThreadGroup should terminate after a maximum of 10 minutes (600000 ms).
Image showing how to configure a ThreadGroup to perform a load test
After following this tutorial, your Plan should look like this
Note: For more information on ThreadGroup configuration, refer to the ThreadGroup documentation.

3. Run and analyze the test

3.1. Run the load test

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

Image showing how to run the load test

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 Playwright scripts:

  • The execution time of our Keyword “Buy MacBook in OpenCart”
  • No custom measurements were defined for this Playwright script sample. You may easily add some, following this documentation.
Note: The total execution time contains the time spent in the script including the time spent starting the browser with Playwright. This is useful for diagnosis purposes. For application performance measurements, use custom measurements instead.

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 Playwright 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.

Illustration for Using Step with Grafana
Using Step with Grafana

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

Illustration for Setting up system monitoring with a Step agent
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.

Illustration for NET tutorials: Microsoft Office automation with Step
NET tutorials: Microsoft Office automation with Step

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

Illustration for JUnit Plan Runner
JUnit Plan Runner

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

Illustration for How to monitor services availability and performance
How to monitor services availability and performance

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

Illustration for .NET tutorials: AutoIt with Step
.NET tutorials: AutoIt with Step

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

Illustration for Android Testing using Step and Appium
Android Testing using Step and Appium

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

Illustration for Browser-based automation with Step and Selenium
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.

Illustration for Load Testing with Cypress
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.

Illustration for Adding and Configuring New Agents
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 Basic Keyword Development
Basic Keyword Development

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

Illustration for Designing functional tests
Designing functional tests

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

Illustration for Robotic Process Automation (RPA) with Selenium
Robotic Process Automation (RPA) with Selenium

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

Illustration for Robotic Process Automation (RPA) with Cypress
Robotic Process Automation (RPA) with Cypress

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

Illustration for Synthetic Monitoring with Selenium
Synthetic Monitoring with Selenium

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

Illustration for Load Testing with Cypress
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.

Illustration for Load Testing with Cypress
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.

Illustration for Synthetic Monitoring with Cypress
Synthetic Monitoring with Cypress

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

Illustration for Load Testing with Cypress
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.

Illustration for Load Testing with Selenium
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.

Illustration for Load Testing with Selenium
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.

Illustration for Synthetic Monitoring with Playwright
Synthetic Monitoring with Playwright

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

Illustration for Synthetic Monitoring with Cypress
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.

Illustration for Robotic Process Automation (RPA) with Playwright
Robotic Process Automation (RPA) with Playwright

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

Illustration grafana devops tutorial
Distributed load testing with JMeter

This tutorial shows how to distribute JMeter tests across multiple nodes.

Illustration for Load Testing with Playwright
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.

Illustration for playwright synthetic monitoring in a devops workflow
DevOps Synthetic Monitoring with Playwright - Advanced

This tutorial demonstrates how Playwright tests can be reused for synthetic monitoring of a productive environment in a DevOps workflow

Illustration grafana devops tutorial
Distributed load testing with Grafana K6

This tutorial shows how to distribute Grafana K6 tests across multiple nodes.

Illustration for playwright synthetic monitoring in a devops workflow
DevOps Synthetic Monitoring with Playwright

This tutorial demonstrates how Playwright tests can be reused for synthetic monitoring of a productive environment in a DevOps workflow

Illustration for okhttp devops
Protocol-based load testing with okhttp

In this tutorial you'll learn how to quickly set up a protocol-based load test with okhttp

Illustration for playwright devops
Continuous end-to-end testing

Learn how to set up continuous end-to-end testing across several applications based on Playwright tests in your DevOps pipeline using Step

Illustration for playwright devops
Continuous load testing with Playwright

Learn how to quickly set up continuous browser-based load testing using Playwright tests in your DevOps pipeline

Want to hear our latest updates about automation?

Don't miss out on our regular blog posts - Subscribe now!

Image of a laptop device to incentivize users to subscribe