标签导航：

cypress performance 插件：在 cypress 测试中轻松测量 web 性能

这是一篇关于我新开发的 Cypress 插件 cypress-performance 的文章，旨在帮助开发者在 Cypress 测试中直接测量和断言 Web 性能指标。 由于现有工具的局限性，我开发了这个插件来更灵活地测试 Web UI 性能。

如今，Web 性能至关重要。用户期望快速流畅的体验，缓慢的页面加载速度会直接影响用户体验和业务指标。虽然 Cypress 是一个优秀的端到端测试工具，但它本身并不具备性能测量的功能。

cypress-performance 插件填补了这个空白。它允许您在 Cypress 测试中直接捕获和分析性能数据，从而及早发现性能问题。

插件地址 GitHub 代码库

主要特性:

  • 实时性能指标收集
  • 内置重试机制，确保可靠的测量结果
  • 支持核心 Web 指标 (Core Web Vitals) 和其他关键性能指标
  • 与现有 Cypress 测试无缝集成
  • 提供 TypeScript 类型定义
  • 可配置的阈值和计时选项

为什么需要这个插件？

虽然 @cypress-audit/lighthouse 也很优秀，但 cypress-performance 提供了不同的优势：

  • 真实用户指标: cypress-performance 在实际测试运行中捕获指标，而非模拟环境，更贴近真实用户体验。
  • 测试集成: 直接集成到您的 Cypress 测试流程中，无需额外步骤。
  • 精细控制: 灵活控制性能测量的时机和方式，内置重试机制提高可靠性。
  • 核心关注点: 专注于关键指标，例如最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。
  • 低开销: 无需单独运行 Lighthouse。
  • 简化配置: 易于使用，配置简单。
  • 资源计时与总字节数: 提供更详细的资源加载信息。

@cypress-audit/lighthouse 的优势:

  • 全面审核，包括 SEO 和可访问性。
  • Lighthouse 一致的评分系统。
  • 静态分析和改进建议。
  • 模拟不同条件下的性能。
  • 提供更广泛的指标。

如何使用:

这是一个无需外部依赖的独立 Cypress 插件。

  1. 安装: npm install -D cypress-performance

  2. 导入: 在 cypress/support/e2e.js 中导入 cypress-performance。 TypeScript 用户需要在 tsconfig.json 中添加类型定义：

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}
  1. 使用 cy.performance() 方法: 该方法可重试，直到获取有效指标或超时。 它支持自定义选项，例如 startMark、endMark、timeout、initialDelay 和 retryTimeout。

示例测试:

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

在 Cypress 测试运行器中的显示:

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

最佳实践:

  • 设置合理的性能阈值。
  • 使用自定义标记来测量特定交互。
  • 考虑不同环境（本地开发与 CI）的差异。
  • 将 cypress-performance 与其他工具 (如 Lighthouse) 结合使用。

总结:

cypress-performance 插件是一个轻量级、易于使用的工具，可以帮助您在 Cypress 测试中轻松测量关键 Web 性能指标，从而确保您的应用程序始终保持高性能。 欢迎大家尝试并提供反馈！ 该插件是开源的，我期待大家的贡献。