如何在Cypress测试场景中从fixture文件调用用户名和密码

我来帮你一步步实现用Fixture填充用户名和密码的需求，其实很简单，分两步走就行：

1. 先准备好你的Fixture文件 #

首先在Cypress项目的cypress/fixtures目录下，创建一个比如login_credentials.json的文件（名字随便取，只要后面调用对应上就行），里面存入你的测试账号信息：

{
  "username": "你的测试用户名",
  "password": "你的测试密码"
}

2. 在测试用例中调用Fixture填充字段 #

现在可以把你原来的测试代码改成下面这样，通过cy.fixture()读取刚才的配置文件，然后把数据填充到输入框里：

方式一：全局复用Fixture数据（推荐） #

用beforeEach钩子提前加载Fixture，这样同一个describe下的所有用例都能复用这份数据：

describe('My Login Test', function () {
  beforeEach(function () {
    // 读取Fixture文件，把数据挂载到this上，方便后续用例直接调用
    cy.fixture('login_credentials').then((creds) => {
      this.creds = creds;
    });
  });

  it('Visit Risk App Landing Page & Complete Login', function () {
    cy.visit('site url');
    cy.get('button').click();
    
    // 用Fixture里的用户名和密码填充对应输入框
    cy.get('input[name="username"]').type(this.creds.username); // 替换成你项目中实际的用户名选择器
    cy.get('input[name="password"]').type(this.creds.password); // 替换成你项目中实际的密码选择器
    
    // 点击登录按钮（如果有需要的话）
    cy.get('button[type="submit"]').click();
  });
});

方式二：在单个用例中直接调用 #

如果你只需要在某一个用例里使用Fixture，也可以直接在it块内读取：

describe('My Login Test', function () {
  it('Visit Risk App Landing Page & Complete Login', function () {
    cy.visit('site url');
    cy.get('button').click();
    
    // 直接读取Fixture并链式调用填充字段
    cy.fixture('login_credentials').then((creds) => {
      cy.get('input[name="username"]').type(creds.username);
      cy.get('input[name="password"]').type(creds.password);
      cy.get('button[type="submit"]').click();
    });
  });
});

关键注意点 #

• 一定要把代码里的输入框选择器（比如input[name="username"]）替换成你项目中实际的用户名、密码输入框选择器，你原来代码里的a.auth0-lock-alternative...如果是登录跳转链接，记得对应调整逻辑。
• 如果Fixture文件放在嵌套目录（比如fixtures/auth/login.json），调用时要写完整路径cy.fixture('auth/login')。

这样以后要修改测试账号，直接改Fixture文件就行，不用动测试代码，维护起来超方便~

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