如何在Cypress跨测试用例复用别名存储的文本并填充输入框

问题背景 #

已掌握Cypress alias创建方法，页面目标元素的data-cy属性存在，alias创建逻辑正确，但由于两个步骤分属不同测试用例，alias无法跨用例留存，需要在第二个测试用例中复用第一个用例获取的激活码。

获取激活码的代码：

// copy activation code
cy.get('[data-cy="activation-code-guidance"]>strong').as('activationCode')
});

尝试填入激活码的错误代码：
第一种尝试：

const activationCodeInput = () => cy.get('[name=undefined]');
activationCodeInput().type(cy.get('@activationCode'));

第二种尝试：

cy.get('@activationCode').then(activationCodeText => 
console.log(activationCodeText))
cy.get('[name=undefined]').type(activationCodeText);

核心原因 #

Cypress的alias是测试用例（it块）级别的上下文对象，每个it执行完毕后，当前用例的alias会被清空，无法直接跨用例访问。同时，你之前的尝试存在异步逻辑处理错误：

• 第一种错误：type()方法需要传入字符串值，但你传入的是cy.get('@activationCode')这个Cypress命令，而非实际文本内容。
• 第二种错误：activationCodeText是then回调内的局部变量，回调外无法访问，导致后续type()调用时变量未定义。

解决方案 #

方案1：使用Cypress环境变量存储值 #

将激活码存入Cypress环境变量，跨用例直接读取，这是官方推荐的跨用例共享数据方式：

// 第一个测试用例：获取并存储激活码
it('获取激活码', () => {
  cy.get('[data-cy="activation-code-guidance"]>strong')
    .invoke('text') // 获取元素的文本内容
    .then(activationCode => {
      Cypress.env('activationCode', activationCode); // 存入环境变量
    });
});

// 第二个测试用例：读取环境变量并填入
it('在弹窗中填入激活码', () => {
  const activationCode = Cypress.env('activationCode');
  cy.get('[name=undefined]').type(activationCode);
});

方案2：使用全局变量（简单场景可用） #

在所有测试用例外部定义全局变量，存储激活码：

// 全局变量，定义在所有it块之外
let activationCode;

it('获取激活码', () => {
  cy.get('[data-cy="activation-code-guidance"]>strong')
    .invoke('text')
    .then(code => {
      activationCode = code; // 赋值给全局变量
    });
});

it('在弹窗中填入激活码', () => {
  cy.get('[name=undefined]').type(activationCode);
});

注意：此方案依赖测试用例的顺序执行，若开启并行测试会失效，仅适合简单场景。

方案3：使用before钩子提前获取值 #

如果两个步骤的前置条件一致，可以用before钩子在所有测试用例执行前获取激活码，通过alias共享给所有it块：

before(() => {
  // 先完成前置操作（如登录、跳转至目标页面）
  cy.get('[data-cy="activation-code-guidance"]>strong')
    .invoke('text')
    .as('activationCode'); // 在before中创建的alias，所有it都可访问
});

it('验证激活码不为空', () => {
  cy.get('@activationCode').should('not.be.empty');
});

it('在弹窗中填入激活码', () => {
  cy.get('@activationCode').then(code => {
    cy.get('[name=undefined]').type(code);
  });
});

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