Cypress测试中API请求未等待导致值未定义问题排查

错误原因 #

你代码里的核心问题是原生fetch不属于Cypress命令队列的一部分，Cypress只会等待自身的命令（比如cy.request）完成，不会等待原生异步操作。所以当后续的cy.then执行时，fetch的回调还没跑完，val自然还是undefined。另外补充一点：fetch返回的是Response对象，直接取response2.id拿不到实际数据，需要先解析成JSON（或对应格式）。

解决方案 #

有两种靠谱的处理方式：

1. 用Cypress自带的cy.request替代fetch

cy.request是Cypress官方命令，会自动加入异步队列，确保执行顺序：

let val;
cy.request(api).then(response => {
  return cy.request(`url-${response.id}`).then(response2 => {
    val = response2.body.id; // Cypress请求的返回数据存在body字段中
  });
});

cy.then(() => {
  console.log('val', val); // 能正确获取到值
});

2. 若必须用fetch，用cy.wrap包装让Cypress等待

把fetch的Promise用cy.wrap包裹，让它成为Cypress队列的一部分，同时记得解析Response数据：

let val;
cy.request(api).then(response => {
  return cy.wrap(fetch(`url-${response.id}`))
    .then(response2 => response2.json()) // 解析返回的JSON数据
    .then(data => {
      val = data.id;
    });
});

cy.then(() => {
  console.log('val', val); // 正确赋值
});

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