如何在Cypress函数间声明并传递content变量？

你当前遇到的问题是：两个函数分属不同的it测试块，通过cy.as('MyCustomContent')设置的别名无法跨测试用例共享，导致第二个函数取不到之前的content变量。下面是几种可行的解决方法：

方法一：合并到同一个测试用例（最简单直接） #

Cypress的别名@xxx仅在当前it块内有效，把两个测试步骤合并到同一个it里，就能直接共享别名：

修改后的测试调用代码：

it("Account Details Status OK button works and is updated",() =>{
  login();
  access_financial_enquiry();
  check_f_e_overview_account_details_status_modal_ok();
  check_f_e_overview_account_details_status_modal_isupdated();
  //logout();
})

原函数代码无需修改，现在两个函数在同一个it块执行，@MyCustomContent可以正常访问。

方法二：使用Cypress环境变量跨测试用例共享 #

Cypress环境变量可以在不同测试用例间共享（前提是测试按顺序运行），修改两个函数如下：

修改第一个函数（存储值到环境变量） #

export function check_f_e_overview_account_details_status_modal_ok() {
  //CHECK THE STATUS OK BUTTON WORKS
  cy.get("[name = 'accountid']").type('GCS_M822')
  cy.get('.ng-scope > .glyphicons').click()
  //Click the Status edit link
  cy.get('.ng-binding > .ng-scope > .glyphicons').click()
  //Check what the value of the status is and select another status value
  cy.get('h3').contains("Financial Account Status Change").closest("form").find('span').eq(1).then((el) => {
        let 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)')
        } 
        // 存储到环境变量
        Cypress.env('MyCustomContent', 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-primary > .ng-scope').click()
  //check the update ok modal appears correctly
  cy.get('#updateSuccess').find(".modal-title").contains('Update OK').should('exist')
  cy.get('.modal-body').contains('Financial Account Status Change (General) was updated OK').should('exist')
  cy.get('.modal-footer').find('.btn').contains('OK').should('exist').scrollIntoView().click({force: true})
}

修改第二个函数（从环境变量取值） #

export function check_f_e_overview_account_details_status_modal_isupdated() {
  //CHECK THE STATUS IS UPDATED
  cy.get("[name = 'accountid']").type('GCS_M822')
  cy.get('.ng-scope > .glyphicons').click()

  //Check the status has changed
  cy.get('.ng-binding > .ng-scope > .glyphicons').click()
  // 从环境变量获取值
  const content = Cypress.env('MyCustomContent');
  cy.get('.col-sm-9 > .form-control-static > .ng-scope > .ng-binding').contains(content).should('be.visible')
}

测试调用代码保持原来的两个it块即可，注意测试默认按顺序执行，无需额外配置。

方法三：让函数返回值，在测试用例中传递 #

调整第一个函数返回content，然后在测试用例中把值传给第二个函数：

修改第一个函数（返回content） #

export function check_f_e_overview_account_details_status_modal_ok() {
  //CHECK THE STATUS OK BUTTON WORKS
  cy.get("[name = 'accountid']").type('GCS_M822')
  cy.get('.ng-scope > .glyphicons').click()
  //Click the Status edit link
  cy.get('.ng-binding > .ng-scope > .glyphicons').click()
  // 返回链式Promise，最终返回content
  return cy.get('h3').contains("Financial Account Status Change").closest("form").find('span').eq(1).then((el) => {
        let 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)')
        } 
        return content;
     }).then((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-primary > .ng-scope').click()
        //check the update ok modal appears correctly
        cy.get('#updateSuccess').find(".modal-title").contains('Update OK').should('exist')
        cy.get('.modal-body').contains('Financial Account Status Change (General) was updated OK').should('exist')
        cy.get('.modal-footer').find('.btn').contains('OK').should('exist').scrollIntoView().click({force: true})
        
        return content; // 最后返回content供后续使用
     });
}

修改第二个函数（接收content参数） #

export function check_f_e_overview_account_details_status_modal_isupdated(content) {
  //CHECK THE STATUS IS UPDATED
  cy.get("[name = 'accountid']").type('GCS_M822')
  cy.get('.ng-scope > .glyphicons').click()

  //Check the status has changed
  cy.get('.ng-binding > .ng-scope > .glyphicons').click()
  cy.get('.col-sm-9 > .form-control-static > .ng-scope > .ng-binding').contains(content).should('be.visible')
}

修改测试调用代码（传递参数） #

适合在同一个it块内执行：

it("Account Details Status OK button works and is updated",() =>{
  login();
  access_financial_enquiry();
  check_f_e_overview_account_details_status_modal_ok().then((content) => {
    check_f_e_overview_account_details_status_modal_isupdated(content);
  });
  //logout();
})

如果要分两个it块，仍需结合环境变量或其他持久化方式，因为不同it块的上下文是完全隔离的。

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