如何在Cypress端到端测试中等待Cookie值更新以避免401认证错误

我之前也遇到过类似的问题，Cypress的异步命令特性确实容易在这类Cookie刷新的场景下踩坑。你原来的代码没生效，核心原因是cy.waitUntil需要接收一个返回解析为布尔值的Promise的函数，但你嵌套的cy.getCookie链式调用没有正确把结果返回给waitUntil，导致它无法判断条件是否满足。

下面给你几个可行的解决方案：

方案1：修正waitUntil的断言逻辑 #

调整代码结构，确保waitUntil的回调函数正确返回一个Promise，这个Promise最终解析为布尔值来判断Cookie是否更新：

const TOKEN_KEY = 'your-token-key'; // 替换成你的实际token Cookie键名

cy.waitUntil(() => {
  // 先获取初始Cookie值
  return cy.getCookie(TOKEN_KEY).then(oldCookie => {
    // 再次获取当前Cookie值，对比是否变化
    return cy.getCookie(TOKEN_KEY).then(newCookie => {
      // 确保新Cookie存在，且值和旧的不同
      return newCookie && oldCookie.value !== newCookie.value;
    });
  });
}, {
  timeout: 10000, // 设置足够长的超时时间，比如10秒
  interval: 500   // 每隔500毫秒检查一次Cookie状态
});

方案2：先存初始Cookie，再等待变化 #

这种方式更清晰，先捕获操作前的初始Cookie值，再等待它被更新：

const TOKEN_KEY = 'your-token-key';

// 先获取操作前的初始token Cookie
cy.getCookie(TOKEN_KEY).then(initialCookie => {
  // 执行触发token刷新的操作（比如打开项目）
  cy.get('[data-testid="open-project-button"]').click();

  // 等待Cookie值与初始值不同
  cy.waitUntil(() => {
    return cy.getCookie(TOKEN_KEY).then(currentCookie => {
      return currentCookie && currentCookie.value !== initialCookie.value;
    });
  });
});

方案3：直接等待刷新token的API请求（更可靠） #

如果知道系统刷新token时会发起某个特定API请求，直接拦截并等待该请求完成是最稳妥的方式——因为Cookie更新必然发生在请求完成之后：

// 拦截刷新token的API请求，给它起一个别名
cy.intercept('POST', '/api/auth/refresh-token').as('refreshTokenRequest');

// 执行打开项目的操作，触发token刷新
cy.get('[data-testid="open-project-button"]').click();

// 等待刷新请求完成
cy.wait('@refreshTokenRequest').its('response.statusCode').should('eq', 200);

// 此时新的token Cookie已经设置完成，可以继续后续操作
cy.getCookie(TOKEN_KEY).should('exist');

为什么你的原代码不生效？ #

你的原代码中，cy.waitUntil的回调函数没有正确返回Promise结果。Cypress的命令是异步链式调用，直接在回调里嵌套cy.getCookie().then(...)时，waitUntil无法捕获到这个链式调用的最终布尔值结果，所以它会直接认为条件不满足，不会等待。

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