Cypress 如何校验已编写测试用例中type()方法是否携带log:false参数

这类校验需求在Cypress工程化实践中非常常见，主流有两种落地方式：

方案1：基于ESLint自定义规则实现静态校验（优先推荐） #

这是效率最高的实现方式，在编码、CI预检查阶段就能拦截违规代码，不需要等到测试运行：

• 给项目的ESLint配置新增自定义规则，匹配AST节点中所有cy.type()调用场景
• 规则逻辑固定：
  • 若cy.type()的传入参数少于2个，直接判定违规
  • 若存在第三个参数，校验该对象中是否包含log: false属性，不存在则判定违规
• 自定义ESLint规则的核心判断逻辑参考：

module.exports = {
  create(context) {
    return {
      CallExpression(node) {
        // 匹配cy.type()调用
        if (
          node.callee.type === 'MemberExpression' &&
          node.callee.object.name === 'cy' &&
          node.callee.property.name === 'type'
        ) {
          const args = node.arguments
          // 校验参数数量
          if (args.length < 2) {
            context.report({
              node,
              message: 'cy.type()必须传入{ log: false }作为第三个参数'
            })
            return
          }
          // 校验第三个参数的log配置
          const options = args[2]
          if (
            options.type !== 'ObjectExpression' ||
            !options.properties.some(
              p => p.key.name === 'log' && p.value.value === false
            )
          ) {
            context.report({
              node,
              message: 'cy.type()的第三个参数必须包含{ log: false }配置'
            })
          }
        }
      }
    }
  }
}

该方案可以和代码提交校验、CI流水线结合，从流程上杜绝不符合规范的代码进入代码库

方案2：重写Cypress内置type命令实现运行时校验 #

如果暂时没有配置ESLint自定义规则的条件，可以选择在测试运行阶段兜底校验：
直接在cypress/support/commands.js中重写type命令，加入校验逻辑即可，参考代码：

Cypress.Commands.overwrite('type', (originalFn, subject, text, options = {}) => {
  if (options.log !== false) {
    throw new Error('cy.type()调用不符合规范：必须传入{ log: false }配置项')
  }
  return originalFn(subject, text, options)
})

该方案只要运行测试就能100%拦截违规调用，适合有存量测试用例、需要先做兜底校验的团队

如果需要批量处理存量的不合规代码，可以使用jscodeshift等代码转换工具编写批量替换脚本，不用人工逐一修改。

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