如何在Cypress中获取注册时生成的随机用户名、邮箱和密码

问题描述 #

现有Cypress注册代码如下：

cy.get(':nth-child(1) > .form-control').type(userName)
cy.get(':nth-child(2) > .form-control').type(email)
cy.get(':nth-child(3) > .form-control').type(password)

场景说明：使用faker生成随机的用户名（userName）、邮箱（email）和密码（password），填入注册页面完成用户注册后退出。现需获取这些在注册步骤中使用的随机值，填入登录页面的对应字段，完成注册用户的登录操作。

解决方案 #

下面提供三种常用实现方式，可根据测试场景选择：

1. 测试上下文变量存储（推荐同测试用例内使用） #

在测试用例上下文预先生成随机值，注册和登录流程直接复用这些变量，逻辑简洁直观：

describe('注册并登录流程', () => {
  // 声明变量存储随机账号信息
  let userName, email, password;

  beforeEach(() => {
    // 用faker生成随机值
    userName = faker.internet.userName();
    email = faker.internet.email();
    password = faker.internet.password();
  });

  it('完成注册后使用同一账号登录', () => {
    // 注册流程
    cy.visit('/register');
    cy.get(':nth-child(1) > .form-control').type(userName);
    cy.get(':nth-child(2) > .form-control').type(email);
    cy.get(':nth-child(3) > .form-control').type(password);
    cy.get('button[type="submit"]').click();
    // 注册完成后退出
    cy.get('#logout-btn').click();

    // 登录流程，直接复用之前生成的变量
    cy.visit('/login');
    cy.get(':nth-child(1) > .form-control').type(userName); // 假设登录用用户名
    cy.get(':nth-child(2) > .form-control').type(password);
    cy.get('button[type="submit"]').click();
    // 验证登录成功
    cy.get('.user-profile').should('contain', userName);
  });
});

2. Cypress环境变量存储（跨测试用例共享） #

如果注册和登录是独立的测试用例，可将生成的账号信息存入Cypress环境变量，实现跨用例共享：

// 注册测试用例
it('用户注册', () => {
  const userName = faker.internet.userName();
  const email = faker.internet.email();
  const password = faker.internet.password();

  cy.visit('/register');
  cy.get(':nth-child(1) > .form-control').type(userName);
  cy.get(':nth-child(2) > .form-control').type(email);
  cy.get(':nth-child(3) > .form-control').type(password);
  cy.get('button[type="submit"]').click();
  cy.get('#logout-btn').click();

  // 将账号信息存入环境变量
  Cypress.env('registeredUser', { userName, email, password });
});

// 登录测试用例
it('使用注册账号登录', () => {
  // 从环境变量取出账号信息
  const { userName, password } = Cypress.env('registeredUser');

  cy.visit('/login');
  cy.get(':nth-child(1) > .form-control').type(userName);
  cy.get(':nth-child(2) > .form-control').type(password);
  cy.get('button[type="submit"]').click();
  cy.get('.user-profile').should('contain', userName);
});

3. Cypress别名存储（同测试流程内共享） #

通过Cypress的别名机制存储随机值，在后续流程中调用别名获取数据：

it('注册后登录', () => {
  // 生成随机值并设置别名
  cy.wrap(faker.internet.userName()).as('userName');
  cy.wrap(faker.internet.email()).as('email');
  cy.wrap(faker.internet.password()).as('password');

  // 注册流程
  cy.visit('/register');
  cy.get('@userName').then(userName => {
    cy.get(':nth-child(1) > .form-control').type(userName);
  });
  cy.get('@email').then(email => {
    cy.get(':nth-child(2) > .form-control').type(email);
  });
  cy.get('@password').then(password => {
    cy.get(':nth-child(3) > .form-control').type(password);
  });
  cy.get('button[type="submit"]').click();
  cy.get('#logout-btn').click();

  // 登录流程
  cy.visit('/login');
  cy.get('@userName').then(userName => {
    cy.get(':nth-child(1) > .form-control').type(userName);
  });
  cy.get('@password').then(password => {
    cy.get(':nth-child(2) > .form-control').type(password);
  });
  cy.get('button[type="submit"]').click();
  cy.get('.user-profile').should('contain', userName);
});

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