Cypress跨测试跨域获取元素文本并输入报错如何解决？

问题根因 #

你当前的写法返回的是Cypress命令链对象，而非直接的优惠码字符串，Cypress所有命令都是异步入队执行的，直接调用返回值操作会触发类型报错。另外Cypress默认测试用例上下文隔离，需要通过全局存储能力实现跨用例传值。

解决方案 #

场景1：同个spec文件内跨用例传值（最常用） #

通过Cypress.env()全局环境变量存储即可，支持跨域场景使用：

1. 首先在cypress.config.js中开启跨域支持配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    // 开启跨域测试支持
    experimentalSessionAndOrigin: true,
  },
});

2. 第一个测试用例提取并存储优惠码：

it('第一个域的测试用例：提取优惠码', () => {
  cy.visit('第一个域的页面地址')
  // 提取h4文本并清除前后冗余空格
  cy.get('h4').invoke('text').then(rawCoupon => {
    const couponValue = rawCoupon.trim()
    cy.log('提取到的优惠码：', couponValue)
    // 存入全局环境变量
    Cypress.env('studentCoupon', couponValue)
  })
})

3. 第二个测试用例读取并使用优惠码：

it('第二个域的测试用例：输入优惠码', () => {
  cy.visit('第二个域的页面地址')
  // 直接从全局环境变量取值输入
  cy.get('优惠码输入框的选择器').type(Cypress.env('studentCoupon'))
})

场景2：不同spec文件之间跨用例传值 #

通过Node层的task能力持久化存储值：

1. 在cypress.config.js中新增task配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    setupNodeEvents(on, config) {
      // 定义全局共享变量
      let sharedCoupon = ''
      on('task', {
        // 存储优惠码
        saveCoupon(coupon) {
          return sharedCoupon = coupon
        },
        // 读取优惠码
        getCoupon() {
          return sharedCoupon
        }
      })
    },
  },
});

2. 第一个spec的用例中存储优惠码：

cy.get('h4').invoke('text').then(rawCoupon => {
  cy.task('saveCoupon', rawCoupon.trim())
})

3. 第二个spec的用例中读取优惠码：

cy.task('getCoupon').then(couponValue => {
  cy.get('优惠码输入框的选择器').type(couponValue)
})

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