Synthetic Monitoring with Cypress

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

Get Step SaaS for free to follow this tutorial

Illustration for Synthetic Monitoring with Cypress

Note: If you prefer doing the same using the Step UI, you can follow the tutorial Synthetic Monitoring with Cypress using the Step UI.

Synthetic monitoring, also known as active monitoring, is a method of monitoring your applications by simulating users and directing the path taken through the application. This provides information on the availability and performance of your critical business transactions.

In this short tutorial, we show how Cypress automation tests can be turned into full-fledged synthetic monitoring in just a few minutes, by leveraging the Step platform. At the end of the tutorial you will be able to setup end 2 end synthetic monitoring for a web application such as our e-shop opencart demo application by

Integrating your Cypress test case with Step
Designing and configuring your synthetic monitoring
Visualizing the performance and availability dashboard
Setting up alerting to get notified in case of errors

Prerequisites

Access to a Step cluster: Get started quickly by setting up a free SaaS cluster in the Step Portal, or, if preferred, follow the Installation page to configure your own on-premise cluster.
Install the Step CLI on your local machine as described on the Download page of Step

Test scenario

For the sake of this tutorial, we’ll simulate the typical user journey on our demo online store. The typical visit that we’ll simulate consists of the following actions: navigate to the online store, search for a product, add it to the shopping cart, and complete the order.

For this simulation we have an existing Cypress test: Cypress sample project

Checkout the sample

Clone the sample project from GitHub:

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

Navigate to the sample directory:

  cd step-samples/automation-packages/synthetic-monitoring-cypress/

The main file of the project is automation-package.yaml. It describes our test scenario as YAML:

  ---
schemaVersion: 1.0.0
name: "synthetic-monitoring-cypress"
plans:
  - name: "Opencart synthetic monitoring plan"
    root:
      testCase:
        children:
          # Execute the cypress test once
          - callKeyword:
              keyword: "OpenCart - Typical visit"
          # Assert the execution time of this cypress test is under 1 minute
          - performanceAssert:
              measurementName: "OpenCart - Typical visit"
              comparator: "LOWER_THAN"
              expectedValue: 60000
schedules:
  - name: "Opencart synthetic monitoring schedule"
    #CRON expression for one execution per minute
    cron: "0 0/1 * * * ?"
    planName: "Opencart synthetic monitoring plan"
keywords:
  # Declare a Keyword referencing the Cypress test
  - Cypress:
      # An arbitrary name for our Keyword
      name: OpenCart - Typical visit
      # Relative path to the Cypress test
      cypressProject: cypress-test/
      # The name of the Spec file to be executed (found in the cypress/e2e subdirectory)
      spec: "opencart.cy.js"

Execute locally

Optionally, you can run the Cypress test locally:

  cd cypress-test
npm install
npx cypress run --headed --config video=false
# Navigate back to the base directory
cd ..

or run the Automation Package plan locally with the Step CLI:

  step ap execute --local

Deploy to Step

Before deploying to Step, you’ll need the URL of your Step instance and an API key. For instructions on generating an API key, refer to Generate an API Key.

In the sample directory (synthetic-monitoring-cypress), run the following command to deploy the content of the automation package (current folder) to Step and enable the synthetic monitoring on the demo application.:

  step ap deploy --stepUrl=https://<Hostname of your Step cluster> --projectName=Common --token=<Your API token>

Refer to the official documentation of the Step CLI for more details.

The deploy command outputs will confirm the successful deployment of the package to Step:

  The automation package source is ...step-samples\automation-packages\synthetic-monitoring-cypress
Preparing AP archive: ...AppData\Local\Temp\stepcli9628752884452105930\synthetic-monitoring-cypress.stz
Uploading the automation package...
Automation package successfully uploaded. With status CREATED. Id: 671a33c63270f20798af9983

Analyse the synthetic monitoring in Step

Once the synthetic monitoring in place, you can follow the performance and availability of the demo application using the Step’s analytics dashboard.

Performance results of the Synthetic Monitoring

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.

Review the transaction statistics

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

Incident Management and alerting

Incident are automatically created if one of the execution fail and is automatically closed as soon as a next iteration pass. You may furthermore configure alerting rules in Step to get notify when such events occurs.

Refer to the knowledge base for more information on alerting or incident managements

Do more

In case you are just getting started with Step, this tutorial is one of our basic use cases of using Cypress script in Step.

Step lets you reuse automation artifacts across the whole DevOps cycle, and synthetic monitoring is just one aspect of it. For more use case of performance tests, synthetic monitoring, and robotics can be found on our tutorials page and resource library.

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.

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.

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.

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.

Distributed load testing with JMeter

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

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.