使用Cypress测量页面加载与命令执行耗时的方法及问题解决

原有测量方案失效的核心原因 #

你之前遇到的结果异常，本质是和Cypress的执行机制强绑定的，和你选择的计时API本身无关：

• Cypress的测试代码会先同步扫描整个用例文件，把所有链式调用的命令按顺序塞进执行队列，等整个文件扫描完成后，再按队列顺序逐个异步执行命令
• 你之前写的取起始时间、算差值的代码，都是在同步扫描阶段运行的——这个时候队列里的cy.visit、cy.get还根本没开始执行，等后面命令真正跑起来的时候，时间差值早就计算完成了，结果自然和真实情况脱节
• 用cy.clock()测量返回0是错配了工具场景：cy.clock()是用来替换页面原生时间API、模拟时间流逝的测试工具，主要用来驱动定时任务、动画、延迟弹窗这类逻辑的测试，根本不会记录真实的时间差，不适合做耗时统计

可直接复用的实现写法 #

测量单组操作的执行耗时 #

把所有时间取值逻辑放进Cypress命令的回调中，保证时间戳的读取和命令执行在同一个异步时序内：

let operationStart;

// 入队命令：真正开始执行目标操作时，才读取起始时间
cy.wrap(null).then(() => {
  operationStart = performance.now();
});

// 替换为你需要测量的目标操作集合
cy.visit("/your-target-page");
cy.get(".main-content").should("be.visible");

// 入队命令：所有目标操作执行完成后，读取结束时间计算差值
cy.then(() => {
  const cost = performance.now() - operationStart;
  cy.log(`本次操作总耗时：${cost.toFixed(2)}ms`);
});

测量完整页面加载耗时（含跨跳转场景） #

如果测试过程中涉及页面跳转、刷新，不能用普通闭包变量存起始时间（页面刷新后JS上下文会被重建，闭包值会丢失），需要把时间戳存在Cypress全局上下文里：

// 将起始时间存入Cypress全局环境，不会被页面刷新清除
Cypress.env("loadTestStart", performance.now());

// 触发页面加载
cy.visit("/target-page-path");

// 等页面DOM完全就绪后计算加载耗时
cy.document().then(() => {
  const loadCost = performance.now() - Cypress.env("loadTestStart");
  cy.log(`页面从发起请求到DOM可交互耗时：${loadCost.toFixed(2)}ms`);
});

避坑提示 #

• 不要用cy.clock()统计真实性能数据，它的设计目标是mock时间逻辑，和真实耗时统计的需求完全不匹配
• 所有时间计算逻辑必须放在cy.then()的回调中执行，禁止在测试文件的顶层同步作用域直接读取时间戳做差值计算
• 跨页面测试时，不要用普通闭包变量存临时时间值，刷新后JS环境重建会导致闭包失效

内容的提问来源于stack exchange，提问作者cameroony