实现可选择环境与用户名的Cypress自定义cy.login登录命令

现有代码&配置问题汇总 #

• 配置文件cypress.json语法错误：存在两个顶层JSON对象，账号配置的嵌套结构不符合JSON规范
• 自定义命令逻辑错误：硬编码覆盖了传入的env、username参数，没有使用传入值；错误调用不存在的Cypress.username()方法读取配置；写死了密码参数，没有和对应账号绑定

实现思路 #

• 统一调整cypress.json配置，把环境地址、账号信息都放在Cypress标准的env字段下，符合配置读取规则
• 自定义命令接收环境标识（staging/live）、账号标识（username1/username2）两个入参
• 从全局配置中读取对应环境的访问地址、对应账号的用户名和密码，完成登录流程

1 修正后的cypress.json配置 #

{
  "env": {
    "staging": "https://staginglink",
    "live": "https://livelink",
    "accounts": {
      "username1": {
        "username": "username1",
        "password": "password1"
      },
      "username2": {
        "username": "username2",
        "password": "password2"
      }
    }
  }
}

2 自定义登录命令代码 #

将以下代码添加到cypress/support/commands.js文件中：

Cypress.Commands.add("login", (envType, userKey) => {
  // 读取对应环境的基础地址
  const targetBaseUrl = Cypress.env(envType)
  // 读取对应账号的账密信息
  const targetAccount = Cypress.env('accounts')[userKey]

  // 跳转对应环境登录页，可根据你实际的登录路径调整URL后缀
  cy.visit(`${targetBaseUrl}/login`)

  // 输入信息完成登录
  cy.get('input[name="Parameter.UserName"]').type(targetAccount.username)
  cy.get('input[name="Parameter.Password"]').type(targetAccount.password)
  cy.contains('Login').click()
})

3 调用示例 #

在测试用例中直接按需求调用即可：

//  staging环境使用username1账号登录
cy.login('staging', 'username1')

// live环境使用username2账号登录
cy.login('live', 'username2')

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