Cypress中before/after spec行为不符合预期问题咨询

现象原因 #

Cypress 的 cypress:open（交互式模式）和 cypress:run（命令行/无头模式）对 before:spec 和 after:spec 钩子的触发逻辑完全不同：

• 在 cypress:run 中，每个测试文件（spec）是独立启动、执行、销毁的，因此每个spec都会触发对应的 before:spec 和 after:spec 钩子，符合预期。
• 在 cypress:open 中，启动客户端时会预先扫描并加载所有spec文件的元数据（比如测试用例名称、路径等），此时会触发一次 before:spec 钩子；而 after:spec 钩子会绑定到整个Cypress客户端的生命周期，只有当你关闭客户端时才会触发，而非单个spec运行结束后。

解决办法 #

如果需要在交互式模式下，实现单个spec运行前后的逻辑执行，可以采用以下两种方案：

方案1：在spec文件内部使用根级别的 before/after 钩子 #

将原本放在Cypress配置文件中的逻辑，迁移到单个spec文件的根作用域下：

// 某个spec文件内部
before(() => {
  console.log('当前spec运行前执行');
});

after(() => {
  console.log('当前spec运行后执行');
});

describe('测试用例组', () => {
  // 测试用例
});

这种方式在两种模式下都会在单个spec运行前后触发，完全符合预期。

方案2：在配置文件中区分模式，调整钩子行为 #

通过 Cypress.config('isInteractive') 判断当前是否处于交互式模式，针对性处理钩子逻辑：

on('before:spec', (spec) => {
  if (!Cypress.config('isInteractive')) {
    // run模式下的原有逻辑
    console.log('before spec');
  } else {
    // open模式下，仅在spec实际运行时打印（结合spec参数区分）
    console.log(`准备运行spec文件：${spec.relative}`);
  }
});

on('after:spec', (spec, results) => {
  if (!Cypress.config('isInteractive')) {
    console.log('after spec');
  } else {
    // open模式下，可根据results判断spec是否运行完成
    if (results) {
      console.log(`spec文件 ${spec.relative} 运行完成`);
    }
  }
});

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