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

主要特点

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

您可能会想，“我们不是已经有了‘@cypress-audit/lighthouse’吗？”是的，我们有，而且它是一款出色的工具。但是，“cypress-performance”采用了不同的方法：

**另一方面 - @cypress-audit/lighthouse 为我们提供了

全面审核，包括 SEO、可访问性**

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

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

**首先，安装插件：**

`npm install -D cypress-performance`

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

`导入‘cypress-performance’`

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

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

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

用法

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

cy.性能()

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 测试运行器中的样子如下：

最佳实践

设置现实的阈值 设置性能阈值时请考虑您的用户和应用程序： LCP：< 2.5 秒（好），< 4 秒（需要改进） CLS：< 0.1（好），< 0.25（需要改进） TBT：< 300 毫秒（好），< 600 毫秒（需要改进）

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

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

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

结语

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

无论您是监控核心网络生命力、衡量特定的用户交互，还是确保顺畅的资源加载，“cypress-performance”都能提供您在生产之前捕获性能回归所需的工具。

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

在您的项目中尝试一下，然后告诉我效果如何！该插件是开源的，欢迎大家贡献和反馈。