Cypress中if块内console打印正常但返回变量为空的问题排查

这是JavaScript异步执行时序问题，和变量作用域没有关系，你的代码执行顺序和预期完全不符：

• cy.request是Cypress的异步命令，调用它的时候不会阻塞后续代码执行，只会把传入的then回调放到任务队列里，等接口响应返回后才会触发执行。
• 实际执行顺序是：
  1. 声明emailHtml变量，初始为空
  2. 发起接口请求，把回调函数暂存，等待接口响应
  3. 直接执行回调外的console.log(emailHtml)、return emailHtml，这时候回调还没运行，emailHtml还没被赋值，自然是空值
  4. 几百毫秒后接口返回，才会执行你写在then里的逻辑，给emailHtml赋值、打印if块内的日志——但这时候函数早就执行完return了，返回值已经是之前的空值，不会再更新。
• 额外逻辑缺陷：你递归重试调用TestMailService.getLatestEmail的时候没有接收返回值，就算重试拿到了邮件内容，也传不回最外层。

Cypress的异步逻辑不能用「外部存变量+同步return」的写法，必须顺着命令链传递值：

// 函数直接返回cy.request的链式调用
function getLatestEmail(subject, attempts = 0) {
  // 配置重试上限防止无限递归
  const maxAttempts = 10;
  return cy.request('GET', `https://api.testmail.app/api/json?apikey=${APIKEY}&namespace=${NAMESPACE}&tag=dev`)
    .then((response) => {
      // 直接查找匹配主题的邮件，不需要用forEach循环给外部变量赋值
      const matchedEmail = response.body.emails.find(item => item.subject === subject);
      if (matchedEmail) {
        // 直接把邮件内容返回给链式调用的下游
        return matchedEmail.html;
      }
      if (attempts >= maxAttempts) {
        throw new Error('重试超过上限，未找到对应邮件');
      }
      // 没找到就等待后递归重试，return递归调用的结果才能把值顺着链传回来
      cy.wait(3000);
      return getLatestEmail(subject, ++attempts);
    })
}

// 调用时必须通过then拿结果，所有用到emailHtml的逻辑都要写在then回调里
getLatestEmail('你要找的邮件主题').then(emailHtml => {
  console.log(emailHtml); // 这里才能拿到正确的内容
  // 后续断言、DOM操作等业务逻辑都要放在这个回调内
})

• 所有Cypress命令都是异步入队执行的，永远不要尝试在命令外部同步获取命令执行的结果。
• 不要用外层变量存异步回调里的赋值，再在外层同步读取，这种写法在JS异步模型下必然出现时序错误。

内容的提问来源于stack exchange，提问作者Artjom Prozorov