前端analysis | What,Why,Who,When,Where,How

cypress自动化测试-性能测试

2025-04-09

Cypress 如何进行 API 性能测试

在现代 Web 开发中，API 性能是确保用户体验的关键因素之一。通过性能测试，可以发现并解决 API 在高负载情况下的瓶颈，从而提升系统的稳定性和响应速度。本文将介绍如何使用 Cypress 进行 API 性能测试，并提供一些实用的示例和最佳实践。

为什么进行 API 性能测试

在进行功能测试之后，性能测试是必不可少的。它能够确保 API 在实际使用中的高效性和稳定性，特别是在高并发场景下。通过性能测试，可以预防因性能问题导致的用户体验下降。

如何使用 Cypress 进行 API 性能测试

安装和配置 Cypress

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Cypress：

1
npm install cypress --save-dev

安装完成后，可以通过以下命令初始化 Cypress 并生成示例测试文件, 此处命令是基于UX 界面操作的，

1
npx cypress run
1
npx cypress open ---xxx/**/*.spec.ts

使用 Cypress 进行 API 性能测试

1. 并发测试,— 待验证 todo

Cypress 提供了强大的并发测试功能，可以模拟大量用户同时对 API 进行操作。可以使用专门的插件如 cypress-concurrent 来实现这一功能。

1
npm install cypress-concurrent --save-dev

在 cypress.json 中配置并发测试参数：

1
2
3
4
5
6
7
8
{
  "env": {
    "concurrent": {
      "enabled": true,
      "maxConcurrency": 5
    }
  }
}

2. 测量网络请求

Cypress 提供了 cy.request() 命令来测量网络请求的时间。以下是一个示例，展示如何使用 cy.request() 来测试 API 的响应时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('API Performance Test', () => {
  it('should measure response time of the API', () => {
    cy.request({
      method: 'GET',
      url: 'https://api.example.com/data',
      timeout: 5000
    }).then((response) => {
      const responseTime = response.duration;  //此处有点问题，duration有时候拿不到的？？ 
      cy.log(`Response time: ${responseTime}ms`);
      // 断言响应时间是否在合理范围内
      expect(responseTime).to.be.below(3000);  // 此处的标准，如何定义？？ 
    });
  });
});

在 Cypress 中，response.duration 可能在某些情况下无法获取，这通常是因为网络请求没有按预期完成或响应时间过长。为了确保能够准确测量 API 的响应时间，可以采取：

使用 cy.request 的 timeout 选项

在 cy.request 中设置一个合理的超时时间，以确保在网络状况不佳时测试不会无限期地等待。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('API Performance Test', () => {
  it('should measure response time of the API', () => {
    cy.request({
      method: 'GET',
      url: 'https://api.example.com/data',
      timeout: 10000 // 设置超时时间为 10 秒
    }).then((response) => {
      const responseTime = response.duration;
      cy.log(`Response time: ${responseTime}ms`);
      // 断言响应时间是否在合理范围内
      expect(responseTime).to.be.below(15000); // 假设 15 秒为合理范围
    });
  });
});

3. 使用插件进行性能监控

Cypress 插件 cypress-performance 可以帮助开发者捕获和分析 Web 性能指标。以下是如何使用该插件进行性能测试的示例：

cypress-performance 插件可以在 Cypress 测试中直接测量和断言 Web 性能指标。它提供了更灵活的性能测试方式，并且可以捕获和分析性能数据。

安装插件：

1
npm install cypress-performance --save-dev

在测试中使用插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { performance } from 'cypress-performance';

describe('API Performance Test with Cypress Performance Plugin', () => {
  it('should measure core web vitals', () => {
    cy.visit('/api-endpoint');
    cy.wrap(performance.measure('myMetric', {
      name: 'myMetric',
      start: 'start',
      end: 'end'
    })).then((metric) => {
      console.log(metric);
      // 断言性能指标是否在合理范围内
      expect(metric.duration).to.be.below(1000);
    });
  });
});

结合 Lighthouse 进行性能评估

Lighthouse 是一个强大的工具，可以用于评估 Web 应用的性能、可访问性、渐进式 Web 应用能力等。通过 cypress-audit 插件，可以在 Cypress 测试中集成 Lighthouse 的功能。

  1. 安装 cypress-audit 插件：
1
npm install cypress-audit --save-dev
  1. 在测试中使用 Lighthouse：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
describe('API Performance Test with Cypress Audit', () => {
  it('should run Lighthouse audits', () => {
    cy.request({
      method: 'GET',
      url: 'https://api.example.com/data',
      timeout: 10000
    }).then((response) => {
      // 使用 Lighthouse 进行性能评估
      cy.lighthouse({
        path: '/api-endpoint',
        flags: {
          onlyCategory: 'performance'
        }
      });
    });
  });
});

性能测试的最佳实践

  1. 设置合理的性能阈值：根据业务需求设置合理的性能阈值，并在测试中验证这些阈值。
  2. 使用自定义标记：使用 cy.now() 和 cy.wrap() 来标记性能测量的起始和结束时间。
  3. 考虑不同环境的差异：在本地开发和 CI 环境中分别进行性能测试，以确保测试结果的一致性。
  4. 与其他工具结合使用：可以将 cypress-performance 与其他工具如 Lighthouse 结合使用，以获得更全面的性能评估。
本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: cypress 性能测试 api测试
← 如何快速的迁移功能代码到其他系统 2025年前端趋势学习建议 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏