如何在Cypress中声明可跨函数访问的变量？解决空字符串报错

你的问题核心不是变量声明方式，而是Cypress的异步执行机制导致的：你用let声明的content虽然能在then回调里成功赋值，但后续的Cypress命令会在回调执行前就加入命令队列，此时content还是初始的空字符串，所以触发cy.contains()不能传空值的错误。

下面是几种能实现变量跨回调复用的可行方案，按推荐优先级排序：

1. 使用Cypress别名（Alias，最推荐） #

Cypress的别名机制专门用来在命令间传递数据，支持多次复用，完全适配异步执行逻辑：

// 不需要提前声明let content
cy.get('h3').contains("Financial Account Status Change")
  .closest("form").find('span').eq(1)
  .then((el) => {
    const content = el.text();
    // 将内容存为别名
    cy.wrap(content).as('statusContent');

    if (content == "00 (Active)") {
      cy.get('.modal-body > :nth-child(2) > .col-sm-9 > .form-control').select('05 (Decline)')   
    } else {
      cy.get('.modal-body > :nth-child(2) > .col-sm-9 > .form-control').select('00 (Active)')
    } 
  });

// 后续需要使用变量的地方，通过@别名获取
cy.get('@statusContent').then((content) => {
  // 这里的content是已经赋值后的真实值
  cy.get('.ng-binding').parents('.ng-scope').contains(content).should('be.visible')
});

// 其他依赖变量的命令也可以用同样方式获取
cy.get('@statusContent').then((content) => {
  // 比如这里做其他判断或操作
});

2. 链式回调（适合简单场景） #

把所有依赖content的命令都嵌套到第一个then回调内部，保证执行顺序：

cy.get('h3').contains("Financial Account Status Change")
  .closest("form").find('span').eq(1)
  .then((el) => {
    const content = el.text();

    if (content == "00 (Active)") {
      cy.get('.modal-body > :nth-child(2) > .col-sm-9 > .form-control').select('05 (Decline)')   
    } else {
      cy.get('.modal-body > :nth-child(2) > .col-sm-9 > .form-control').select('00 (Active)')
    } 

    // 所有需要用content的命令都放在这里
    cy.get('.modal-body > :nth-child(3) > .col-sm-9 > .form-control').type('No Good Reason')
    cy.get('.modal-body > :nth-child(4) > .col-sm-9 > .form-control').type('Testing Memo')
    cy.get('.btn').contains('Cancel').should('be.visible').click()
    
    // 这里的content已经是赋值后的有效值
    cy.get('.ng-binding').parents('.ng-scope').contains(content).should('be.visible')
    cy.get('.ng-binding > .ng-scope > .glyphicons').click()
  });

3. 全局环境变量（不推荐，仅全局复用场景） #

如果需要在多个测试用例间复用变量，可以用Cypress.env()存储，但要注意异步时机：

cy.get('h3').contains("Financial Account Status Change")
  .closest("form").find('span').eq(1)
  .then((el) => {
    const content = el.text();
    // 存入全局环境
    Cypress.env('statusContent', content);
    
    // ... 其他逻辑
  });

// 使用时要确保已经赋值完成，最好结合then或wait
cy.get('@statusContent').then(() => {
  const content = Cypress.env('statusContent');
  cy.get('.ng-binding').parents('.ng-scope').contains(content).should('be.visible')
});

关键提醒 #

永远不要用同步的let/var变量直接传递Cypress异步命令的结果，因为Cypress的命令是异步执行的，同步变量的赋值时机永远晚于后续命令的执行时机。

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