cypress performance 插件：在 cypress 测试中轻松测量 web 性能
这是一篇关于我新开发的 Cypress 插件 cypress-performance 的文章，旨在帮助开发者在 Cypress 测试中直接测量和断言 Web 性能指标。 由于现有工具的局限性，我开发了这个插件来更灵活地测试 Web UI 性能。
如今，Web 性能至关重要。用户期望快速流畅的体验，缓慢的页面加载速度会直接影响用户体验和业务指标。虽然 Cypress 是一个优秀的端到端测试工具，但它本身并不具备性能测量的功能。
cypress-performance 插件填补了这个空白。它允许您在 Cypress 测试中直接捕获和分析性能数据，从而及早发现性能问题。
主要特性:
- 实时性能指标收集
- 内置重试机制，确保可靠的测量结果
- 支持核心 Web 指标 (Core Web Vitals) 和其他关键性能指标
- 与现有 Cypress 测试无缝集成
- 提供 TypeScript 类型定义
- 可配置的阈值和计时选项
为什么需要这个插件？
虽然 @cypress-audit/lighthouse 也很优秀，但 cypress-performance 提供了不同的优势：
-
真实用户指标:
cypress-performance在实际测试运行中捕获指标，而非模拟环境，更贴近真实用户体验。 - 测试集成: 直接集成到您的 Cypress 测试流程中，无需额外步骤。
- 精细控制: 灵活控制性能测量的时机和方式，内置重试机制提高可靠性。
- 核心关注点: 专注于关键指标，例如最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。
- 低开销: 无需单独运行 Lighthouse。
- 简化配置: 易于使用，配置简单。
- 资源计时与总字节数: 提供更详细的资源加载信息。
@cypress-audit/lighthouse 的优势:
- 全面审核，包括 SEO 和可访问性。
- Lighthouse 一致的评分系统。
- 静态分析和改进建议。
- 模拟不同条件下的性能。
- 提供更广泛的指标。
如何使用:
这是一个无需外部依赖的独立 Cypress 插件。
-
安装:
npm install -D cypress-performance -
导入: 在
cypress/support/e2e.js中导入cypress-performance。 TypeScript 用户需要在tsconfig.json中添加类型定义：
<code class="json">{
"compilerOptions": {
"types": ["cypress", "cypress-performance"]
}
}</code>
-
使用
cy.performance()方法: 该方法可重试，直到获取有效指标或超时。 它支持自定义选项，例如startMark、endMark、timeout、initialDelay和retryTimeout。
示例测试:
在 Cypress 测试运行器中的显示:
最佳实践:
- 设置合理的性能阈值。
- 使用自定义标记来测量特定交互。
- 考虑不同环境（本地开发与 CI）的差异。
- 将
cypress-performance与其他工具 (如 Lighthouse) 结合使用。
总结:
cypress-performance 插件是一个轻量级、易于使用的工具，可以帮助您在 Cypress 测试中轻松测量关键 Web 性能指标，从而确保您的应用程序始终保持高性能。 欢迎大家尝试并提供反馈！ 该插件是开源的，我期待大家的贡献。
