Performance Testing with Cypress: A Detailed Guide

When building web applications, ensuring they perform reliably under real-world user loads is critical. As concurrent users access and interact with the app, performance issues like slow response times or crashes can emerge.

Although Cypress is widely used for functional testing, this guide explores how it can be adapted to support performance testing needs effectively.

What is Cypress Performance Testing?

Cypress is widely used for end-to-end and UI testing, but with the help of plugins and custom utilities, it can also support performance testing.

By extending its functionality, Cypress can monitor page load times, track key performance metrics, and analyze application behavior under various conditions. This makes it a practical option for identifying performance bottlenecks besides functional testing.

Load Testing with Cypress

While Cypress is primarily built for functional and UI testing in modern JavaScript applications, it can be extended to support load testing through community-driven plugins.

Although Cypress doesn’t natively support performance testing, tools like Google Lighthouse can be integrated to simulate user load and assess app performance under stress.

This allows teams to conduct basic load and stress testing using Cypress as part of a broader performance testing strategy.

Using Google Lighthouse for Cypress Performance Testing

Google Lighthouse is a powerful tool integrated into Chrome that measures web performance and identifies issues such as slow loading times, inefficient images, and poorly optimized code.

Key aspects about using Lighthouse with Cypress for Performance Testing:

• Lighthouse helps identify performance issues like slow load times, large images, and inefficient code.
• Easily accessible through the Lighthouse tab in Chrome DevTools.
• For more flexibility, you can use the Lighthouse CLI to run tests outside Chrome DevTools.
• Integrates Lighthouse directly into your Cypress tests, enabling you to run performance tests as part of your automation suite.
• Combining Cypress and Lighthouse allows for automated performance testing alongside functional tests, ensuring consistent performance across your web application.

Performance Testing with Cypress and Lighthouse

For performance testing with Cypress, use the Cypress Audit plugin in combination with Google Lighthouse.

This setup enables performance audits on web applications, providing key metrics around page speed, load time, and overall performance. Google Lighthouse helps interpret these metrics and highlights areas for optimization.

Pre-requisites for Performance Testing with Cypress

Below are the pre-requisites to get started:

• Ensure that you have a Cypress E2E project.
• Install the `cypress-audit/lighthouse` module in your project

npm i -D cypress @cypress-audit/lighthouse

• Add the initialization code to the `cypress.config.js` file

const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
// const { pa11y } = require("@cypress-audit/pa11y");
module.exports = {
e2e: {
baseUrl: "http://bstackdemo.com", // this is your app
setupNodeEvents(on, config) {
on("before:browser:launch", (browser = {}, launchOptions) => {
prepareAudit(launchOptions);
});
on("task", {
lighthouse: lighthouse(),
// pa11y: pa11y(console.log.bind(console)),
});
},
},
};

• Import the Lighthouse commands to the `support/command.js`file in your project:

import '@cypress-audit/lighthouse/commands';

Step-by-step guide to run your Lighthouse performance tests

This section demonstrates how to run performance tests on bstackdemo.com to view default performance and SEO metrics.

After the initial test, thresholds are defined to validate the metrics against acceptable performance standards.

Part 1: Run Lighthouse performance test without thresholds

Step 1: Add the following code to your spec file:

describe('Bstackdemo', () => {
it('should run lighthouse performance audits using default thresholds', () => {
cy.visit('/');
cy.lighthouse();
});
});

Step 2: In your terminal, run the below command to run your tests in the Chrome browser.

npx cypress open

The following result is seen:

Part 2: Run Lighthouse performance with threshold

Step 1: Add the following code to your spec file:

describe('Bstackdemo', () => {
it('should run lighthouse performance audits using custom thresholds', () => {
const thresholds = {
performance: 50,
accessibility: 80,
'first-contentful-paint': 2000,
'largest-contentful-paint': 3000,
interactive: 2000,
seo: 60,
pwa: 50,
};
const lighthouseConfig = {
formFactor: 'desktop',
screenEmulation: { disabled: true },
};
cy.visit('/');
cy.lighthouse(thresholds, lighthouseConfig);
});
});

In your terminal, run the below command to run your tests in the Chrome browser.

npx cypress open

The following result is seen:

Analyzing Performance Test Results

After running both default and custom threshold performance tests, it becomes clear how metric configurations can impact results. Custom thresholds help effectively maintain performance standards.

• Part 1 runs the application against Google Lighthouse’s default performance metrics.
• Part 2 uses custom thresholds, which caused performance scores to drop significantly.
• These thresholds help enforce minimum performance levels and highlight areas needing optimization.

Cypress Testing on Real Device Cloud with BrowserStack

Running Cypress performance tests on a real device cloud helps uncover real-world bottlenecks in speed, responsiveness, and overall user experience.

With BrowserStack Automate for Cypress, teams can seamlessly scale their testing efforts without managing infrastructure.

• Run tests on real desktop environments to simulate real user conditions and capture accurate performance metrics.
• Integrate Lighthouse performance audits via plugins for in-depth analysis of speed, accessibility, and SEO.
• Access a cloud-based testing grid that supports parallel test execution, reducing test times and accelerating releases.
• Geolocation Testing to validate app performance across different regions.
• Debug faster with logs, video recordings, and screenshots of every test session.

Best Practices for Performance Testing with Cypress

Following a few best practices is important to get reliable and actionable insights from Cypress performance tests, especially when using Lighthouse alongside Cypress.

1. Run Lighthouse in different geolocations to simulate real user conditions.
2. Define custom performance thresholds tailored to your application’s needs.
3. Schedule Lighthouse tests regularly across a variety of devices and browsers.
4. Integrate performance checks into CI pipelines for early issue detection.

Talk to an Expert

Conclusion

Performance testing is an important lever in testing the stability of your web application.Through Cypress and Lighthouse though you can analyze performance, you cannot ascertain if the experience on multiple devices and operating systems will remain consistent.

To ensure consistent performance, you can rely on simulating real devices. Using BrowserStack Automate and Cypress, you get access to a real device cloud. Apart from this, when you use BrowserStack, you can record your tests, generate reports, and more.

Useful Resources for Cypress

Understanding Cypress

• Cross Browser Testing with Cypress : Tutorial
• Run Cypress tests in parallel without Dashboard: Tutorial
• Handling Test Failures in Cypress A Comprehensive Guide
• Cypress Test Runner: Tutorial
• Handling Touch and Mouse events using Cypress
• Cypress Automation Tutorial
• CSS Selectors in Cypress
• Performance Testing with Cypress: A detailed Guide
• Cypress Best Practices for Test Automation
• Test React Native Apps with Cypress
• Cypress E2E Angular Testing: Advanced Tutorial
• Cypress Locators : How to find HTML elements
• Maximizing Web Security with Cypress: A Step-by-Step Guide
• Conditional Testing in Cypress: Tutorial
• Cypress Web Testing Framework: Getting Started
• Cypress Disable Test: How to use Skip and Only in Cypress
• What’s new in Cypress 10? How it will change your current testing requirements

Use Cases

• How to Record Cypress Tests? (Detailed Guide)
• How to run your first Visual Test with Cypress
• How to Fill and Submit Forms in Cypress
• How to Automate Localization Testing using Cypress
• How to run Cypress Tests in Chrome and Edge
• How to use Cypress App Actions?
• How to Run Cypress Tests for your Create-React-App Application
• How to Run Cypress Tests in Parallel
• How to handle Click Events in Cypress
• How to Test React using Cypress
• How to Perform Visual Testing for Components in Cypress
• How to run UI tests in Cypress
• How to test redirect with Cypress
• How to Perform Screenshot Testing in Cypress
• How to write Test Case in Cypress: (with testing example)

Tool Comparisons

• Cypress vs WebdriverIO: Key Differences
• Cypress vs Selenium: Key Differences
• Playwright vs Cypress: A Comparison
• Cypress vs Selenium vs Playwright vs Puppeteer: Core Differences