Cypress提取元素文本赋值变量后使用报undefined问题

核心本质是Cypress的命令采用异步队列机制执行，所有cy.开头的API都不会在代码写到的位置同步执行，而是先被加入内部命令队列，等当前所有同步代码执行完毕后，才会按入队顺序依次运行。

失败写法的执行逻辑 #

对应代码：

var txt
cy.visit('https://dev.wholesoftmarket.com/account/signup')
cy.get('label[for="exampleInputEmail1"]').invoke('text').then((text)=>{
    txt = text
})
cy.get('#exampleInputPassword1').type(txt)

执行流程分两个阶段：

• 同步代码执行阶段（所有非cy命令、以及cy命令的入队操作都在这一步完成）：
  • 声明变量txt，初始值为undefined
  • 依次将cy.visit、获取label文本的命令链、cy.get(密码输入框).type(txt)三个命令加入执行队列。注意：这里入队type命令时，读取的是当前同步作用域里txt的值，也就是初始的undefined——此时then里的赋值回调还没有被触发，根本没执行到txt = text这行。
• 队列执行阶段（同步代码跑完后才开始）：
  • 按顺序执行打开页面、获取label文本的操作，拿到文本后才触发then回调给txt赋值，但这步赋值发生得太晚了：type命令早就在入队阶段就拿到了undefined作为入参。
  • 执行到type命令时，因为传入参数是undefined，直接抛出"You passed in: undefined"错误。

正常运行写法的执行逻辑 #

对应代码：

var txt
cy.visit('https://dev.wholesoftmarket.com/account/signup')
cy.get('label[for="exampleInputEmail1"]').invoke('text').then((text)=>{
    txt = text
    cy.get('#exampleInputPassword1').type(txt)
})

执行流程分两个阶段：

• 同步代码执行阶段：
  • 声明变量txt，初始值为undefined
  • 依次将cy.visit、获取label文本+绑定then回调的命令链加入执行队列。注意：then内部的代码此时完全不会执行，里面的type命令也不会在这时候入队。
• 队列执行阶段：
  • 按顺序执行打开页面、获取label文本的操作，拿到文本值后触发then回调
  • 回调内先把拿到的文本赋值给txt，此时txt已经是实际拿到的label文本内容，紧接着才会执行cy.get(密码输入框).type(txt)，把type命令加入队列，这时候读取到的txt是有效值，后续执行type时传入参数正确，代码正常运行。

Cypress通用避坑点：不要靠外部临时变量在不同的cy命令链之间传值，只要需要用到前一个命令的返回结果，要么把后续逻辑直接写在对应.then()回调里，要么用Cypress自带的别名（as）能力传值，从根源上避免这类异步时序问题。

内容的提问来源于stack exchange，提问作者Mr.Prasad J