Cypress分组增强日志优化：嵌套缩进与命令封装问题咨询

问题1：实现嵌套函数日志的层级缩进 #

要实现嵌套函数调用时的日志缩进，核心是维护一个调用深度计数器，在函数进入时增加深度、退出时减少深度，日志输出时根据当前深度添加缩进字符。

实现思路 #

1. 用全局变量跟踪当前调用深度
2. 编写高阶函数包装需要日志的函数，自动处理深度变化
3. 日志输出时根据深度生成缩进字符串

代码示例 #

// 在cypress/support/index.js中添加以下代码
let logDepth = 0;
const getIndent = () => '  '.repeat(logDepth); // 自定义缩进单位，比如2个空格

// 封装带缩进的日志命令
Cypress.Commands.add('logWithIndent', (message) => {
  cy.log(`${getIndent()}${message}`);
});

// 高阶函数：包装函数，自动处理调用深度与日志
const wrapWithNestedLog = (targetFn, functionLabel) => {
  return (...args) => {
    logDepth++;
    cy.logWithIndent(`🔍 开始执行：${functionLabel}`);
    
    // 执行目标函数，处理异步场景
    const executionResult = targetFn(...args);
    cy.wrap(executionResult).then(() => {
      logDepth--;
      cy.logWithIndent(`✅ 完成执行：${functionLabel}`);
    });

    return executionResult;
  };
};

// 示例基础函数
const login = () => {
  cy.logWithIndent('输入用户名');
  cy.logWithIndent('输入密码');
  cy.logWithIndent('点击登录按钮');
};

// 嵌套函数：用高阶函数包装
const loginCM = wrapWithNestedLog(() => {
  cy.logWithIndent('跳转到CM登录页面');
  login(); // 调用基础函数，自动继承当前层级
}, 'loginCM');

// 测试用例中调用
it('测试嵌套登录流程', () => {
  loginCM();
});

效果说明 #

• 调用loginCM时，深度+1，所有内部日志自动缩进
• 嵌套调用login时，深度保持当前值，日志进一步缩进
• 函数执行完成后深度-1，后续日志恢复原层级

问题2：避免手动包裹函数的更优方案 #

可以通过重写Cypress命令注册方法，实现自定义命令的自动日志注入，无需手动包裹每个函数。

实现思路 #

1. 保存原始的Cypress.Commands.add方法
2. 重写该方法，自动为每个新注册的命令添加日志与层级处理逻辑
3. 保持原有命令的参数与功能不变，仅增加日志能力

代码示例 #

// 在cypress/support/index.js中添加以下代码
const originalAddCommand = Cypress.Commands.add;
let commandDepth = 0;
const getCommandIndent = () => '  '.repeat(commandDepth);

// 重写命令注册方法，自动注入日志逻辑
Cypress.Commands.add = (commandName, options, commandFn) => {
  // 处理参数重载：兼容(name, fn)和(name, options, fn)两种写法
  const actualFn = typeof options === 'function' ? options : commandFn;
  const wrappedCommandFn = (...args) => {
    commandDepth++;
    cy.log(`${getCommandIndent()}🔍 执行自定义命令：${commandName}`);
    
    // 执行原命令，确保异步流程完成后更新深度
    const commandResult = actualFn(...args);
    cy.wrap(commandResult).then(() => {
      commandDepth--;
      cy.log(`${getCommandIndent()}✅ 完成自定义命令：${commandName}`);
    });

    return commandResult;
  };

  // 调用原始方法注册命令
  if (typeof options === 'function') {
    originalAddCommand(commandName, wrappedCommandFn);
  } else {
    originalAddCommand(commandName, options, wrappedCommandFn);
  }
};

// 正常注册自定义命令，无需手动包裹
Cypress.Commands.add('login', () => {
  cy.get('#username').type('test_user');
  cy.get('#password').type('test_pass');
  cy.get('#submit-btn').click();
});

Cypress.Commands.add('loginCM', () => {
  cy.visit('/cm/login');
  cy.login(); // 嵌套调用自定义命令，自动处理层级
});

// 测试用例中直接调用
it('测试自动日志的嵌套命令', () => {
  cy.loginCM();
});

优势说明 #

• 所有自定义命令自动获得日志与层级缩进能力
• 完全兼容原有命令的写法，无需修改业务代码
• 异步命令执行完成后自动更新层级，避免缩进混乱

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