引言
随着前端应用程序的复杂程度越来越高，自动化测试这一领域逐渐兴起。Cypress 作为一款现代化的前端自动化测试工具，可以让我们轻松地将测试代码与开发过程相结合，利用自动化测试进行快速迭代并避免应用程序中的错误。
虽然 Cypress 可以帮助我们快速发现应用程序中的错误，但是在实际应用过程中，我们还需要监控应用程序的性能。本文将介绍如何在 Cypress 测试过程中进行性能监控。
性能监控指南
在 Cypress 测试过程中，性能指标是一项关键内容。我们可以利用一系列的技术来收集浏览器的性能指标，例如 JavaScript 堆栈信息，页面加载时间和资源下载时间。在本文中，我们将介绍以下几种方法：
1. Performance API 监控
Performance API 是浏览器性能监控的标准，我们可以使用该 API 简化我们的监控过程。使用方法如下：
// javascriptcn.com 代码示例
cy.visit('https://example.com', {
onBeforeLoad(win) {
const { PerformanceObserver, performance } = win;
const observer = new PerformanceObserver((list, observer) => {
const entries = list.getEntries();
entries.forEach((entry) => {
console.log(entry.name, entry.startTime);
});
});
observer.observe({ entryTypes: ['mark', 'measure'] });
},
});PerformanceObserver 是 Performance API 的一部分，它可以用于监控页面的时间点和测量耗时。在这个例子中，我们用 onBeforeLoad 钩子创建了一个 PerformanceObserver，并且监控了 mark 和 measure 两种测量类型。
在执行 visit 方法加载页面后，PerformanceObserver 会开始监听 mark 和 measure 事件，如果页面上有 mark 和 measure 事件被触发，那么它们的数据就会被输出到控制台中。
2. Lighthouse 监控
Lighthouse 是一个开放源代码的自动化工具，它用于改善页面的质量。除了一般的性能指标之外，Lighthouse 还提供了各种其他指标，例如页面可用性、无障碍性等。
要在 Cypress 中使用 Lighthouse，我们需要安装 cypress-audit插件：
npm i -D cypress-audit
安装完成后，我们可以在 Cypress 的命令模式中使用该插件：
import 'cypress-audit/commands';
cy.visit('https://example.com');
cy.lighthouse(options, thresholds);其中：
- options 参数是 Lighthouse 的配置项，例如需要测量哪些性能指标、使用哪个移动器配置等；
- thresholds 参数是 Lighthouse 的阈值，这些阈值用于告知 Cypress 是否通过该测试；
3. PerformanceTiming 监控
PerformanceTiming 是 Performance API 的组成部分，它可以用于记录页面的加载和解析时间。
要在 Cypress 中使用 PerformanceTiming，我们需要在页面加载后等待 load 事件：
// javascriptcn.com 代码示例
cy.visit('https://example.com')
.window()
.then((win) => {
cy.wrap(win.performance.timing)
.should('have.property', 'navigationStart')
.and((timing) => {
const responseTime = timing.responseEnd - timing.navigationStart;
expect(responseTime).to.be.lessThan(3000);
});
});在该例子中，我们使用 window() 命令获取被测试应用程序的全局窗口对象。之后，我们使用应用程序的 window.performance.timing 属性来检索页面的性能时间戳。最后，我们在 Cypress 中等待页面的加载完成，并计算出从 navigationStart 到 responseEnd 的响应时间。
总结
在本文中，我们介绍了几种方法可以用于监控 Cypress测试过程中的性能指标。尽管 Cypress 是一款强大的测试工具，但是与性能监控相比，它的性能测试功能相对简单。我们必须自己写代码，或者使用第三方库来获取更多的性能测试指标。无论哪种方式，使用 Cypress 监控应用程序的性能是非常重要的，这不仅可以帮助快速发现应用程序的性能问题，还可以保存应用程序顺畅运行并为用户提供良好的体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652ee8147d4982a6eb00412c