Cypress 如何存储函数产出值、获取then返回值及跨文件复用

核心原理说明 #

所有以cy.开头的Cypress内置命令，本质是被加入全局异步任务队列，按照入队顺序依次等待页面元素就绪、执行校验后再返回结果，不会在编写代码的同步执行栈中直接返回最终值。
你之前遇到的lenValue为undefined、无法直接给变量赋值的问题，都是因为直接在队列对象上读取属性，跳过了回调环节——而控制台中cy.$$(selector)能拿到值，是因为这个API是同步返回jQuery对象的调试工具，不做元素等待校验，不能直接用在正式测试代码中，否则会出现元素未加载完成导致的随机测试失败。

1. 存储元素子节点数量的正确实现 #

你之前的代码写法lenValue = cy.get(selector).children().length拿不到真实值，是因为此时cy.get(selector).children()返回的是Cypress的队列对象，根本不是真实的元素集合，自然读不到.length属性。
正确实现步骤：

• 提前在当前测试作用域声明变量
• 通过Cypress链式调用的then回调，拿到经过等待校验的真实元素集合
• 在回调内部完成变量赋值
  示例代码：

// 提前声明变量
let lenValue
cy.get(selector)
  .children()
  .then(($childElements) => {
    // $childElements是经过Cypress校验、完全就绪的jQuery元素集合
    lenValue = $childElements.length
  })

注意：变量赋值的动作是队列执行到回调位置才会触发，所有需要使用lenValue的操作，必须排在这个then调用链之后，不能在同步代码中立刻读取变量值。

2. 跨文件复用自定义函数返回值的实现 #

你之前写的file1.js中的函数存在两个问题：

1. 语法错误：$el.attr(attrName)后多写了一个右括号
2. 没有把完整的Cypress调用链向外return，导致调用方无法接收到后续的执行结果

第一步：修正file1.js中的封装函数 #

// file1.js 导出自定义函数
export function a(selector, attrName) {
  // 必须把完整的Cypress链式调用return出去，让调用方可以继续链式接收执行结果
  return cy.get(selector)
    .then(($el) => {
      // 去掉多余的语法括号
      return $el.attr(attrName)
    })
}

第二步：在file2.js中调用并接收返回值 #

你之前写的state = file1Obj.a('#name','name')无法拿到值，本质和第一个问题一致——a函数返回的是Cypress队列对象，不是同步的最终值，不能直接用等号赋值。正确写法是通过链式then回调接收返回值，再存储到变量中：

// file2.js 导入file1中封装好的函数
import { a } from './file1.js'

// 提前声明要存储值的变量
let state
// 调用封装函数，通过回调接收真实的返回属性值
a('#name', 'name')
  .then((attrResult) => {
    state = attrResult
    // 所有需要用到state的后续操作，都要放在这个回调内部、或者继续向下链式调用
    cy.log('获取到的元素属性值为：', state)
  })

如果需要在多个独立的测试用例（it块）之间复用这个返回值，不要依赖普通全局变量（Cypress默认每个用例运行前会清空上下文），推荐使用Cypress内置的别名机制存储：

// 存值时给结果打别名
a('#name', 'name').as('savedAttr')
// 后续用例中通过@符号引用别名取值
cy.get('@savedAttr').then((savedValue) => {
  // 这里即可拿到之前存储的属性值
})

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