如何在cypress.io中使用多组登录信息、URL和元素执行同一个测试

1. 准备配置文件 #

在Cypress项目的cypress/fixtures目录下新建配置文件smoke.config.json，用来存储所有测试站点的账号、地址、校验元素信息：

[
  {
    "url": "https://site1.com/login",
    "username": "user1",
    "password": "pwd123456",
    "checkElementId": "dashboard-card"
  },
  {
    "url": "https://site2.com/login",
    "username": "user2",
    "password": "pwd654321",
    "checkElementId": "user-center"
  }
  // 可继续添加更多测试条目
]

2. 编写测试脚本 #

在cypress/e2e目录下新建测试文件smoke.cy.js，直接遍历配置数组即可实现逐个执行测试：

// 引入配置文件
import testCases from '../fixtures/smoke.config.json'

describe('批量站点冒烟测试', () => {
  // 遍历所有配置条目，每个条目生成一个独立测试用例
  testCases.forEach((testCase, index) => {
    it(`第${index+1}条用例：${testCase.url}登录校验`, () => {
      // 访问目标登录页
      cy.visit(testCase.url)
      // 输入用户名
      cy.get('input[name="username"]').type(testCase.username)
      // 输入密码
      cy.get('input[name="password"]').type(testCase.password)
      // 点击登录按钮
      cy.get('button[type="submit"]').click()
      // 校验指定元素正常展示
      cy.get(`[data-cy="${testCase.checkElementId}"]`).should('be.visible')
      // 点击登出按钮
      cy.get('button[data-cy="logout"]').click()
    })
  })
})

3. 调整说明 #

• 脚本中的元素选择器需要和你实际页面的元素属性匹配，比如用户名输入框的选择器、登录按钮、登出按钮的选择器都可以根据实际页面修改
• 如果页面加载较慢导致元素找不到，可以在登录后增加cy.wait(1000)等待，或者用cy.intercept监听登录接口返回后再执行后续校验
• 如果需要避免不同用例之间的缓存影响，可以在登出后添加cy.clearAllCookies()、cy.clearLocalStorage()主动清理数据

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