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

介绍

这是我在 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)
}

典型的测试如下所示：

她喜欢在赛普拉斯测试运行器中看到的样子：

最佳实践

设置切合实际的阈值 设置性能阈值时请考虑您的用户和应用程序：LCP：

使用自定义标记对于单页应用程序或复杂的用户流程，使用自定义性能标记来衡量特定的交互。

考虑环境变化请记住，CI 环境的性能可能与本地开发不同。相应地调整阈值或使用相对比较。

与其他指标相结合将 cypress-performance 与 Lighthouse 等其他工具结合使用，以获得完整的性能图

结语

我的“cypress-performance”插件用于快速收集有价值且最重要的 Web 性能指标，并为您的 Cypress 测试套件带来性能测试功能。通过关注真实的用户指标并提供细粒度的控制，有助于确保您的应用程序在实际使用条件下表现良好。

无论您是监控 Core Web Vitals、测量特定用户交互，还是确保资源加载顺利，“cypress-performance”都可以提供您所需的工具，以便在性能回归投入生产之前捕获它们。

良好的性能不仅仅在于速度，还在于一致性和可靠性。借助“cypress-performance”，您可以确保您的应用程序在整个开发生命周期中保持高性能标准。

在您的项目中尝试一下，然后让我知道它对您有何帮助！该插件是开源的，我欢迎所有贡献和反馈。

以上是Cypress 性能插件'cypress-performance”：自动化 Web 性能测试指南的详细内容。更多信息请关注PHP中文网其他相关文章！