如何在Cypress中编写带参数的自定义登录命令适配多环境多用户

原有代码问题说明 #

• 语法错误：env(staging) = xxx、username(username1) = xxx 不属于合法的JavaScript赋值语法，不能通过这种方式做分支判断
• 逻辑问题：没有对传入的参数做合法性校验，传入不存在的环境或用户名时会出现非预期报错
• 扩展性差：新增环境或用户时需要修改分支逻辑，维护成本高

核心实现逻辑 #

• 通过对象映射存储不同环境对应的访问地址
• 通过对象映射存储不同用户名对应的账号密码（生产环境建议将密码存入Cypress环境变量，不要硬编码在命令文件中）
• 依次执行访问目标环境、填写账号密码、点击登录的操作

完整代码 #

// 建议将环境地址、账号密码统一抽离到配置文件或Cypress环境变量中，此处为示例直接写入
const ENV_URL_MAP = {
  staging: 'https://staginglink',
  live: 'https://livelink'
}

const USER_CRED_MAP = {
  username1: {
    account: 'username1',
    password: 'password1'
  },
  // 可在此扩展更多用户的账号密码
  username2: {
    account: 'username2',
    password: 'password2'
  }
}

Cypress.Commands.add('login', (env, username) => {
  // 校验传入的环境是否合法
  if (!ENV_URL_MAP[env]) {
    throw new Error(`不支持的登录环境：${env}，仅支持 ${Object.keys(ENV_URL_MAP).join('、')}`)
  }
  // 校验传入的用户名是否存在配置
  if (!USER_CRED_MAP[username]) {
    throw new Error(`未配置该用户的登录信息：${username}`)
  }

  // 访问目标环境登录页
  cy.visit(ENV_URL_MAP[env])
  // 填写账号密码
  const cred = USER_CRED_MAP[username]
  cy.get('input[name="Parameter.UserName"]').type(cred.account)
  cy.get('input[name="Parameter.Password"]').type(cred.password)
  // 点击登录
  cy.contains('Login').click()
})

调用方式 #

调用时传入对应参数即可，完全兼容你要求的cy.login(live, username1)形式：

// 方式1：直接传入字符串参数
cy.login('live', 'username1')
// 方式2：传入提前定义的常量
const live = 'live'
const username1 = 'username1'
cy.login(live, username1)

优化建议 #

• 密码敏感信息不要硬编码在命令中，可存入cypress.config.js的env配置项，通过Cypress.env('USERNAME1_PWD')的形式读取
• 可添加登录成功的校验逻辑，比如登录后校验页面跳转是否符合预期、是否存在登录后的特征元素，避免登录失败后续用例全部报错
• 如果需要复用登录态，可以配合cy.session()使用，减少每个用例重复登录的耗时

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