Cypress测试中如何在多个测试用例间保持动态变量不重置

你遇到的问题原因如下：

1. 直接在describe块内定义const变量时，Cypress运行测试时每次解析测试用例都会重新执行describe回调内的变量初始化逻辑，导致每个it拿到的都是新生成的值。
2. 放在before钩子中不生效，是因为你把变量定义在了before的局部作用域内，外部的it测试用例无法访问。

可行解决方案 #

下面提供3种常用的实现方式，按需选择即可：

方案1：顶层声明变量+before钩子赋值 #

最直观的写法，不需要调整函数声明规则：

// 随机数生成函数保留
function getRandomArbitrary(min, max, decimals) {
  return (Math.random() * (max - min) + min).toFixed(decimals);
}

describe('Reflect changes from X to the Y', () => {
  // 先在describe顶层声明变量
  let termCap, termCapFee;

  // before钩子在所有测试用例执行前仅运行1次，在这里完成赋值
  before(() => {
    termCap = getRandomArbitrary(0.01, 0.3, 2);
    termCapFee = getRandomArbitrary(0.01, 0.3, 2);
  });

  it('填写随机数值', () => {
    // 直接访问已经赋值的变量即可
    cy.get('#term-cap-input').type(termCap);
    cy.get('#term-cap-fee-input').type(termCapFee);
    cy.get('#submit-btn').click();
  });

  it('跳转页面校验数值', () => {
    cy.get('#show-term-cap').should('have.text', termCap);
    cy.get('#show-term-cap-fee').should('have.text', termCapFee);
  });
});

方案2：挂载到测试上下文this #

适合需要在多个钩子间共享数据的场景，注意要使用普通函数替代箭头函数：

describe('Reflect changes from X to the Y', function() { // 这里不能用箭头函数
  before(function() {
    this.termCap = getRandomArbitrary(0.01, 0.3, 2);
    this.termCapFee = getRandomArbitrary(0.01, 0.3, 2);
  });

  it('填写随机数值', function() { // 这里不能用箭头函数
    cy.get('#term-cap-input').type(this.termCap);
  });

  it('跳转页面校验数值', function() { // 这里不能用箭头函数
    cy.get('#show-term-cap').should('have.text', this.termCap);
  });
});

方案3：存储到Cypress环境变量 #

适合跨describe、甚至跨测试文件共享变量的场景：

describe('Reflect changes from X to the Y', () => {
  before(() => {
    Cypress.env('termCap', getRandomArbitrary(0.01, 0.3, 2));
    Cypress.env('termCapFee', getRandomArbitrary(0.01, 0.3, 2));
  });

  it('填写随机数值', () => {
    cy.get('#term-cap-input').type(Cypress.env('termCap'));
  });

  it('跳转页面校验数值', () => {
    cy.get('#show-term-cap').should('have.text', Cypress.env('termCap'));
  });
});

额外注意事项 #

如果你使用Cypress 12及以上版本，默认开启了testIsolation配置，每个it执行后会自动清空页面上下文、刷新页面，如果你需要测试用例间保留页面操作状态，可以在describe级别关闭该配置：

describe('Reflect changes from X to the Y', { testIsolation: false }, () => {
  // 测试逻辑
});

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