首页 >web前端 >js教程 >Cypress 性能插件'cypress-performance”：自动化 Web 性能测试指南

Cypress 性能插件'cypress-performance”：自动化 Web 性能测试指南

Linda Hamilton原创: 2024-12-26 04:56:08362浏览

介绍

这是我在 dev.to 上的第一篇文章，所以我希望它会受到欢迎

当我努力测量 Web UI 性能并且现有插件无法为我提供所需的灵活性时，我想到了创建这个插件的想法。 “cypress-performance”插件引入了一种强大的方法来直接在 Cypress 测试中测量和断言 Web 性能指标。与注重功能的传统端到端测试不同，该插件使团队能够及早发现性能回归，并通过自动化测试保持高性能标准。

Web 性能测试如今变得至关重要。用户期望闪电般快速的体验，而缓慢加载的页面可能会严重影响业务指标。虽然 Cypress 是端到端测试的优秀工具，但它缺乏内置的性能测量功能。

今天，我很高兴向您介绍“cypress-performance”，这是一个新插件，可为您的 Cypress 测试带来性能测量功能。

你可以在这里查看：

https://www.npmjs.com/package/cypress-performance https://github.com/Valiantsin2021/cypress-performance

主要特点

测试执行期间的实时性能指标收集
内置重试机制，实现可靠测量
支持 Core Web Vitals 和其他关键绩效指标
与现有赛普拉斯测试无缝集成
TypeScript 支持的类型定义
可配置的阈值和计时选项

为什么需要另一个性能测试插件？

您可能想知道，“我们不是已经有“@cypress-audit/lighthouse”了吗？”是的，我们这样做，而且它是一个出色的工具。然而，“cypress-performance”采取了不同的方法：

真实用户指标：Lighthouse 模拟特定条件下的性能，而 cypress-performance 则在实际测试执行期间捕获指标，让您深入了解真实用户场景。
测试集成：该插件与您现有的测试无缝集成，允许您在执行常规测试流程时测量性能，而不是作为单独的审核。
精细控制：您可以对何时以及如何衡量性能进行精细控制，并通过内置重试机制获得可靠的结果。
核心网络生命：关注重要的现代性能指标，包括最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。
较低的开销 - 无需单独运行灯塔
更少的配置 - 基本使用所需的最少设置
具体指标重点 - 核心网络生命力和关键时间
测试集成 - 自然适合现有测试流程该命令是可链接的，并返回所有收集到的要断言的指标
重试功能 - 内置可靠性机制，以确保收集指标
资源计时 - 详细的资源级别指标
总字节数 - 所有资源的大小

另一边 - @cypress-audit/lighthouse 为我们提供了
全面审核，包括 SEO、可访问性

与 Lighthouse 一致的评分系统
最佳实践的静态分析
改进建议
各种条件下的性能模拟
超越性能的更广泛指标

那么它是什么以及如何使用它？

这是一个独立的 Cypress 插件，具有 0 个外部依赖项。

首先安装插件：

npm install -D cypress-performance

添加到您的 cypress/support/e2e.js：

导入“柏树性能”

对于 TypeScript 用户，请在 tsconfig.json 中包含类型：

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}

现在您已准备好开始衡量性能！

用法

该插件公开了单个 Cypress 方法：

cy.performance()

cy.performance() 命令本身是可重试的，这意味着 Cypress 将重试该命令，直到：

获取有效指标
达到重试超时

命令的默认选项：

MetricsOptions{
  startMark?: keyof PerformanceTiming // Default: 'navigationStart'
  endMark?: keyof PerformanceTiming // Default: 'loadEventEnd'
  timeout?: number // Timeout in milliseconds (default: 10000)
  initialDelay?: number // Initial delay in milliseconds (default: 1000)
  retryTimeout?: number // Retry timeout in milliseconds (default: 5000)
}

典型的测试如下所示：

Cypress Performance Plugin