如何在Cypress中借助Fixture实现多账号登录验证？

当前Fixture结构 #

{"field": [{"1": {"admin": {"place": "For Admins","email": "admin@gmail.com","password": "admin123"},"normal": {"place": "Normal","email": "normal@gmail.com","password": "normal123"},"superAdmin": {"email": "superAdmin@gmail.com","password": "superAdmin123"}},"2": {"admin": {"place": "For Admins","email": "admin@gmail.com","password": "admin123"},"normal": {"place": "Normal","email": "normal@gmail.com","password": "normal123"},"superAdmin": {"email": "superAdmin@gmail.com","password": "superAdmin123"}},"3": {"admin": {"place": "For Admins","email": "admin@gmail.com","password": "admin123"},"normal": {"place": "Normal","email": "normal@gmail.com","password": "normal123"},"superAdmin": {"email": "superAdmin@gmail.com","password": "superAdmin123"}},"common": {"wrong_email": "wrong-email@gmail.com","wrong_password": "wrong"}}]}

需求与现有代码 #

需要遍历上述Fixture中所有email和password完成全账号登录验证，现有示例代码如下：

it("Successful Login", function () {
   login(email, password) {
      cy.visit("/");
      cy.get('input[name="email"]').type(email);
      cy.get('input[name="password"]').type(password);
});

同时不确定是否需要优化当前Fixture结构。

一、Fixture结构优化建议 #

当前Fixture存在内容冗余（1/2/3节点下的账号信息完全重复）和层级嵌套过深的问题，会增加遍历复杂度，建议优化为更清晰的结构：

{
  "valid_accounts": [
    {
      "type": "admin",
      "place": "For Admins",
      "email": "admin@gmail.com",
      "password": "admin123"
    },
    {
      "type": "normal",
      "place": "Normal",
      "email": "normal@gmail.com",
      "password": "normal123"
    },
    {
      "type": "superAdmin",
      "email": "superAdmin@gmail.com",
      "password": "superAdmin123"
    }
  ],
  "invalid_credentials": {
    "wrong_email": "wrong-email@gmail.com",
    "wrong_password": "wrong"
  }
}

优化说明：

• 移除重复的1/2/3节点（若这三个对应不同环境，可单独新增environments字段区分，避免内容重复）
• 将有效账号统一存入valid_accounts数组，直接遍历即可获取所有账号
• 错误凭证单独归类到invalid_credentials，明确区分测试场景

二、遍历验证的实现代码 #

1. 基于优化后Fixture的实现 #

// 提前加载Fixture数据
beforeEach(function () {
  cy.fixture('your-fixture-file.json').as('testData');
});

// 遍历所有有效账号，验证登录成功
it('验证所有有效账号登录成功', function () {
  this.testData.valid_accounts.forEach(account => {
    cy.visit("/");
    // 清空输入框避免残留内容
    cy.get('input[name="email"]').clear().type(account.email);
    cy.get('input[name="password"]').clear().type(account.password);
    // 补充登录提交操作
    cy.get('button[type="submit"]').click();
    // 添加登录成功断言（示例）
    cy.url().should('include', '/dashboard');
    cy.contains('欢迎回来').should('be.visible');
  });
});

// 验证错误凭证登录失败
it('验证错误凭证登录失败', function () {
  cy.visit("/");
  cy.get('input[name="email"]').type(this.testData.invalid_credentials.wrong_email);
  cy.get('input[name="password"]').type(this.testData.invalid_credentials.wrong_password);
  cy.get('button[type="submit"]').click();
  // 添加登录失败断言（示例）
  cy.contains('邮箱或密码错误').should('be.visible');
});

2. 基于原始Fixture的实现（不修改结构） #

如果暂时无法修改Fixture结构，可通过多层遍历提取账号信息：

beforeEach(function () {
  cy.fixture('your-original-fixture.json').as('originalData');
});

it('遍历原始Fixture所有账号完成登录验证', function () {
  const fixtureData = this.originalData.field[0];
  
  // 遍历1/2/3节点，跳过common
  Object.keys(fixtureData).forEach(key => {
    if (key !== 'common') {
      const accountGroup = fixtureData[key];
      // 遍历每个节点下的admin/normal/superAdmin
      Object.values(accountGroup).forEach(account => {
        if (account.email && account.password) {
          cy.visit("/");
          cy.get('input[name="email"]').clear().type(account.email);
          cy.get('input[name="password"]').clear().type(account.password);
          cy.get('button[type="submit"]').click();
          // 登录成功断言
          cy.url().should('include', '/dashboard');
        }
      });
    }
  });

  // 验证错误凭证
  cy.visit("/");
  cy.get('input[name="email"]').type(fixtureData.common.wrong_email);
  cy.get('input[name="password"]').type(fixtureData.common.wrong_password);
  cy.get('button[type="submit"]').click();
  cy.contains('登录失败').should('be.visible');
});

关键注意点 #

• 每次登录前必须用.clear()清空输入框，避免上一次输入残留导致测试失败
• 必须补充登录提交操作（如点击登录按钮），否则无法完成登录流程
• 必须添加断言验证登录结果，不能只执行输入操作，确保测试的有效性

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